/* 글꼴(Noto Sans KR 400·700·900)은 portal.shell의 <link>가 불러온다(@import는 CSS를 받은 뒤에야 글꼴 요청이 시작돼 느렸다). */

/* 색은 전부 이 변수로만 쓴다. 다크 모드는 아래 두 블록에서 같은 이름을 다시 정의한다. */
:root{
  --bg:#f6f5f0;--paper:#fffefa;--tint:#eff3e8;--tint-2:#e8ede2;--ink:#233c32;--muted:#56625a;--faint:#5f6b62;
  --line:#dfe3d9;--line-strong:#c8d2c0;--accent:#6c8758;--accent-strong:#526d3f;--accent-line:#98b47f;
  --gold:#e9ad53;--gold-hover:#f2bc6a;--on-gold:#2f3424;--forest:#173e30;--deep:#102c24;
  --hero-ink:#f8f5e9;--hero-muted:#b8cabb;--hero-eyebrow:#c1d0a5;--header-bg:#fffefaf2;--input:#ffffff;
  --warn-bg:#faf4e2;--warn-line:#e6d9b7;--warn-ink:#8a6a2e;--warn-muted:#8c7d62;--danger:#b65c49;--success:#54843c;
  --t-notice-bg:#eef4e8;--t-notice:#587344;--t-notice-line:#d5e2cc;
  --t-maint-bg:#e8eef4;--t-maint:#46637e;--t-maint-line:#cdd9e5;
  --t-patch-bg:#f5efe1;--t-patch:#8a6a33;--t-patch-line:#e9debd;
  --t-event-bg:#f9eadd;--t-event:#a0663a;--t-event-line:#edcfb7;
  --npc-bubble:#fffefa;--npc-line:#98b47f;--npc-drop:#cfdcc3;--npc-tag-bg:#173e30;--npc-tag-ink:#f8f5e9;--npc-tag-role:#cfe0bd;--npc-ground:#1d3b2926;
  --el-earth:#7a5524;--el-earth-bg:#f5ecdc;--el-water:#2a5f88;--el-water-bg:#e5eef6;--el-fire:#a83d24;--el-fire-bg:#f9e6df;--el-wind:#256f50;--el-wind-bg:#e2f1e9;
  --shadow:#1d3b2914;--max:1240px;
  font-family:'Noto Sans KR','Segoe UI',sans-serif;color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0e1814;--paper:#15221d;--tint:#1b2b25;--tint-2:#1a2923;--ink:#e3eae2;--muted:#aab9ad;--faint:#94a499;
  --line:#283a33;--line-strong:#36504a;--accent:#a6c487;--accent-strong:#bcd69d;--accent-line:#6f8f58;
  --forest:#11302a;--deep:#0a1612;--header-bg:#101c18f0;--input:#0f1a16;
  --warn-bg:#2a2417;--warn-line:#4a3f24;--warn-ink:#e2c27f;--warn-muted:#bfae88;--danger:#e08a76;--success:#8fc06f;
  --t-notice-bg:#1f3326;--t-notice:#a6c487;--t-notice-line:#2f4a37;
  --t-maint-bg:#1d2a36;--t-maint:#9cc0e0;--t-maint-line:#2e4256;
  --t-patch-bg:#30291b;--t-patch:#e2c27f;--t-patch-line:#4a3f24;
  --t-event-bg:#36261a;--t-event:#efab78;--t-event-line:#55392a;
  --npc-bubble:#1d2e27;--npc-line:#6f8f58;--npc-drop:#0a1612;--npc-tag-bg:#e9ad53;--npc-tag-ink:#2f3424;--npc-tag-role:#4d4630;--npc-ground:#00000080;
  --el-earth:#e3bd7c;--el-earth-bg:#2e2617;--el-water:#93c5ec;--el-water-bg:#172735;--el-fire:#f4a086;--el-fire-bg:#38201a;--el-wind:#8fd6b4;--el-wind-bg:#15302a;
  --shadow:#0006;color-scheme:dark;
}}
:root[data-theme="dark"]{
  --bg:#0e1814;--paper:#15221d;--tint:#1b2b25;--tint-2:#1a2923;--ink:#e3eae2;--muted:#aab9ad;--faint:#94a499;
  --line:#283a33;--line-strong:#36504a;--accent:#a6c487;--accent-strong:#bcd69d;--accent-line:#6f8f58;
  --forest:#11302a;--deep:#0a1612;--header-bg:#101c18f0;--input:#0f1a16;
  --warn-bg:#2a2417;--warn-line:#4a3f24;--warn-ink:#e2c27f;--warn-muted:#bfae88;--danger:#e08a76;--success:#8fc06f;
  --t-notice-bg:#1f3326;--t-notice:#a6c487;--t-notice-line:#2f4a37;
  --t-maint-bg:#1d2a36;--t-maint:#9cc0e0;--t-maint-line:#2e4256;
  --t-patch-bg:#30291b;--t-patch:#e2c27f;--t-patch-line:#4a3f24;
  --t-event-bg:#36261a;--t-event:#efab78;--t-event-line:#55392a;
  --npc-bubble:#1d2e27;--npc-line:#6f8f58;--npc-drop:#0a1612;--npc-tag-bg:#e9ad53;--npc-tag-ink:#2f3424;--npc-tag-role:#4d4630;--npc-ground:#00000080;
  --el-earth:#e3bd7c;--el-earth-bg:#2e2617;--el-water:#93c5ec;--el-water-bg:#172735;--el-fire:#f4a086;--el-fire-bg:#38201a;--el-wind:#8fd6b4;--el-wind-bg:#15302a;
  --shadow:#0006;color-scheme:dark;
}

/* 번체판(/zh-tw/): 한자 글꼴을 먼저 쓰고, 한국어 그대로인 지역·아이템 이름은 Noto Sans KR로 그린다.
   keep-all은 띄어쓰기 없는 중국어를 한 줄로 묶어 넘치게 하므로 번체판에서는 글자 단위로 꺾는다. */
:root:lang(zh-TW){font-family:'Noto Sans TC','Noto Sans KR','Segoe UI',sans-serif}
:lang(zh-TW) body,:lang(zh-TW) h1,:lang(zh-TW) h2,:lang(zh-TW) h3,:lang(zh-TW) .npc-say .npc-line{word-break:normal}

