/* 옥타 76 모임 수첩 — v1.5 추가 스타일: 사진첩 · 운영진 탭 · 명단 시트 · 메일 · 인쇄 */

/* ---------- 공통 작은 부품 ---------- */
.seg{display:inline-flex;border:1px solid var(--line2);border-radius:10px;overflow:hidden;background:#fff}
.seg button{height:34px;padding:0 12px;border:0;background:transparent;font-size:13px;color:var(--ink2)}
.seg button+button{border-left:1px solid var(--line2)}
.seg button.on{background:var(--soft);color:var(--blue-d);font-weight:600}
.inp.sm{height:38px;font-size:14px;border-radius:9px;padding:0 10px;width:auto}
.check.sm{font-size:14px;min-height:38px;gap:8px;align-items:center}
.st.hold{background:#EEF0F4;color:#4A5A70}
.dlg.wide{max-width:860px}

/* ---------- 사진첩 ---------- */
.al-top{display:flex;flex-wrap:wrap;gap:8px}
.al-top .btn{height:44px;background:#fff;color:var(--blue-d);border-color:#fff}
.al-top .al-drive{background:transparent;color:#fff;border-color:rgba(255,255,255,.7);text-decoration:none}
.al-top .al-drive:hover{background:rgba(255,255,255,.12);color:#fff}
.al-up{cursor:pointer;position:relative}
.al-up:focus-within{outline:2px solid #fff;outline-offset:2px}
.al-body{padding:12px 12px 100px;display:flex;flex-direction:column;gap:10px}
.alchips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px}
.alchips::-webkit-scrollbar{display:none}
.alchips button{flex:none;height:36px;padding:0 14px;border-radius:999px;border:1px solid var(--line2);background:#fff;font-size:14px;color:var(--navy);white-space:nowrap}
.alchips button.on{background:var(--blue);border-color:var(--blue);color:#fff;font-weight:600}
.alchips button span{font-size:12px;opacity:.8}
.al-sort{display:flex;justify-content:space-between;align-items:center;gap:8px}
.al-grid{columns:2 150px;column-gap:8px}
.al-cell{display:block;width:100%;margin:0 0 8px;padding:0;border:0;border-radius:12px;overflow:hidden;background:var(--soft);position:relative;break-inside:avoid;cursor:zoom-in}
.al-cell img{display:block;width:100%;height:auto}
.al-cell.hid img{opacity:.45}
.al-cell:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.al-ph{display:block;padding-top:70%}
.al-pin{position:absolute;left:8px;top:8px;background:var(--gold);color:#3D2C00;font-size:11px;font-weight:700;padding:3px 8px;border-radius:999px}
.al-pin.hid{left:auto;right:8px;background:var(--navy);color:#fff}
.al-like{position:absolute;right:8px;bottom:8px;background:rgba(11,37,69,.7);color:#fff;font-size:12px;padding:3px 8px;border-radius:999px}
.al-like.on{background:#D6336C}
.al-empty{padding:48px 20px;text-align:center}
.al-foot{text-align:center;margin:8px 0 0}
.al-prev{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px}
.al-prev img{width:72px;height:72px;object-fit:cover;border-radius:8px;flex:none}

/* 크게 보기 */
.lb{position:fixed;inset:0;background:#06101F;z-index:50;display:flex;flex-direction:column;color:#fff}
.lb-top{display:flex;justify-content:space-between;align-items:center;padding:8px 12px}
.lb-top .note{color:#C9D6EA}
.lb-top .iconbtn{color:#fff}
.lb-top .iconbtn:hover{background:rgba(255,255,255,.1)}
.lb-img{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;position:relative;padding:0 8px}
.lb-img img{max-width:100%;max-height:100%;object-fit:contain;border-radius:6px}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:64px;border:0;border-radius:12px;background:rgba(255,255,255,.12);color:#fff;font-size:34px;line-height:1}
.lb-nav:hover{background:rgba(255,255,255,.22)}
.lb-nav.prev{left:8px}.lb-nav.next{right:8px}
.lb-info{background:#0B2545;padding:14px 16px calc(14px + env(safe-area-inset-bottom));display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}
.lb-meta{min-width:0;flex:1 1 240px;display:flex;flex-direction:column;gap:4px}
.lb-meta .note{color:#C9D6EA}
.lb-cap{font-size:15px;line-height:1.5}
.lb-acts{display:flex;flex-wrap:wrap;gap:6px}
.lb-acts .btn{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.25);color:#fff;text-decoration:none}
.lb-acts .btn:hover{background:rgba(255,255,255,.2)}
.lb-acts .btn.liked{background:#D6336C;border-color:#D6336C}
.lb-acts .btn.danger{color:#FFB4AB;border-color:rgba(255,180,171,.5)}

/* ---------- 운영진 틀 ---------- */
.wide.full{max-width:1680px}
.side a.on{background:var(--soft);color:var(--blue-d);font-weight:600}
.side .cnt.soft{background:var(--soft);color:var(--blue-d)}
.quick{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.qk{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 16px;text-decoration:none;color:var(--navy);display:flex;flex-direction:column;gap:4px}
.qk:hover{border-color:var(--blue);color:var(--navy);box-shadow:0 6px 18px rgba(30,111,232,.10)}
.qk b{font-size:15px}.qk span{font-size:13px;color:var(--muted)}
.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px}
.bars{display:flex;flex-direction:column;gap:8px}
.barrow{display:grid;grid-template-columns:110px 1fr 36px;align-items:center;gap:10px;font-size:14px}
.barrow span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.barrow i{display:block;height:10px;border-radius:999px;background:linear-gradient(90deg,var(--blue) var(--w),var(--soft) var(--w))}
.barrow b{text-align:right}
.bdrow{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid #E6EDF7;font-size:14px}
.bdrow .av{width:36px;height:36px;font-size:15px}
.bdrow .d{margin-left:auto;font-weight:600;color:var(--blue-d)}
@media (max-width:899px){
  .wide{padding:12px}
  .side{flex:1 1 100%;flex-direction:row;overflow-x:auto;position:static;padding:6px;gap:4px;scrollbar-width:none}
  .side::-webkit-scrollbar{display:none}
  .side a{flex:none;white-space:nowrap;min-height:40px;gap:6px}
  .asec{padding:16px}
}

/* ---------- 명단 시트 ---------- */
.sh-tools{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.sh-tools .asearch{flex:1 1 240px}
.sh-groups{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.sh-groups .note{margin-right:4px}
.sh-groups button{height:32px;padding:0 12px;border-radius:999px;border:1px solid var(--line2);background:#fff;font-size:13px;color:var(--ink2)}
.sh-groups button.on{background:var(--navy);border-color:var(--navy);color:#fff}
.sh-bulk{display:flex;flex-wrap:wrap;gap:8px;align-items:center;background:var(--soft);border:1px solid #C7DAF7;border-radius:12px;padding:10px 12px;position:sticky;top:0;z-index:4}
.sh-wrap{overflow:auto;max-height:70vh;border:1px solid #E6EDF7;border-radius:12px;background:#fff}
table.sh{border-collapse:separate;border-spacing:0;font-size:13px;width:max-content;min-width:100%}
table.sh th{position:sticky;top:0;z-index:2;background:#F4F7FC;color:var(--muted);font-weight:600;text-align:left;border-bottom:1px solid var(--line2);padding:0;white-space:nowrap}
table.sh th button{width:100%;height:38px;border:0;background:transparent;text-align:left;padding:0 10px;font-weight:600;color:inherit;font-size:13px}
table.sh th.on{color:var(--blue-d)}
table.sh td{border-bottom:1px solid #EEF2F8;padding:6px 10px;max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;height:40px;vertical-align:middle}
table.sh td.ed{cursor:text}
table.sh td.ed:hover{background:#F6F9FE;box-shadow:inset 0 0 0 1px #C7DAF7}
table.sh td.nm{font-weight:600;color:var(--blue-d);cursor:pointer;text-decoration:underline;text-decoration-color:#C7DAF7;text-underline-offset:3px}
table.sh td.editing{padding:2px;overflow:visible;box-shadow:inset 0 0 0 2px var(--blue)}
table.sh td.saving{opacity:.5}
table.sh td.saved{background:var(--greenbg);transition:background .4s}
table.sh .cell{width:100%;min-width:120px;height:34px;border:0;outline:0;padding:0 8px;font-size:13px;background:#fff}
table.sh .ck,table.sh .cc{text-align:center;width:40px;padding:0 6px}
table.sh .ck input,table.sh .cc input{width:18px;height:18px;cursor:pointer}
table.sh .num{color:var(--muted);text-align:right;width:36px;padding-right:6px}
table.sh .ph{width:44px;padding:4px}
table.sh .ph .av{width:30px;height:30px;font-size:13px}
table.sh .acts{white-space:nowrap;padding:4px 8px}
table.sh .acts .btn{height:30px;padding:0 9px;font-size:12px;margin-right:4px}
table.sh tr.sel td{background:#EEF4FE}
table.sh tr.s-pending td,table.sh tr.s-hold td{background:#FFFBEF}
table.sh tr.s-rejected td{color:#8593A8}
table.sh th:first-child,table.sh td:first-child{position:sticky;left:0;background:inherit;z-index:1}
table.sh tbody td:first-child{background:#fff}
table.sh tr.sel td:first-child{background:#EEF4FE}
table.sh th:first-child{z-index:3;background:#F4F7FC}
table.sh .empty{text-align:center;padding:40px}

/* ---------- 메일 ---------- */
.mstep{display:flex;align-items:center;gap:10px;margin-top:6px;flex-wrap:wrap}
.mstep .no{width:26px;height:26px;border-radius:999px;background:var(--blue);color:#fff;font-size:13px;font-weight:700;display:inline-flex;align-items:center;justify-content:center}
.tpls{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.tpl{border:1.5px solid var(--line);border-radius:12px;background:#fff;padding:12px;text-align:left;display:flex;flex-direction:column;gap:4px}
.tpl b{font-size:14px}.tpl span{font-size:12px;color:var(--muted)}
.tpl:hover{border-color:#9CC0F5}
.tpl.on{border-color:var(--blue);background:var(--soft)}
.mto{display:flex;flex-wrap:wrap;gap:6px 14px}
.radio{display:inline-flex;align-items:center;gap:6px;font-size:14px;min-height:36px;cursor:pointer}
.radio input{width:18px;height:18px}
.radio.dis{opacity:.45;cursor:default}
.mrc{font-size:14px;background:var(--bg);border-radius:10px;padding:10px 12px;line-height:1.6}
.mcompose{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;align-items:start}
.mform{display:flex;flex-direction:column;gap:10px}
.mform textarea{font-size:15px;line-height:1.6;min-height:240px}
.vars{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.vars .btn{height:30px;font-family:ui-monospace,monospace;font-size:12px}
.mprev{display:flex;flex-direction:column;gap:6px}
.mail-card{border:1px solid var(--line);border-radius:12px;padding:18px;background:#fff;font-size:14px;line-height:1.7;box-shadow:0 2px 10px rgba(11,37,69,.05)}
.mc-subj{font-weight:700;font-size:16px;padding-bottom:10px;margin-bottom:10px;border-bottom:1px solid var(--line)}
.mc-btn{display:inline-block;margin-top:14px;background:var(--blue);color:#fff;font-weight:700;padding:10px 16px;border-radius:10px}
.msend{display:flex;flex-direction:column;gap:12px}
.mtest{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end}
.malt{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.mprog{display:flex;align-items:center;gap:12px;font-size:14px}
.mprog .bar{flex:1;height:10px;border-radius:999px;background:var(--soft);overflow:hidden;padding:0;margin:0}
.mprog .bar i{display:block;height:100%;width:0;background:var(--blue);transition:width .3s}
.pick{max-height:52vh;overflow:auto;border:1px solid var(--line);border-radius:12px;background:#fff;padding:4px 10px}
.pick .pk{display:flex;align-items:center;gap:10px;padding:6px 0;border-bottom:1px solid #EEF2F8;font-size:14px}
.pick .pk .note{margin-left:auto}

/* ---------- 인쇄 ---------- */
.popts{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center}
.po{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.po>span{font-size:13px;font-weight:600;color:var(--muted)}
.po-title{flex:1 1 240px;flex-direction:row;align-items:center;gap:8px}
.po-title .inp{flex:1}
.pprev-wrap{overflow:auto;background:#DCE3EE;border-radius:16px;padding:24px}
.pprev{background:#fff;margin:0 auto;box-shadow:0 8px 30px rgba(11,37,69,.18);padding:12mm;color:#0B2545;font-family:var(--sans)}
.pprev.portrait{width:210mm;min-height:297mm}
.pprev.landscape{width:297mm;min-height:210mm}
.pprev.fs-s{font-size:9pt}.pprev.fs-m{font-size:10.5pt}.pprev.fs-l{font-size:12.5pt}
.pd-head{display:flex;align-items:center;gap:14px;border-bottom:2px solid #1E6FE8;padding-bottom:8px;margin-bottom:10px}
.pd-head img{height:22px;width:auto}
.pd-head .k{font-size:7.5pt;letter-spacing:.2em;color:#1557C0;font-weight:700}
.pd-head h1{margin:2px 0 0;font-family:var(--serif);font-size:1.6em}
.pd-head .r{margin-left:auto;text-align:right;font-size:.85em;color:#4A5A70}
.pd-foot{margin-top:10px;padding-top:6px;border-top:1px solid #DCE6F5;font-size:7.5pt;color:#4A5A70;text-align:center}
.pd-tbl{width:100%;border-collapse:collapse}
.pd-tbl th{background:#EAF1FC;text-align:left;padding:5px 6px;font-size:.85em;border-bottom:1px solid #9CC0F5}
.pd-tbl td{padding:4px 6px;border-bottom:1px solid #E1E8F3;vertical-align:middle;word-break:keep-all;overflow-wrap:break-word}
.pd-tbl td.c-phone,.pd-tbl td.c-name_en,.pd-tbl td.c-kakao_id,.pd-tbl td.c-birthday{white-space:nowrap}
.pd-tbl td.c-email{word-break:break-all}
.pd-tbl td.b{font-weight:700;white-space:nowrap}
.pd-tbl td.n,.pd-tbl th.n{width:2.2em;text-align:right;color:#4A5A70}
.pd-tbl td.box{text-align:center;font-size:1.3em;width:3em}
.pd-tbl td.sign{width:22%;height:2.4em}
.pd-tbl tr{break-inside:avoid}
.pd-tbl thead{display:table-header-group}
.pp{border-radius:50%;overflow:hidden;background:#EAF1FC;color:#1557C0;display:flex;align-items:center;justify-content:center;font-weight:700;flex:none}
.pp img{width:100%;height:100%;object-fit:cover}
.pp.s{width:2.2em;height:2.2em}
.pp.l{width:5.2em;height:5.2em;border-radius:10px;font-size:1.4em}
.pd-grp{break-inside:avoid-page;margin-bottom:10px}
.pd-grp h2{font-size:1.1em;margin:8px 0 4px;color:#1557C0}
.pd-grp h2 span{font-size:.8em;color:#4A5A70;font-weight:500}
.pd-cards{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.landscape .pd-cards{grid-template-columns:1fr 1fr 1fr}
.pd-card{display:flex;gap:10px;border:1px solid #DCE6F5;border-radius:10px;padding:8px;break-inside:avoid}
.pd-card .tx{min-width:0;display:flex;flex-direction:column;gap:1px}
.pd-card .nm{font-weight:700;font-size:1.15em}
.pd-card .nm span{font-weight:400;font-size:.8em;color:#4A5A70}
.pd-card .ch{color:#1557C0;font-weight:600;font-size:.9em;margin-bottom:2px}
.pd-card .ln{font-size:.88em;overflow-wrap:anywhere}
.pd-card .ln i{font-style:normal;display:inline-block;width:1.3em;color:#9DB0CC}
.pd-tags{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:66mm;gap:0}
.pd-tag{border:1px dashed #9DB0CC;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:8mm 6mm;text-align:center;break-inside:avoid;position:relative}
.tg-top{position:absolute;top:5mm;left:6mm;right:6mm;display:flex;align-items:center;justify-content:space-between;font-size:7pt;letter-spacing:.2em;color:#1557C0;font-weight:700}
.tg-top img{height:9mm;width:auto}
.tg-nm{font-family:var(--serif);font-weight:900;font-size:30pt;line-height:1.1;margin-top:6mm}
.tg-en{font-size:12pt;color:#33445C}
.tg-ch{font-size:11pt;color:#fff;background:#1E6FE8;border-radius:999px;padding:2px 12px;margin-top:4px}
.pd-months{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.landscape .pd-months{grid-template-columns:repeat(4,1fr)}
.pd-mo{border:1px solid #DCE6F5;border-radius:10px;padding:8px;break-inside:avoid}
.pd-mo h2{margin:0 0 4px;font-size:1.1em;color:#1557C0}
.pd-mo .ln{font-size:.9em;padding:1px 0}
.pd-mo .ln span{color:#4A5A70;font-size:.85em}
#printRoot{display:none}
@media print{
  body.printing{background:#fff}
  body.printing>*:not(#printRoot){display:none!important}
  body.printing #printRoot{display:block!important;width:auto!important;min-height:0!important;box-shadow:none!important;padding:0!important;margin:0!important}
  #printRoot img{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  #printRoot .tg-ch,#printRoot .pd-tbl th,#printRoot .pp{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* ---------- 넓은 화면 ---------- */
@media (min-width:900px){
  .book-bar .al-top{flex:none}
  .al-body{padding:20px 24px 0}
  .al-grid{columns:4 200px;column-gap:12px}
  .al-cell{margin-bottom:12px}
  .lb-img{padding:0 72px}
  .lb-nav.prev{left:16px}.lb-nav.next{right:16px}
}

/* ---------- v20261011: 첫 화면 · 로고 눌러 홈 · 버전 · 나라별 정렬 ---------- */
.homebtn{border:0;background:transparent;padding:0;display:flex;align-items:center;gap:12px 18px;cursor:pointer;color:inherit;text-align:left}
.homebtn:focus-visible{outline:2px solid var(--blue);outline-offset:4px;border-radius:8px}
.ahead .homebtn>img{height:28px;width:auto;max-width:240px;object-fit:contain}
.ahead .homebtn .ttl{display:flex;align-items:center;gap:8px;font-family:var(--serif);font-weight:900;font-size:19px}
.ahead .homebtn .ttl img{width:34px;height:34px}
.brand[data-go]{cursor:pointer}
.homelink{border:0;background:transparent;color:inherit;padding:6px 4px;cursor:pointer}
.ver{font-size:11px;color:var(--muted);letter-spacing:.02em;white-space:nowrap}
.on-blue .ver{color:rgba(255,255,255,.8)}
.st-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:4px}
.sortbar{display:flex;justify-content:space-between;align-items:center;gap:8px;padding-bottom:6px}
.drt .linkbtn{font-size:13px}

.home-body{padding:14px 12px 110px;display:flex;flex-direction:column;gap:14px}
.home-search .search{border:1.5px solid var(--line2);height:52px}
.home-search .search input{flex:1;border:0;outline:0;font-size:16px;background:transparent;min-width:0}
.hcard{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px;display:flex;flex-direction:column;gap:10px}
.hcard h2{margin:0;font-size:18px}
.hcard .pre{margin:0;white-space:pre-line;line-height:1.75;font-size:15px}
.hcard.notice{background:var(--amberbg);border-color:#F3D98B}
.hcard.notice h2{color:var(--amber)}
.hc-h{display:flex;justify-content:space-between;align-items:center;gap:8px}
.crit{background:var(--bg);border-radius:12px;padding:12px 14px}
.crit h3{margin:0 0 6px;font-size:14px;color:var(--blue-d)}
.crit ul{margin:0;padding-left:18px;font-size:14px;line-height:1.8}
.home-grid{display:flex;flex-direction:column;gap:14px}
.home-side{display:flex;flex-direction:column;gap:14px}
.home-side .bday{margin:0}
.quick-go{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.quick-go button{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px;text-align:left;display:flex;flex-direction:column;gap:4px;color:var(--navy)}
.quick-go button svg{color:var(--blue)}
.quick-go button b{font-size:15px}
.quick-go button span{font-size:12px;color:var(--muted)}
.quick-go button:hover{border-color:var(--blue)}
.h-photos{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.h-photos button{padding:0;border:0;border-radius:10px;overflow:hidden;aspect-ratio:1;background:var(--soft);cursor:pointer}
.h-photos img{width:100%;height:100%;object-fit:cover;display:block}
.cc-chips{display:flex;flex-wrap:wrap;gap:6px}
.cc-chips button{height:34px;padding:0 12px;border-radius:999px;border:1px solid var(--line2);background:#fff;font-size:14px;color:var(--navy)}
.cc-chips button b{color:var(--blue-d);margin-left:2px}
.cc-chips button:hover{border-color:var(--blue)}
.home-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;font-size:12px;color:var(--muted);padding:4px 6px}
.home-foot>span:first-child{display:flex;align-items:center;gap:8px}
.home-foot img{width:26px;height:26px}
@media (min-width:900px){
  .home-body{padding:20px 24px 0}
  .home-search{max-width:640px}
  .home-grid{display:grid;grid-template-columns:minmax(0,1fr) 380px;align-items:start}
  .h-photos{grid-template-columns:repeat(6,1fr)}
  .home-foot{padding:18px 4px 0}
}
/* 국기 */
.flag{width:20px;height:15px;border-radius:2px;vertical-align:-2px;margin-right:6px;box-shadow:0 0 0 1px rgba(11,37,69,.12);object-fit:cover;flex:none;display:inline-block}
.grp .flag{width:22px;height:16.5px}
.ch .flag{width:18px;height:13.5px;margin-right:4px}

/* 첫 화면 위쪽 (용 그림 배경) */
.home-hero{position:relative;overflow:hidden;color:#fff;background:#1557C0;isolation:isolate}
.hh-art{position:absolute;top:0;right:0;width:100%;height:300px;object-fit:cover;object-position:62% 30%;z-index:-2}
.home-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(11,37,69,.25) 0%,rgba(21,87,192,0) 30%,rgba(21,87,192,.55) 52%,#1557C0 70%,#1250B4 100%)}
.hh-top{display:flex;justify-content:space-between;align-items:center;padding:14px 16px 0}
.hh-text{padding:150px 18px 20px}
.home-hero .kicker{font-size:11px;font-weight:700;letter-spacing:.22em;opacity:.95;text-shadow:0 1px 6px rgba(0,0,0,.25)}
.home-hero h1{margin:6px 0 2px;font-family:var(--sans);font-weight:800;font-size:34px;line-height:1.15;letter-spacing:-.01em;text-shadow:0 2px 14px rgba(11,37,69,.35)}
.slogan-img{display:block;width:250px;height:auto;margin:4px 0 2px;filter:drop-shadow(0 2px 6px rgba(11,37,69,.35))}
.home-hero .slogan{margin:4px 0 0;font-family:var(--serif);font-weight:600;font-size:20px;color:#FFE2A0}
.home-hero .lead{margin:8px 0 0;font-size:14px;line-height:1.6;opacity:.96;max-width:560px}
.hh-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:16px}
.hs{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);border-radius:14px;padding:10px 12px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.hs-ic{width:26px;height:26px;flex:none;color:#fff}
.hs b{display:block;font-size:24px;line-height:1.1;font-weight:800}
.hs span{font-size:12px;opacity:.92}
.quick-go button{position:relative;padding:16px 16px 16px;min-height:132px;overflow:hidden;background:#fff radial-gradient(circle at 100% 0%,#EAF1FC 0,rgba(234,241,252,0) 60%)}
.qg-ic{width:48px;height:48px;border-radius:50%;background:var(--soft);display:inline-flex;align-items:center;justify-content:center;color:var(--blue);margin-bottom:8px}
.qg-ic svg{width:24px;height:24px}
.qg-go{position:absolute;right:14px;bottom:14px;width:32px;height:32px;border-radius:50%;border:1.5px solid #C7DAF7;display:flex;align-items:center;justify-content:center;color:var(--blue)}
.quick-go button:hover .qg-go{background:var(--blue);border-color:var(--blue);color:#fff}
.crit{display:flex;gap:14px;align-items:flex-start}
.crit-ic{width:52px;height:52px;border-radius:50%;background:#fff;color:var(--blue);display:flex;align-items:center;justify-content:center;flex:none;box-shadow:0 2px 8px rgba(30,111,232,.12)}
@media (max-width:380px){.nav button{font-size:11px}.home-hero h1{font-size:28px}.hs{padding:8px}.hs-ic{width:20px;height:20px}.hs b{font-size:20px}}
@media (min-width:900px){
  .home-hero{margin:20px 24px 0;border-radius:22px;min-height:400px;background:linear-gradient(100deg,#1250B4 0%,#1E6FE8 38%,#3F86F0 60%,#BFD8F7 100%)}
  .hh-art{width:72%;height:100%;object-fit:cover;object-position:30% 40%}
  .home-hero::before{background:linear-gradient(90deg,#1557C0 0%,#1557C0 29%,rgba(21,87,192,.88) 36%,rgba(30,111,232,.4) 46%,rgba(30,111,232,0) 58%)}
  .hh-text{padding:40px 48px 40px;max-width:720px}
  .home-hero .kicker{font-size:12px}
  .home-hero h1{font-size:52px;margin:10px 0 4px}
  .slogan-img{width:400px}
  .home-hero .slogan{font-size:28px}
  .home-hero .lead{font-size:16px;margin-top:12px;max-width:600px}
  .hh-stats{grid-template-columns:repeat(3,minmax(0,176px));gap:12px;margin-top:26px}
  .hs{padding:14px 16px}
  .hs-ic{width:32px;height:32px}
  .hs b{font-size:28px}
  .hs span{font-size:13px}
}
.hh-top .lang{background:rgba(11,37,69,.38)}

/* 첫 화면: 용 그림이 카드 밖으로 이어지는 모양 (PC) */
.hh-bleed{display:none}
.home-top{position:relative}
.home-top .home-search{padding:14px 12px 0;position:relative;z-index:2}
@media (min-width:900px){
  .home-top{margin:20px 24px 0}
  .hh-bleed{display:block;position:absolute;z-index:0;right:0;top:0;width:66%;height:calc(100% + 24px);object-fit:cover;object-position:28% 42%;border-top-right-radius:22px;
    -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 20%,#000 97%,transparent 100%),linear-gradient(180deg,#000 74%,transparent 100%);-webkit-mask-composite:source-in;
    mask-image:linear-gradient(90deg,transparent 0%,#000 20%,#000 97%,transparent 100%),linear-gradient(180deg,#000 74%,transparent 100%);mask-composite:intersect}
  .home-hero{margin:0;z-index:1;overflow:visible;min-height:380px;
    background:linear-gradient(100deg,#1250B4 0%,#1E6FE8 34%,rgba(42,120,236,.82) 46%,rgba(63,134,240,.28) 58%,rgba(120,170,240,0) 70%)}
  .home-hero::before{display:none}
  .hh-art{display:none}
  .home-top .home-search{padding:18px 0 0;max-width:58%}
  .home-body{padding-top:18px}
}

/* 디자인 컨셉 반영: 소제목 파란 막대 · 검색 필터 버튼 · 모바일 마스코트 · 모바일 바로가기 타일 */
.hcard h2::before{content:"";display:inline-block;width:4px;height:18px;border-radius:2px;background:var(--blue);margin-right:10px;vertical-align:-2px}
.home-search .search{padding-right:6px}
.hs-go{flex:none;width:40px;height:40px;border:0;border-radius:10px;background:transparent;color:var(--blue);display:flex;align-items:center;justify-content:center;cursor:pointer}
.hs-go:hover{background:var(--soft)}
.hh-mascot{display:none}
@media (max-width:899px){
  .hh-art{height:100%;object-position:70% 40%}
  .home-hero::before{background:linear-gradient(180deg,rgba(18,80,180,.82) 0%,rgba(21,87,192,.72) 45%,rgba(18,80,180,.92) 100%)}
  .hh-top .brand{display:flex;align-items:center;gap:10px}
  .hh-top .emblem{width:40px;height:40px;padding:2px}
  .hh-top .emblem img{width:100%;height:100%;object-fit:contain}
  .hh-k{font-size:10px;font-weight:700;letter-spacing:.2em}
  .hh-text{padding:14px 18px 18px;position:relative}
  .hh-text .kicker{display:none}
  .home-hero h1,.slogan-img,.home-hero .slogan,.home-hero .lead{max-width:calc(100% - 118px)}
  .home-hero h1{font-size:30px}
  .slogan-img{width:210px}
  .hh-mascot{display:block;position:absolute;right:6px;top:62px;width:132px;height:132px;z-index:1;filter:drop-shadow(0 6px 14px rgba(11,37,69,.35))}
  .quick-go{grid-template-columns:1fr 1fr;gap:8px}
  .quick-go button{flex-direction:row;align-items:center;gap:10px;min-height:64px;padding:10px 30px 10px 10px;background:#fff}
  .quick-go button .qg-ic{width:40px;height:40px;margin:0;flex:none}
  .quick-go button .qg-ic svg{width:20px;height:20px}
  .quick-go button b{font-size:14px;display:block}
  .qg-go{right:6px;bottom:auto;top:50%;transform:translateY(-50%);width:22px;height:22px;border:0}
  .quick-go .qg-book .qg-ic,.quick-go .qg-chapters .qg-ic{background:var(--blue);color:#fff}
  .quick-go .qg-album .qg-ic{background:#7B5CF0;color:#fff}
  .quick-go .qg-me .qg-ic{background:#F5A524;color:#fff}
}
.qg-t{display:flex;flex-direction:column;gap:4px;padding-right:40px;min-width:0}
.qg-t b{font-size:15px}.qg-t span{font-size:12px;color:var(--muted)}
@media (max-width:899px){.qg-t{padding-right:0;gap:1px}.qg-t b{font-size:14px}.qg-t span{font-size:11px;line-height:1.35}}
.quick-go button .qg-ic svg{color:inherit}