*{box-sizing:border-box}
html{overflow-x:hidden}
body{margin:0;background:var(--bg);color:var(--ink);line-height:1.75;overflow-x:hidden;word-break:keep-all;overflow-wrap:anywhere}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
button:disabled{cursor:default;opacity:.4}
img{display:block;max-width:100%}
h1,h2,h3,p{margin:0}
h1,h2,h3{line-height:1.35;letter-spacing:-.05em;word-break:keep-all}
p{margin-bottom:1em}
h1{font-size:clamp(2.3rem,5vw,4rem)}
h2{font-size:clamp(1.7rem,3vw,2.25rem)}
h3{font-size:1.22rem}
[hidden]{display:none!important}
:focus-visible{outline:3px solid #ca8b33;outline-offset:4px}
.wrap{width:min(calc(100% - 72px),var(--max));margin-inline:auto}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.skip-link{position:fixed;top:-70px;left:16px;z-index:100;background:var(--gold);color:var(--on-gold);padding:12px}
.skip-link:focus{top:10px}

/* 머리글과 메뉴 묶음 */
.site-header{position:sticky;top:0;z-index:40;background:var(--header-bg);border-bottom:1px solid var(--line);backdrop-filter:blur(12px)}
.header-inner{display:flex;align-items:center;gap:28px;min-height:76px}
.brand{display:flex;align-items:center;gap:10px;flex-shrink:0}
.brand img{width:42px;height:42px;object-fit:cover;border-radius:50%;border:2px solid var(--line-strong)}
.brand span{display:grid}
.brand strong{font-weight:900;font-size:1.08rem;letter-spacing:-.06em}
.brand small{font-size:.75rem;letter-spacing:.06em;color:var(--muted)}
.site-nav{display:flex;align-items:stretch;gap:4px;margin-left:auto;white-space:nowrap;align-self:stretch}
.nav-group{position:relative;display:flex}
.nav-top{display:flex;align-items:center;padding:0 16px;font-size:.88rem;font-weight:800;position:relative}
.nav-top:hover,.nav-group:focus-within>.nav-top,.nav-top[aria-current=page]{color:var(--accent)}
.nav-top[aria-current=page]::after{content:'';position:absolute;bottom:-1px;left:16px;right:16px;height:3px;background:var(--accent);border-radius:3px 3px 0 0}
.nav-menu{position:absolute;top:100%;left:50%;transform:translateX(-50%);min-width:176px;padding:8px;background:var(--paper);border:1px solid var(--line);border-radius:8px;box-shadow:0 14px 34px var(--shadow);display:none}
.nav-group:hover .nav-menu,.nav-group:focus-within .nav-menu,.nav-group.is-open .nav-menu{display:grid}
.nav-menu a{padding:9px 12px;border-radius:5px;font-size:.82rem;font-weight:600}
.nav-menu a:hover{background:var(--tint);color:var(--accent-strong)}
.header-tools{display:flex;align-items:center;gap:12px;flex-shrink:0}
.theme-toggle{display:grid;place-items:center;width:38px;height:38px;border:1px solid var(--line);border-radius:50%;background:var(--paper);font-size:1rem;line-height:1}
.theme-toggle:hover{border-color:var(--accent-line)}
.theme-toggle .icon-sun{display:none}
:root[data-theme="dark"] .theme-toggle .icon-sun{display:block}
:root[data-theme="dark"] .theme-toggle .icon-moon{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .theme-toggle .icon-sun{display:block}:root:not([data-theme="light"]) .theme-toggle .icon-moon{display:none}}
.language-switch{display:flex;align-items:center;gap:2px;padding:2px;border:1px solid var(--line);border-radius:999px;background:var(--paper);flex-shrink:0}
.lang-option{display:grid;place-items:center;min-width:30px;height:28px;padding:0 7px;border-radius:999px;font-size:.75rem;font-weight:800;letter-spacing:.04em;line-height:1;color:var(--muted)}
a.lang-option:hover{color:var(--accent-strong);background:var(--tint)}
.lang-option[aria-current]{background:var(--accent-strong);color:var(--paper)}
.menu-toggle{display:none;width:40px;height:40px;border:1px solid var(--line);border-radius:6px;background:var(--paper);font-size:1.1rem}

.button{display:inline-flex;align-items:center;justify-content:center;gap:14px;border:1px solid transparent;border-radius:6px;background:var(--gold);color:var(--on-gold);font-size:.9rem;font-weight:800;min-height:48px;padding:12px 23px;transition:.18s}
.button:hover{background:var(--gold-hover);transform:translateY(-1px)}
.button-large{min-height:56px;padding:14px 30px;font-size:1rem}
.button-outline{background:transparent;border-color:var(--line-strong);color:var(--ink)}
.button-outline:hover{background:var(--tint)}
.button.is-pending{background:var(--tint);color:var(--muted);border-color:var(--line);cursor:default;transform:none}
.play-button{min-height:40px;padding:8px 16px;font-size:.8rem}
.eyebrow{font-size:.75rem;font-weight:800;letter-spacing:.21em;color:var(--faint);margin-bottom:13px}
.eyebrow.light{color:var(--hero-eyebrow)}
.inline-link,.text-link{font-size:.82rem;font-weight:800;white-space:nowrap}
.inline-link:hover,.text-link:hover{text-decoration:underline;text-underline-offset:5px}

/* 첫 화면(2026-10-16 메이플플래닛식 개편): 콘텐츠 폭 배너 슬라이드 → 시작 줄 → 공지사항·이벤트 두 칸.
   배너 첫 장은 로비 키아트 + 로고(정적), 나머지 장은 «첫 화면 배너로 걸기» 글(worker.mjs bannerSlide). 배너 색은 두 모드 모두 같다. */
.home-top{padding-top:22px}
.home-banner{position:relative;height:340px;border-radius:18px;overflow:hidden;background:#102c24}
.banner-track,.banner-slide{position:absolute;inset:0}
.banner-slide{display:block;color:#fff}
.banner-slide[hidden]{display:none}
.banner-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.banner-brand .banner-art{width:150%;max-width:none;object-position:0 60%}
/* 배너 글 그림은 왼쪽에 글이 얹히므로 볼거리가 오른쪽에 있다 — 휴대폰처럼 좌우가 잘릴 때도 오른쪽을 남긴다. */
.banner-post .banner-art{object-position:72% 50%}
.banner-slide::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#0b1f17d9,#0b1f1799 34%,#0b1f1700 58%)}
.banner-copy{position:absolute;z-index:1;left:56px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:flex-start;width:min(460px,calc(100% - 112px))}
.banner-logo{margin:0;width:100%;max-width:400px}
.banner-logo img{display:block;width:100%;height:auto;filter:drop-shadow(0 6px 10px #0006)}
.banner-tagline{margin:12px 0 0;font-size:1.35rem;font-weight:900;letter-spacing:-.03em;text-shadow:0 2px 6px #0008}
.banner-chip{margin-top:16px;padding:6px 14px;border-radius:999px;background:#ffffff26;border:1px solid #ffffff4d;font-size:.82rem;font-weight:700}
.banner-title{margin-top:10px;font-size:1.9rem;font-weight:900;line-height:1.3;letter-spacing:-.04em;text-shadow:0 2px 8px #0009}
.banner-summary{margin-top:8px;font-size:.92rem;line-height:1.7;color:#ffffffd9}
.banner-post:hover .banner-title{text-decoration:underline;text-underline-offset:6px}
.banner-ctrl{position:absolute;z-index:2;right:22px;bottom:20px;display:flex;align-items:center;gap:6px;padding:4px 6px 4px 10px;border-radius:999px;background:#0b1f17a6;color:#fff;font-size:.8rem;font-weight:700}
.banner-ctrl[hidden]{display:none}
.banner-ctrl button{display:grid;place-items:center;min-width:28px;height:28px;border:0;border-radius:50%;background:none;color:inherit;font:inherit;cursor:pointer}
.banner-ctrl .banner-pause{background:#fff;color:#0b1f17;font-size:.62rem}
.home-start{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:18px;margin-top:22px}
.start-hello{display:flex;flex-direction:column;justify-content:center;padding:24px 30px;background:var(--paper);border:1px solid var(--line);border-radius:14px}
.start-hello strong{font-size:1.1rem;font-weight:900}
.start-hello span{margin-top:6px;font-size:.88rem;color:var(--muted)}
.start-hello a{color:var(--accent-strong);font-weight:800;text-decoration:underline;text-underline-offset:4px}
.start-play{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 28px;border-radius:14px;background:linear-gradient(135deg,#f2bc6a,#e9a443);color:var(--on-gold);box-shadow:0 10px 24px #e9ad5355;transition:transform .2s}
.start-play:hover{transform:translateY(-2px)}
.start-play strong{display:block;font-size:1.7rem;font-weight:900;letter-spacing:-.03em;line-height:1.2}
.start-play small{font-size:.82rem;font-weight:700}
.start-play b{display:grid;place-items:center;width:46px;height:46px;flex-shrink:0;border-radius:50%;border:2px solid #2f342466;font-size:1rem}
.home-boards{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:44px;margin-top:40px}
.home-board-head{display:flex;justify-content:space-between;align-items:baseline;padding-bottom:12px;border-bottom:2px solid var(--ink)}
.home-board-head h2{margin:0;font-size:1.25rem;font-weight:900}
.home-board-head a{font-size:.8rem;font-weight:700;color:var(--faint)}
.home-list{list-style:none;margin:0;padding:0}
.home-list a{display:flex;align-items:center;gap:10px;min-width:0;padding:13px 2px;border-bottom:1px solid var(--line)}
.home-list strong{min-width:0;font-size:.95rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.home-list a:hover strong{text-decoration:underline;text-underline-offset:4px}
.home-list time{margin-left:auto;flex-shrink:0;padding-left:8px;font-size:.8rem;color:var(--faint)}
.home-list .tag{flex-shrink:0;border-radius:999px}
.home-list .tag.must{background:var(--forest);color:#f8f5e9;border-color:var(--forest)}
.new-mark{display:inline-grid;place-items:center;width:18px;height:18px;flex-shrink:0;border-radius:4px;background:#d9534f;color:#fff;font-size:.65rem;font-weight:900}
.home-board-empty{margin:0;padding:22px 2px;font-size:.88rem;color:var(--muted)}

/* 이렇게 즐겨요: 연한 이끼색 띠 위 흰 카드, 카드마다 플레이 영상(2026-10-16 사용자 선택 «1»). */
.home-band{margin-top:56px;padding:48px 0 60px;background:var(--tint-2);border-block:1px solid var(--line)}
.home-band .journey-grid{gap:18px;background:none;border:0;border-radius:0;overflow:visible}
.home-band .journey-card{display:flex;flex-direction:column;padding:0 0 24px;border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:0 6px 18px var(--shadow);transition:.2s}
.home-band .journey-card:hover{background:var(--paper);transform:translateY(-3px)}
.home-band .journey-card>:not(.journey-media){margin-left:26px;margin-right:26px}
.home-band .journey-card .inline-link{margin-top:auto}
.home-band .line-icon{margin-bottom:8px;font-size:1.4rem}
.journey-media{display:block;margin-bottom:20px;aspect-ratio:16/9;background:#081510;overflow:hidden}
.journey-media video{display:block;width:100%;height:100%;object-fit:cover}

/* CBT 띠: 머리글 바로 아래 한 줄. 휴대폰은 짧은 문구(.ribbon-short)로 바꾼다. */
.launch-ribbon{border-bottom:1px solid var(--line);background:var(--tint)}
.launch-ribbon .wrap{display:flex;align-items:center;gap:12px;min-height:46px;font-size:.78rem}
.status-dot{width:7px;height:7px;flex-shrink:0;background:#6e9154;border-radius:50%;box-shadow:0 0 0 4px #6e915420}
.launch-ribbon span:not(.status-dot){color:var(--muted)}
.launch-ribbon strong span{color:var(--ink)!important}
.launch-ribbon .ribbon-short{display:none}
.launch-ribbon a{margin-left:auto;font-weight:700;white-space:nowrap}
/* 띠는 한 줄을 지킨다 — 영문 CBT 문구처럼 길면 최신 글 칸에 밀려 말줄임된다. */
.launch-ribbon strong{white-space:nowrap}
.launch-ribbon .wrap>span.ribbon-long{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 띠 오른쪽 최신 글(서버가 CMS_RIBBON 자리에 채움). 제목이 길면 말줄임. */
.launch-ribbon .ribbon-news{display:inline-flex;align-items:center;gap:8px;min-width:0;max-width:52%;color:var(--ink)}
.launch-ribbon .ribbon-news .tag{color:var(--t-notice)}
.launch-ribbon .ribbon-news .tag.maintenance{color:var(--t-maint)}
.launch-ribbon .ribbon-news .tag.patch{color:var(--t-patch)}
.launch-ribbon .ribbon-news .tag.event{color:var(--t-event)}
.launch-ribbon .ribbon-news .ribbon-news-title{min-width:0;overflow:hidden;text-overflow:ellipsis;color:var(--ink);font-size:.84rem}
.launch-ribbon .ribbon-news:hover .ribbon-news-title{text-decoration:underline}

/* 메뉴 안 [게임 시작]·[디스코드](휴대폰 메뉴 전용)와 휴대폰 아래 고정 [게임 시작] */
.nav-cta{display:none}
.nav-cta .nav-theme{display:none}
.mobile-play{display:none}

.quick-menu{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;padding-top:36px}
.quick-item{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:13px;align-items:center;padding:18px;background:var(--paper);border:1px solid var(--line);border-radius:9px;transition:.2s}
.quick-item:hover{border-color:var(--accent-line);transform:translateY(-2px)}
.quick-icon{grid-row:1/3;display:grid;place-items:center;width:42px;height:42px;border-radius:10px;background:var(--tint);color:var(--accent-strong);font-weight:900;font-size:1.1rem}
.quick-item strong{font-size:.88rem;line-height:1.4}
.quick-item small{font-size:.75rem;color:var(--muted);line-height:1.4}

.section{padding-top:72px}
.section-heading{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:24px}
.section-heading p:not(.eyebrow){font-size:.81rem;color:var(--muted);margin:0}


.news-card{display:flex;flex-direction:column;min-width:0;background:var(--paper);border:1px solid var(--line);border-radius:9px;overflow:hidden;transition:.2s}
.news-card:hover{transform:translateY(-4px);box-shadow:0 12px 28px var(--shadow)}
.news-cover{height:166px;position:relative;overflow:hidden;background:var(--tint-2)}
.news-cover>img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.news-card:hover .news-cover>img{transform:scale(1.035)}
.cover-art{height:100%;position:relative;display:flex;align-items:end;padding:24px;background:linear-gradient(135deg,#335646,#163e31);color:#dce7c9;overflow:hidden}
.cover-art::after{content:'';position:absolute;right:-35px;top:-35px;width:180px;height:180px;border:1px solid #becb9240;border-radius:50%;box-shadow:0 0 0 25px #becb920d,0 0 0 50px #becb9208}
.cover-art span{font-size:.75rem;letter-spacing:.22em;position:relative;z-index:1}
.cover-art b{position:absolute;top:15px;left:23px;font:600 3.5rem Georgia,serif;opacity:.28}
.cover-npc{position:absolute;right:22px;bottom:8px;z-index:1;width:auto;max-height:82%;image-rendering:pixelated;filter:drop-shadow(0 6px 6px #0005)}
.cover-art.maintenance{background:linear-gradient(135deg,#3d566b,#22374a)}
.cover-art.patch{background:linear-gradient(135deg,#74634a,#403e32)}
.cover-art.event{background:linear-gradient(135deg,#9c6e41,#6e452f)}
.cover-art.guide,.cover-art.info{background:linear-gradient(135deg,#6e8376,#365e4a)}
.news-card-content{padding:23px;display:flex;flex-direction:column;flex:1}
.news-card-meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:13px;font-size:.75rem;color:var(--muted)}
.tag{display:inline-flex;align-items:center;border:1px solid var(--t-notice-line);background:var(--t-notice-bg);color:var(--t-notice);border-radius:4px;padding:2px 8px;font-size:.75rem;font-weight:800;line-height:1.5;white-space:nowrap}
.tag.maintenance{background:var(--t-maint-bg);color:var(--t-maint);border-color:var(--t-maint-line)}
.tag.patch{background:var(--t-patch-bg);color:var(--t-patch);border-color:var(--t-patch-line)}
.tag.event{background:var(--t-event-bg);color:var(--t-event);border-color:var(--t-event-line)}
.tag.draft{background:var(--tint);color:var(--muted);border-color:var(--line)}
.tag.pinned{background:transparent;color:var(--warn-ink);border-color:var(--warn-line)}
.news-card h3{font-size:1.1rem;line-height:1.6;margin-bottom:10px;overflow-wrap:anywhere}
.news-card p{font-size:.8rem;color:var(--muted);line-height:1.8;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:18px;font-size:.75rem;color:var(--faint)}
.card-bottom b{font-size:1.15rem;font-weight:400}

.journey-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:9px;overflow:hidden}
.journey-card{position:relative;background:var(--paper);padding:30px}
.journey-card:hover{background:var(--tint)}
.journey-num{position:absolute;top:21px;right:24px;color:var(--line-strong);font:italic 2rem Georgia,serif}
.line-icon{font-size:1.8rem;color:var(--accent);margin-bottom:22px}
.journey-card h3{margin-bottom:13px}
.journey-card p{font-size:.8rem;color:var(--muted);line-height:1.95;margin-bottom:22px}
.field-section{margin-top:72px;padding:60px 0;background:var(--tint-2);border-block:1px solid var(--line)}
.field-pets{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.field-pet{display:grid;grid-template-columns:1fr auto;background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:19px 22px;transition:.2s}
.field-pet:hover{transform:translateY(-4px)}
.field-pet img{grid-column:1/-1;height:100px;width:140px;object-fit:contain;margin:12px auto 18px}
/* 펫 그림(봇 /stand GIF)은 흰 배경이라 다크 모드에서 흰 사각형으로 뜬다 — 밝은 받침을 깔아 의도한 액자처럼 보이게 한다. */
.field-pet img,.pet-card-symbol img,.pet-illustration img{background:#fffefa;border-radius:12px;padding:6px;box-sizing:border-box}
/* 다크 모드: 흰 사각형 대신 가장자리가 어둠에 스며드는 둥근 받침. 그림(흰 배경 GIF)을 타원 마스크로 감싸고 조금 낮춘 밝기에 그림자를 준다. */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) :is(.field-pet,.pet-card-symbol,.pet-illustration) img{border-radius:50%;padding:0;background:#fffefa;filter:brightness(.9) sepia(.06) drop-shadow(0 10px 14px #0009);-webkit-mask-image:radial-gradient(closest-side,#000 78%,transparent 100%);mask-image:radial-gradient(closest-side,#000 78%,transparent 100%)}}
:root[data-theme="dark"] :is(.field-pet,.pet-card-symbol,.pet-illustration) img{border-radius:50%;padding:0;background:#fffefa;filter:brightness(.9) sepia(.06) drop-shadow(0 10px 14px #0009);-webkit-mask-image:radial-gradient(closest-side,#000 78%,transparent 100%);mask-image:radial-gradient(closest-side,#000 78%,transparent 100%)}
.field-pet strong{font-size:.98rem}
.field-pet small{grid-row:3;color:var(--muted);font-size:.75rem}
.field-pet b{grid-row:2/4;grid-column:2;align-self:center;color:var(--accent)}
.subtle-note{color:var(--faint);font-size:.75rem;margin:19px 0 0}
.community-strip{margin-top:72px;background:#173e30;color:#f4f2e5;padding:49px 0}
.community-strip .wrap{display:flex;align-items:center;justify-content:space-between;gap:30px}
.community-strip h2{font-size:1.85rem}
.community-strip p:last-child{font-size:.82rem;color:#b3c7b2;margin:13px 0 0}

.site-footer{padding:48px 0 22px;background:var(--tint-2);border-top:1px solid var(--line)}
.footer-grid{display:flex;justify-content:space-between;gap:40px}
.footer-brand{display:flex;flex-direction:column;font:700 1.1rem Georgia,serif;letter-spacing:.12em}
.footer-brand span{font:700 .67rem 'Noto Sans KR',sans-serif;letter-spacing:0;margin-top:5px}
.footer-about p{font-size:.75rem;color:var(--muted);margin:12px 0}
.footer-discord{font-size:.76rem;font-weight:800;color:var(--accent-strong)}
.footer-cols{display:flex;gap:56px}
.footer-col{display:flex;flex-direction:column;gap:8px;font-size:.76rem}
.footer-col strong{font-size:.75rem;letter-spacing:.06em;color:var(--faint);margin-bottom:4px}
.footer-col a:hover{color:var(--accent-strong)}
.footer-note{display:flex;justify-content:space-between;gap:20px;margin-top:34px;padding-top:20px;border-top:1px solid var(--line);color:var(--faint);font-size:.75rem}

/* 하위 페이지 공통 */
.page-intro{padding-block:60px 34px;border-bottom:1px solid var(--line)}
.page-intro h1{font-size:clamp(2.1rem,4vw,3.4rem);margin-bottom:17px}
.lede{color:var(--muted);font-size:.92rem;max-width:760px;margin:0}
.guide-layout{display:grid;grid-template-columns:205px minmax(0,1fr);gap:42px;padding-block:34px 75px}
.guide-side{position:sticky;top:100px;align-self:start;display:flex;flex-direction:column;background:var(--tint);padding:20px;border-radius:8px}
.guide-side strong{font-size:.75rem;letter-spacing:.18em;color:var(--faint);margin-bottom:12px}
.guide-side a{font-size:.8rem;padding:8px 0;color:var(--accent-strong)}
.guide-main{display:grid;gap:18px}
.guide-step{scroll-margin-top:100px;padding:35px;background:var(--paper);border:1px solid var(--line);border-radius:8px}
.step-index{font-size:.75rem;color:var(--faint);letter-spacing:.16em;font-weight:800}
.guide-step h2{font-size:1.65rem;margin:12px 0 20px}
.guide-step p{font-size:.9rem;color:var(--muted)}
.guide-tip{padding:18px 20px;background:var(--tint);border-left:3px solid var(--accent-line);margin:22px 0;font-size:.84rem}
.guide-tip strong{display:block;margin-bottom:6px}
.guide-tip span{color:var(--muted)}
.detail-panel{min-width:0;padding:28px;background:var(--paper);border:1px solid var(--line);border-radius:9px}
.panel-head{margin-bottom:20px}
.panel-head span{display:block;color:var(--faint);font-size:.75rem;letter-spacing:.18em;font-weight:800;margin-bottom:7px}
.panel-head h2{font-size:1.4rem}
.detail-grid .stat-table{min-width:0}
.detail-grid{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(255px,1fr);gap:22px;padding-block:32px}
.detail-panel>p{font-size:.86rem;color:var(--muted)}
.table-scroll{width:100%;max-width:100%;overflow-x:auto}
.stat-table{width:100%;min-width:520px;border-collapse:collapse;font-size:.82rem;font-variant-numeric:tabular-nums}
.stat-table th,.stat-table td{padding:13px 12px;text-align:right;border-bottom:1px solid var(--line)}
.stat-table th:first-child,.stat-table td:first-child{text-align:left}
.stat-table thead{background:var(--tint);color:var(--accent-strong)}
.stat-table thead th{font-size:.75rem}
.stat-table tbody th{font-weight:700}
.points-sim{border-color:var(--accent-line)}
.sim-stage{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;margin:22px 0 24px;padding:22px;background:var(--tint);border-radius:9px}
.sim-chips{display:flex;flex-wrap:wrap;gap:10px}
.sim-chip{display:grid;justify-items:center;gap:4px;min-width:72px;padding:12px 10px;background:var(--paper);border:1px solid var(--line);border-radius:9px}
.sim-chip span{font-size:.72rem;font-weight:800;letter-spacing:.08em;color:var(--faint)}
.sim-chip b{font-size:1.9rem;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.sim-action{display:grid;justify-items:end;gap:8px}
.sim-chance{font-size:.8rem;color:var(--muted);font-variant-numeric:tabular-nums}
@media (max-width:640px){.sim-stage{padding:16px}.sim-chips{width:100%;flex-wrap:nowrap}.sim-chip{min-width:0;flex:1 1 60px}.sim-action{justify-items:stretch;width:100%}.sim-action .button{width:100%}}
.data-note{font-size:.75rem!important;color:var(--faint)!important;line-height:1.9;margin:16px 0 0}
.place-list{padding:0;margin:0;list-style:none;max-height:340px;overflow-y:auto}
.place-list li{display:flex;flex-direction:column;padding:13px 0;border-bottom:1px solid var(--line)}
.place-list strong{font-size:.82rem}
.place-list span{font-size:.75rem;color:var(--muted)}
/* 펫 상세 제목 영역: 왼쪽 이름·탑승·속성, 오른쪽 큰 그림(≥240px). 휴대폰은 위아래. */
.pet-intro{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:20px 40px}
.pet-intro .back-link{display:inline-flex;align-items:center;min-height:44px;font-size:.82rem;color:var(--muted);margin-bottom:12px}
.pet-intro .element-row{justify-content:start;margin-top:18px}
.pet-review-note{margin:16px 0 0;font-size:.78rem;color:var(--warn-ink)}
.pet-illustration{margin:0;padding:18px;background:var(--tint);border-radius:14px}
.pet-illustration img{width:280px;height:210px;object-fit:contain;margin:auto}
.catch-button{width:100%;margin-top:18px}
.catalog-section{padding-block:30px 75px}
.catalog-toolbar{display:flex;gap:12px}
.search-field{display:flex;flex:1;align-items:center;gap:10px;padding:0 15px;border:1px solid var(--line-strong);border-radius:6px;background:var(--paper)}
.search-field input{width:100%;min-height:49px;border:0;outline:0;background:transparent;font-size:.86rem}
.filter-field{display:flex;align-items:center;gap:12px;border:1px solid var(--line-strong);border-radius:6px;background:var(--paper);padding:0 13px;font-size:.8rem}
.filter-field span{color:var(--muted)}
.filter-field select{min-height:49px;background:transparent;border:0}
.filter-field select option{background:var(--paper);color:var(--ink)}
.catalog-count{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 6px;margin:20px 0;font-size:.8rem;color:var(--muted)}
.catalog-note{margin-left:auto;font-size:.75rem;color:var(--warn-ink)}
.catalog-note::before{content:'※ '}
.catalog-count strong{color:var(--accent-strong)}
.pet-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}
.pet-card{display:flex;flex-direction:column;padding:20px;background:var(--paper);border:1px solid var(--line);border-radius:9px;transition:.2s}
.pet-card:hover{transform:translateY(-3px);border-color:var(--accent-line)}
.pet-card-top{display:flex;justify-content:space-between;font-size:.75rem;color:var(--faint);gap:8px}
.pet-card-symbol{display:grid;place-items:center;height:120px;margin:18px 0 10px}
.pet-card-symbol img{max-width:140px;width:100%;height:105px;object-fit:contain}
.pet-card>strong{text-align:center;font-size:1rem;margin-bottom:10px}
.element-row{display:flex;justify-content:center;gap:6px;flex-wrap:wrap}
.element-badge{display:inline-flex;align-items:center;gap:4px;font-size:.75rem;font-weight:700;padding:2px 8px;border-radius:4px;color:var(--t-notice);background:var(--t-notice-bg);border:1px solid var(--t-notice-line)}
.el-mark{font-size:.7em;line-height:1}
.el-earth{color:var(--el-earth);background:var(--el-earth-bg);border-color:color-mix(in srgb,var(--el-earth) 30%,transparent)}
.el-water{color:var(--el-water);background:var(--el-water-bg);border-color:color-mix(in srgb,var(--el-water) 30%,transparent)}
.el-fire{color:var(--el-fire);background:var(--el-fire-bg);border-color:color-mix(in srgb,var(--el-fire) 30%,transparent)}
.el-wind{color:var(--el-wind);background:var(--el-wind-bg);border-color:color-mix(in srgb,var(--el-wind) 30%,transparent)}
.pet-card-stats{display:block;font-size:.75rem;text-align:center;color:var(--muted);margin-top:15px}
.pet-card-stats-label{display:block;font-size:.75rem;color:var(--muted);margin-bottom:6px}
.pet-stat-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}
.pet-stat-grid>span{display:flex;justify-content:space-between;gap:4px;padding:3px 8px;border-radius:4px;background:var(--tint);color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.pet-stat-grid b{font-weight:700;color:var(--muted)}
.pet-card-link{margin-top:15px;padding-top:13px;border-top:1px solid var(--line);font-size:.75rem;display:flex;justify-content:space-between;color:var(--accent-strong)}
.notice-box{padding:20px 22px;border:1px solid var(--warn-line);background:var(--warn-bg);border-radius:8px;font-size:.84rem}
.notice-box strong{color:var(--warn-ink)}
.notice-box p{margin:5px 0 0;color:var(--warn-muted)}
.grade-strip{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:20px}
.grade-strip-three{grid-template-columns:repeat(3,1fr)}
.grade-strip span{display:flex;flex-direction:column;text-align:center;padding:19px 8px;background:var(--tint);border-radius:6px;color:var(--muted);font-size:.76rem}
.grade-strip b{font-size:1.3rem;color:var(--accent-strong);font-variant-numeric:tabular-nums}

/* 확률형 아이템 페이지 */
.odds-layout{display:grid;gap:20px;padding-block:30px 75px}
.odds-meta{display:flex;flex-wrap:wrap;gap:10px 26px;padding:18px 22px;background:var(--paper);border:1px solid var(--line);border-radius:8px;font-size:.8rem;color:var(--muted)}
.odds-meta strong{color:var(--ink)}
.odds-tabs{display:flex;gap:8px;flex-wrap:wrap}
.odds-tabs button{border:1px solid var(--line);background:var(--paper);border-radius:999px;padding:9px 18px;font-size:.84rem;font-weight:700;color:var(--muted)}
.odds-tabs button[aria-selected=true]{background:#173e30;border-color:#173e30;color:#fff}
.odds-panel{display:grid;gap:20px}
.odds-panel h3{font-size:1.05rem;margin:26px 0 12px}
.odds-panel h3:first-child{margin-top:0}
.odds-panel .stat-table{min-width:0}
.rate{font-weight:800;color:var(--accent-strong)}
.rate-zero{color:var(--faint);font-weight:500}
.odds-source{display:inline-block;margin-left:8px;font-size:.75rem;font-weight:700;color:var(--muted);border:1px solid var(--line);border-radius:4px;padding:1px 7px;vertical-align:middle}
.change-log{list-style:none;margin:0;padding:0}
.change-log li{display:grid;grid-template-columns:110px 1fr;gap:16px;padding:12px 0;border-bottom:1px solid var(--line);font-size:.84rem}
.change-log time{color:var(--faint);font-variant-numeric:tabular-nums}
/* 장비 잠재 옵션: 레벨·부위 묶음마다 접는 카드. 같은 확률의 옵션은 한 행에 칩으로 모은다. */
.gear-pools{display:grid;gap:10px}
.gear-pool{border:1px solid var(--line);border-radius:8px;background:var(--paper);min-width:0}
.gear-pool[open]{border-color:var(--line-strong)}
.gear-pool summary{display:grid;grid-template-columns:auto minmax(0,1fr) auto 14px;grid-template-areas:"level parts count mark";align-items:center;gap:6px 14px;padding:14px 16px;cursor:pointer;list-style:none;border-radius:8px}
.gear-pool summary::-webkit-details-marker{display:none}
.gear-pool summary::after{content:"";grid-area:mark;justify-self:center;width:8px;height:8px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:translateY(-2px) rotate(45deg);transition:transform .2s}
.gear-pool[open] summary::after{transform:translateY(2px) rotate(-135deg)}
.gear-pool summary:hover{background:var(--tint)}
.gear-pool summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.gear-pool-level{grid-area:level;font-size:.75rem;font-weight:800;color:var(--accent-strong);background:var(--tint);border:1px solid var(--line);border-radius:999px;padding:3px 10px;white-space:nowrap;font-variant-numeric:tabular-nums}
.gear-pool-parts{grid-area:parts;font-size:.86rem;font-weight:700;color:var(--ink);overflow-wrap:anywhere}
.gear-pool-count{grid-area:count;font-size:.75rem;color:var(--muted);white-space:nowrap}
.gear-pool .table-scroll{padding:0 16px 10px}
.gear-pool .stat-table td:nth-child(2){text-align:left}
.gear-pool .stat-table td.rate,.gear-pool .stat-table th:first-child{white-space:nowrap}
.gear-pool .stat-table tbody th small{display:block;font-size:.75rem;font-weight:500;color:var(--faint)}
.gear-chips{display:flex;flex-wrap:wrap;gap:5px;margin:0;padding:0;list-style:none}
.gear-chips li{padding:2px 8px;border:1px solid var(--line);border-radius:999px;background:var(--tint);color:var(--ink);font-size:.75rem;line-height:1.6;overflow-wrap:anywhere}
@media print{.gear-pool summary::after{display:none}}

.faq-layout{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(260px,1fr);gap:30px;padding-block:35px 80px}
.faq-list{display:grid;gap:12px;align-content:start}
.faq-list details{border:1px solid var(--line);border-radius:8px;background:var(--paper)}
.faq-list summary{padding:20px;cursor:pointer;font-size:.88rem;font-weight:700}
.faq-list details p{font-size:.84rem;color:var(--muted);padding:0 20px 20px;margin:0}
.contact-card{background:#173e30;color:#e8eee1;border-radius:9px;padding:28px;align-self:start}
.contact-card .eyebrow{color:#b6c394}
.contact-card h2{font-size:1.5rem;margin-bottom:18px}
.contact-card p{font-size:.84rem;color:#b0c3ad}
.contact-card small{display:block;font-size:.75rem;color:#a3b19e;margin-top:20px}

/* 정책 페이지 */
.policy-layout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:40px;padding-block:34px 80px}
.policy-tabs{position:sticky;top:100px;align-self:start;display:flex;flex-direction:column;gap:4px}
.policy-tabs a{padding:11px 14px;border-radius:6px;font-size:.86rem;font-weight:700;color:var(--muted)}
.policy-tabs a:hover{background:var(--tint)}
.policy-tabs a[aria-current=page]{background:var(--tint);color:var(--ink);box-shadow:inset 3px 0 0 var(--accent)}
.policy-body{min-width:0;max-width:820px}
.policy-section{padding:26px 0;border-bottom:1px solid var(--line)}
.policy-section:first-child{padding-top:0}
.policy-section h2{display:flex;gap:12px;align-items:baseline;font-size:1.25rem;margin-bottom:14px}
.policy-section h2 span{font:italic 1rem Georgia,serif;color:var(--faint)}
.policy-section ul{margin:0;padding-left:1.2em;display:grid;gap:8px}
.policy-section li{font-size:.9rem;color:var(--muted);line-height:1.85}
.policy-section .table-scroll{margin-bottom:16px;border:1px solid var(--line);border-radius:8px}
.policy-table{width:100%;min-width:600px;border-collapse:collapse;font-size:.84rem;line-height:1.6}
.policy-table th,.policy-table td{padding:11px 12px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.policy-table tbody tr:last-child>*{border-bottom:0}
.policy-table thead{background:var(--tint);color:var(--accent-strong)}
.policy-table thead th{font-size:.75rem;white-space:nowrap}
.policy-table tbody th{font-weight:700;white-space:nowrap}
.policy-table td{color:var(--muted)}
.policy-table td.short,.policy-table td[class^="mark-"]{white-space:nowrap}
.policy-table td.mark-yes{color:var(--accent-strong);font-weight:700}
.policy-table td.mark-no{color:var(--faint);font-weight:700}
.policy-date{font-size:.76rem;color:var(--faint);margin-top:24px}
.policy-history{margin-top:10px;font-size:.78rem;color:var(--muted)}
.policy-history summary{cursor:pointer;font-weight:700}
.policy-history ul{margin:8px 0 0;padding-left:1.2em}
.policy-history time{color:var(--faint);margin-right:8px;font-variant-numeric:tabular-nums}
.faq-list details a{color:var(--accent-strong);text-decoration:underline;text-underline-offset:3px}

.news-section{padding-block:28px 80px}
.news-toolbar{display:flex;gap:20px;justify-content:space-between;align-items:center;margin-bottom:27px}
.news-tabs{display:flex;gap:7px;flex-wrap:wrap}
.news-tabs a{font-size:.82rem;padding:8px 16px;border:1px solid var(--line);border-radius:999px;background:var(--paper)}
.news-tabs a[aria-current=page]{background:#173e30;color:#fff;border-color:#173e30}
.news-search{display:flex;gap:7px}
.news-search input{min-width:0;width:190px;border:1px solid var(--line);border-radius:6px;padding:8px 12px;background:var(--paper);font-size:.82rem}
.news-search button{border:0;background:var(--tint);padding:7px 14px;border-radius:6px}
.news-results{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.news-count{font-size:.75rem;color:var(--muted);margin-bottom:17px}
.pagination{display:flex;justify-content:center;gap:10px;margin-top:35px;align-items:center}
.pagination a{border:1px solid var(--line);padding:7px 15px;border-radius:6px;font-size:.82rem}
.pagination span{font-size:.76rem;color:var(--muted);padding:7px 12px}
.empty-state{padding:55px 25px;background:var(--paper);border:1px dashed var(--line-strong);border-radius:9px;text-align:center;color:var(--muted);grid-column:1/-1;flex:1}
.empty-state h2{font-size:1.5rem;color:var(--ink);margin-bottom:13px}
.empty-state p{font-size:.84rem;margin:10px 0 20px}
.article-layout{padding-block:45px 80px;max-width:950px}
.article-back{display:inline-block;font-size:.82rem;color:var(--muted);margin-bottom:28px}
.article-header{padding:32px 0;border-block:1px solid var(--line);margin-bottom:30px}
.article-header h1{font-size:clamp(1.8rem,3.6vw,2.7rem);line-height:1.5;margin:14px 0;overflow-wrap:anywhere}
.article-header .summary{font-size:.92rem;color:var(--muted)}
.article-meta{display:flex;gap:16px;align-items:center;font-size:.75rem;color:var(--muted);flex-wrap:wrap}
.article-hero{width:100%;height:auto;max-height:460px;object-fit:cover;border-radius:8px;margin-bottom:30px}
.event-dates{padding:17px 20px;background:var(--warn-bg);border:1px solid var(--warn-line);border-radius:8px;margin-bottom:28px;font-size:.82rem}
.article-prose{font-size:.95rem;line-height:2;overflow-wrap:anywhere}
.article-prose p{margin:0 0 1.4em}
.article-prose h2{font-size:1.6rem;margin:1.8em 0 .7em;padding-bottom:10px;border-bottom:1px solid var(--line)}
.article-prose h3{font-size:1.2rem;margin:1.5em 0 .7em}
.article-prose ul,.article-prose ol{padding-left:1.4em;margin-bottom:1.6em}
.article-prose li{padding:3px 0}
.article-prose a{color:var(--accent-strong);text-decoration:underline;text-underline-offset:3px}
.article-prose img{max-height:620px;margin:24px auto;border-radius:8px}
.article-prose code{background:var(--tint);border-radius:3px;padding:2px 6px;font-size:.86em}
.article-prose blockquote{margin:28px 0;padding:20px 24px 20px 22px;background:var(--t-notice-bg);border:1px solid var(--t-notice-line);border-left:5px solid var(--accent);border-radius:14px;color:var(--ink);font-size:1.02em;line-height:1.85;box-shadow:0 6px 18px var(--shadow)}
.article-prose blockquote strong{color:var(--accent-strong);font-weight:800}
.article-end{margin-top:40px;border-top:1px solid var(--line);padding-top:22px;display:flex;gap:20px;justify-content:space-between}
.more-guides{padding-bottom:60px}

/* 404(사이트 틀 안) */
.not-found{padding-block:70px 90px;text-align:center}
.not-found-code{margin:0 0 6px;font-size:4.5rem;font-weight:900;line-height:1;color:var(--line-strong);letter-spacing:-.04em}
.not-found h1{font-size:clamp(1.8rem,4vw,2.6rem);margin-bottom:14px}
.not-found .lede{margin:0 auto}
.not-found-links{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:30px}

/* 가이드 «시작하기» 바로가기 */
.guide-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}

/* NPC 말풍선(portal.npc_say · cms renderSay). 게임 스프라이트는 원본 픽셀을 정수배(zoom)로만 키워 흐려지지 않게 한다.
   인라인 style은 CSP에 막히므로 크기는 img의 width/height(원본) × zoom으로 정한다. */
.npc-say{display:flex;align-items:flex-end;gap:18px;max-width:820px}
.npc-figure{flex:none;position:relative;display:flex;justify-content:center;align-items:flex-end;min-width:96px;padding-bottom:5px}
.npc-figure::before{content:'';position:absolute;left:50%;bottom:0;width:84px;height:14px;transform:translateX(-50%);background:radial-gradient(closest-side,var(--npc-ground),transparent)}
.npc-say .npc-figure img{position:relative;zoom:2;max-width:none;max-height:none;margin:0;border-radius:0;image-rendering:crisp-edges;image-rendering:pixelated}
.npc-bubble{position:relative;flex:1 1 auto;min-width:0;margin-bottom:20px;padding:24px 22px 16px;background:var(--npc-bubble);border:2px solid var(--npc-line);border-radius:18px;box-shadow:0 4px 0 var(--npc-drop)}
.npc-bubble::before{content:'';position:absolute;left:-10px;bottom:24px;width:16px;height:16px;background:var(--npc-bubble);border-left:2px solid var(--npc-line);border-bottom:2px solid var(--npc-line);border-bottom-left-radius:3px;transform:rotate(45deg)}
.npc-say .npc-name{position:absolute;top:-15px;left:18px;display:inline-flex;align-items:center;gap:7px;margin:0;padding:3px 12px;border-radius:999px;background:var(--npc-tag-bg);color:var(--npc-tag-ink);font-size:.76rem;line-height:1.5;letter-spacing:-.01em;white-space:nowrap}
.npc-name strong{font-weight:800}
.npc-name span{font-weight:600;color:var(--npc-tag-role)}
.npc-name span::before{content:'·';margin-right:7px}
.npc-say .npc-line{margin:0;font-size:.92rem;font-weight:500;line-height:1.85;color:var(--ink);word-break:keep-all;overflow-wrap:anywhere}
.npc-line strong{color:var(--accent-strong);font-weight:800}
.npc-line a{color:var(--accent-strong);text-decoration:underline;text-underline-offset:3px}
.home-greeting{padding-top:34px}
.page-npc{padding-top:32px}
.guide-main>.npc-say{margin-bottom:6px}
.guide-step .npc-say{margin:26px 0 8px}
.catalog-section>.npc-say{margin-bottom:26px}
.article-prose .npc-say{margin:34px 0 30px}

/* 운영자 글 관리 */
.admin-confirm{width:min(460px,calc(100% - 32px));padding:28px;border:1px solid var(--line);border-radius:10px;background:var(--paper);color:var(--ink);box-shadow:0 20px 70px #0003}
.admin-confirm::backdrop{background:#102c2480}
.admin-confirm h2{font-size:1.25rem;margin-bottom:16px}
.admin-confirm p{font-size:.9rem}
.admin-confirm>div{display:flex;justify-content:flex-end;gap:10px;margin-top:24px}
.admin-intro h1{font-size:2.6rem}
.login-form{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.login-form input{min-width:240px;padding:12px;border:1px solid var(--line-strong);border-radius:6px;background:var(--input)}
.admin-root{padding-block:30px 75px}
.admin-bar{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:22px;font-size:.82rem}
.admin-bar>div{display:flex;align-items:center;gap:12px}
.admin-bar .button{font-size:.76rem;min-height:36px;padding:8px 14px}
.quiet-link{border:0;background:none;color:var(--muted);font-size:.78rem;padding:8px;cursor:pointer}
.quiet-link:hover{text-decoration:underline}
.danger{color:var(--danger)}
.admin-columns{display:grid;grid-template-columns:275px minmax(0,1fr);gap:23px;align-items:start}
.post-sidebar{border:1px solid var(--line);background:var(--paper);border-radius:8px;overflow:hidden}
.admin-filters{display:grid;gap:9px;padding:16px;border-bottom:1px solid var(--line)}
.admin-filters input,.admin-filters select{width:100%;padding:9px 10px;border:1px solid var(--line);border-radius:5px;font-size:.8rem;background:var(--input)}
.admin-post{display:block;text-align:left;width:100%;border:0;border-bottom:1px solid var(--line);background:transparent;padding:17px}
.admin-post:hover,.admin-post.active{background:var(--tint)}
.admin-post strong{display:block;font-size:.84rem;margin:8px 0;line-height:1.6;overflow-wrap:anywhere}
.admin-post small{font-size:.75rem;color:var(--muted)}
.admin-post .tag{font-size:.75rem}
.admin-pagination{display:flex;align-items:center;justify-content:space-between;padding:12px;font-size:.75rem}
.admin-pagination button{background:none;border:0;font-size:.75rem}
.editor-panel{min-width:0;border:1px solid var(--line);border-radius:8px;background:var(--paper);padding:28px}
.editor-panel .empty-state{border:0;padding:70px 10px}
.editor-empty-icon{font-size:3rem;color:var(--faint)}
.editor-heading{display:flex;gap:12px;align-items:center;margin-bottom:24px}
.editor-heading>span:not(.tag){font-size:.75rem;color:var(--muted)}
.editor-heading>a{margin-left:auto;font-size:.75rem}
#post-editor>label,#post-editor .editor-grid label,.cover-control>label{display:flex;flex-direction:column;gap:8px;font-size:.78rem;font-weight:700;margin-bottom:19px}
#post-editor input:not([type=checkbox]):not([type=file]),#post-editor select,#post-editor textarea{padding:12px;border:1px solid var(--line-strong);background:var(--input);border-radius:5px;width:100%;font-size:.86rem;min-width:0}
#post-editor textarea{resize:vertical;line-height:1.85}
#post-editor input[name=title]{font-size:1.12rem;font-weight:700}
.editor-grid{display:grid;grid-template-columns:1fr 1fr;gap:17px}
.cover-control{display:grid;grid-template-columns:1fr auto;gap:15px;align-items:center}
.cover-control>label{min-width:0}
.cover-control>img{grid-column:1/-1;max-height:200px;border-radius:6px;margin-bottom:20px}
.upload-button,.format-tools label{cursor:pointer}
.upload-button{border:1px solid var(--line);border-radius:5px;padding:10px;font-size:.76rem!important;margin-top:22px}
.upload-button input,.format-tools input{position:absolute;width:1px;height:1px;opacity:0}
.editor-tabs{display:flex;gap:10px;border-bottom:1px solid var(--line);margin-bottom:15px}
.editor-tabs button{padding:10px 14px;border:0;background:none;font-size:.84rem;color:var(--muted)}
.editor-tabs button.active{border-bottom:2px solid var(--accent);color:var(--ink);font-weight:800}
.format-tools{display:flex;gap:4px;flex-wrap:wrap;background:var(--tint);border:1px solid var(--line-strong);border-bottom:0;border-radius:5px 5px 0 0;padding:5px}
.format-tools button,.format-tools label{padding:6px 10px;font-size:.75rem;background:transparent;border:0;color:var(--accent-strong)}
.format-tools button:hover,.format-tools label:hover{background:var(--tint-2)}
#post-body{border-radius:0 0 5px 5px!important}
.editor-help{font-size:.75rem;color:var(--muted);margin:9px 0 22px}
#preview-pane{min-height:350px;padding:20px;border:1px solid var(--line);margin-bottom:20px}
#post-editor .check-label{flex-direction:row;align-items:center;gap:10px}
.check-label input{accent-color:var(--accent);width:17px;height:17px}
.editor-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:20px}
.editor-actions .button{font-size:.82rem;padding:10px 15px}
#editor-message{margin-top:15px;font-size:.8rem;min-height:1.5em}
#editor-message.error{color:var(--danger)}
#editor-message.success{color:var(--success)}

/* 반응형 */
@media (max-width:1180px){
  .header-inner{gap:18px}
  .nav-top{padding:0 11px}
  .nav-top[aria-current=page]::after{left:11px;right:11px}
  .quick-menu{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:960px){
  .wrap{width:calc(100% - 40px)}
  .menu-toggle{display:grid;place-items:center}
  .header-tools{margin-left:auto}
  .site-nav{display:none;position:absolute;left:0;right:0;top:100%;margin:0;background:var(--paper);padding:8px 20px 20px;border-bottom:1px solid var(--line);box-shadow:0 15px 24px var(--shadow);flex-direction:column;gap:0;max-height:calc(100vh - 70px);overflow-y:auto}
  .site-nav.is-open{display:flex}
  .nav-cta{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:12px 0 14px;border-bottom:1px solid var(--line)}
  .nav-cta .button{min-height:48px;padding:10px 12px}
  .site-nav>.nav-group:last-child{display:none}
  .nav-menu a{display:flex;align-items:center;min-height:44px}
  .nav-group{flex-direction:column;border-bottom:1px solid var(--line)}
  .nav-top{padding:14px 4px;font-size:.92rem}
  .nav-top[aria-current=page]::after{display:none}
  .nav-menu{position:static;transform:none;display:grid;grid-template-columns:1fr 1fr;box-shadow:none;border:0;padding:0 0 10px;min-width:0;background:none}
  .home-start{grid-template-columns:minmax(0,1fr);gap:12px}
  .home-boards{grid-template-columns:minmax(0,1fr);gap:28px}
  .home-news,.news-results{grid-template-columns:repeat(2,1fr)}
  .field-pets{grid-template-columns:repeat(2,1fr)}
  .pet-grid{grid-template-columns:repeat(3,1fr)}
  .guide-layout{grid-template-columns:160px minmax(0,1fr);gap:20px}
  .detail-grid,.faq-layout,.admin-columns{grid-template-columns:1fr}
  .post-sidebar{max-height:370px;overflow:auto}
  .editor-panel{padding:22px}
  .footer-grid{flex-direction:column}
  .policy-layout{grid-template-columns:1fr;gap:20px}
  .policy-tabs{position:static;flex-direction:row;overflow-x:auto}
  .policy-tabs a{white-space:nowrap}
  .policy-tabs a[aria-current=page]{box-shadow:inset 0 -3px 0 var(--accent)}
}
@media (max-width:640px){
  .wrap{width:calc(100% - 32px)}
  .policy-section .table-scroll{border:0;border-radius:0;overflow:visible}
  .policy-table{min-width:0}
  .policy-table thead{display:none}
  .policy-table,.policy-table tbody,.policy-table tr,.policy-table th,.policy-table td{display:block}
  .policy-table tr{margin-bottom:10px;border:1px solid var(--line);border-radius:8px;overflow:hidden}
  .policy-table tbody th{padding:10px 12px;background:var(--tint);color:var(--accent-strong);white-space:normal}
  .policy-table td{display:flex;gap:12px;padding:8px 12px;border-bottom:1px solid var(--line)}
  .policy-table td::before{content:attr(data-label);flex:0 0 76px;color:var(--faint);font-size:.76rem;font-weight:700}
  .policy-table td.short,.policy-table td[class^="mark-"]{white-space:normal}
  .policy-table td.empty{display:none}
  .header-inner{min-height:64px;gap:10px}
  .brand img{width:36px;height:36px}
  .brand strong{font-size:.98rem}
  .brand small{display:none}
  .play-button{display:none}
  .header-tools{gap:8px}
  .theme-toggle{width:36px;height:36px}
  /* 휴대폰 배너: 글을 아래쪽에 두고 그림은 가운데를 보인다. */
  .home-top{padding-top:16px}
  .home-banner{height:220px;border-radius:14px}
  .banner-brand .banner-art{width:100%;object-position:38% 55%}
  .banner-slide::after{background:linear-gradient(#0b1f1700 30%,#0b1f17cc)}
  .banner-copy{left:18px;right:18px;top:auto;bottom:18px;transform:none;width:auto}
  .banner-logo{max-width:230px}
  .banner-tagline{margin-top:6px;font-size:1rem}
  .banner-chip,.banner-summary{display:none}
  .banner-title{font-size:1.25rem}
  .banner-ctrl{right:12px;bottom:auto;top:12px}
  .start-play strong{font-size:1.4rem}
  .home-band{margin-top:40px;padding:36px 0 44px}
  .launch-ribbon .wrap{min-height:44px;gap:8px;font-size:.75rem}
  .launch-ribbon strong{flex-shrink:0}
  .launch-ribbon .ribbon-long{display:none}
  .launch-ribbon .ribbon-short{display:inline;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .launch-ribbon a{display:inline-flex;align-items:center;justify-content:flex-end;min-height:44px;min-width:48px}
  /* 휴대폰: 최신 글이 있으면 CBT 짧은 문구를 숨기고 그 자리를 글 제목에 준다. */
  .launch-ribbon .wrap:has(.ribbon-news)>span.ribbon-short{display:none}
  .launch-ribbon .ribbon-news{max-width:none;flex:1;justify-content:flex-start;gap:6px}
  .launch-ribbon .ribbon-news .tag{padding:1px 6px;font-size:.7rem}
  .mobile-play{position:fixed;z-index:45;left:16px;right:16px;bottom:calc(12px + env(safe-area-inset-bottom,0px));display:flex;align-items:center;justify-content:center;height:52px;border-radius:10px;background:var(--gold);color:var(--on-gold);font-size:1rem;font-weight:900;box-shadow:0 8px 24px #0000004d;transition:transform .25s,opacity .25s}
  .mobile-play.is-hidden{transform:translateY(140%);opacity:0;visibility:hidden}
  .site-footer{padding-bottom:calc(88px + env(safe-area-inset-bottom,0px))}
  .quick-menu{grid-template-columns:repeat(2,1fr);gap:10px;padding-top:24px}
  .quick-item{padding:14px;column-gap:10px}
  .quick-icon{width:36px;height:36px}
  .section{padding-top:48px}
  .section-heading{align-items:center;gap:13px;margin-bottom:18px}
  .section-heading h2{font-size:1.6rem}
  .section-heading>p{display:none}
  .home-news,.news-results{grid-template-columns:1fr;gap:16px}
  .news-cover{height:180px}
  .journey-grid{grid-template-columns:1fr}
  .journey-card{padding:25px}
  .field-section{margin-top:48px;padding:42px 0}
  .field-pets{gap:10px}
  .field-pet{padding:14px}
  .field-pet img{height:85px;width:100%;margin:10px auto}
  .community-strip{margin-top:48px;padding:34px 0}
  .community-strip .wrap{flex-direction:column;align-items:start;gap:23px}
  .community-strip h2{font-size:1.5rem}
  .footer-cols{flex-wrap:wrap;gap:28px 40px}
  .footer-note{flex-direction:column;gap:8px}
  .page-intro{padding-block:38px 26px}
  .page-intro h1{font-size:2.2rem}
  .lede{font-size:.84rem}
  .guide-layout{display:block;padding-top:20px}
  .guide-side{position:static;flex-direction:row;gap:15px;overflow-x:auto;margin-bottom:20px;padding:12px 16px}
  .guide-side strong{display:none}
  .guide-side a{white-space:nowrap;padding:4px 0;font-size:.75rem}
  .guide-step{padding:24px}
  .guide-step h2{font-size:1.4rem}
  .catalog-toolbar{flex-wrap:wrap;gap:8px}
  .search-field{flex-basis:100%}
  .filter-field{flex:1;justify-content:space-between}
  .sort-field{flex-basis:100%}
  .pet-stat-grid>span{padding:3px 6px}
  .pet-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .pet-card{padding:15px;min-width:0}
  .pet-card-symbol{height:95px;margin:12px 0}
  .pet-card-symbol img{height:90px}
  .grade-strip{grid-template-columns:repeat(2,1fr)}
  .grade-strip-three{grid-template-columns:1fr}
  .detail-panel{padding:20px}
  .news-toolbar{flex-direction:column;align-items:stretch}
  .news-search input{flex:1;width:auto}
  .change-log li{grid-template-columns:1fr;gap:2px}
  .odds-panel .stat-table{font-size:.75rem}
  .odds-panel .stat-table th,.odds-panel .stat-table td{padding:11px 6px}
  .gear-pool summary{grid-template-columns:auto minmax(0,1fr) 14px;grid-template-areas:"level count mark" "parts parts parts";padding:12px}
  .gear-pool-count{justify-self:end}
  .gear-pool .table-scroll{padding:0 12px 4px}
  .gear-pool .stat-table,.gear-pool .stat-table tbody{display:block}
  .gear-pool .stat-table thead{display:none}
  .gear-pool .stat-table tr{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"grade rate" "opts opts";gap:8px;padding:12px 0;border-top:1px solid var(--line)}
  .gear-pool .stat-table tbody th,.gear-pool .stat-table td{padding:0;border:0}
  .gear-pool .stat-table tbody th{grid-area:grade}
  .gear-pool .stat-table tbody th small{display:inline;margin-left:4px}
  .gear-pool .stat-table td:nth-child(2){grid-area:opts}
  .gear-pool .stat-table td:nth-child(3){grid-area:rate}
  .gear-chips li{font-size:.75rem;padding:2px 7px}
  .editor-grid{grid-template-columns:1fr}
  .npc-say{gap:10px}
  .npc-figure{min-width:56px;padding-bottom:3px}
  .npc-figure::before{width:52px;height:10px}
  .npc-say .npc-figure img{zoom:1}
  .npc-bubble{padding:22px 15px 13px;border-radius:14px;margin-bottom:14px}
  .npc-bubble::before{bottom:16px;width:12px;height:12px;left:-8px}
  .npc-say .npc-name{left:12px;font-size:.75rem;padding:2px 10px}
  .npc-say .npc-line{font-size:.86rem;line-height:1.75}
  .home-greeting{padding-top:24px}
  .page-npc{padding-top:24px}
  /* 터치 영역 ≥44px: 언어·테마·메뉴 버튼, 글자 링크, 푸터 링크 */
  .theme-toggle,.menu-toggle{width:44px;height:44px}
  .language-switch{padding:0}
  .lang-option{min-width:44px;height:44px}
  /* 언어 칸 세 개(KO·EN·繁中)를 머리글에 남기려고 화면 모드 버튼은 메뉴 맨 위 줄로 옮긴다(2026-10-30 — 360px에서 메뉴 버튼이 밀려났다). */
  .header-tools>.theme-toggle{display:none}
  .nav-cta .nav-theme{display:flex;grid-column:1/-1;align-items:center;justify-content:center;gap:8px;width:auto;height:44px;border-radius:8px;font-size:.9rem;font-weight:700;color:var(--ink)}
  .inline-link,.text-link,.footer-discord{display:inline-flex;align-items:center;min-height:44px}
  .footer-col{gap:0}
  .footer-col a{display:flex;align-items:center;min-height:44px}
  .footer-note a{display:inline-flex;align-items:center;min-height:44px}
  .news-tabs a,.pagination a{display:inline-flex;align-items:center;min-height:44px}
  .guide-side a{display:inline-flex;align-items:center;min-height:44px}
  /* 펫 도감: 첫 카드를 첫 화면에 올린다. 상인 말풍선은 숨기고 필터는 한 줄 세 칸으로 묶는다. */
  .catalog-section>.npc-say{display:none}
  .catalog-section{padding-top:18px}
  .catalog-toolbar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .search-field{grid-column:1/-1}
  .search-field input{min-height:46px}
  .filter-field,.sort-field{flex-direction:column;align-items:stretch;gap:0;padding:4px 10px 2px;min-width:0}
  .filter-field span{font-size:.75rem;line-height:1.4}
  .filter-field select{min-height:30px;width:100%;padding:0}
  .catalog-count{margin:14px 0}
  .catalog-note{margin-left:0;flex-basis:100%}
  /* 펫 상세 제목 영역은 위아래로 */
  .pet-intro{grid-template-columns:1fr}
  .pet-illustration{justify-self:center;width:100%}
  .pet-illustration img{width:240px;height:180px}
}