/*=============================================================================+
| 세모 포탈 (portal.semoct.com) — Claude Design 시안 기준
|   바탕 #F2F4F1 · 글자 #1B2421 · 강조 #1F6F5C(녹청) · 보조 #C98A1B(호박)
+=============================================================================*/
:root {
	--pt-bg: #F2F4F1;
	--pt-panel: #FFFFFF;
	--pt-ink: #1B2421;
	--pt-body: #46554F;
	--pt-muted: #5A6A63;
	--pt-line: #D9E0DB;
	--pt-line2: #E8EDEA;
	--pt-field: #FAFBFA;
	--pt-fieldLine: #C5CFC9;
	--pt-accent: #1F6F5C;
	--pt-accentDark: #154D40;
	--pt-accentSoft: #E3EEE9;
	--pt-amber: #C98A1B;
	--pt-term: #1B2421;
	--pt-termText: #D6E4DD;
	--pt-termMuted: #8FA89C;
	--pt-lv1: #2E7A4F;
	--pt-lv2: #7A6A0E;
	--pt-lv3: #B4562A;
	--pt-lv4: #A63A50;
	--pt-f: "IBM Plex Sans", "IBM Plex Sans KR", "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
	--pt-mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
	color-scheme: light;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; padding: 0; }
body { background: var(--pt-bg); color: var(--pt-ink); font-family: var(--pt-f); font-size: 15px; line-height: 1.6; min-height: 100vh; display: flex; flex-direction: column; }
/* 공용 triHub.css 의 body { font-family:'NanumSquare' !important } 를 이긴다(명시도 html body > body).
   그 규칙 때문에 디자인 글꼴이 안 먹고, 나눔스퀘어가 깔린 PC 는 '궨' 같은 글자가 빈칸, 없는 PC 는 기본 글꼴로 보였다 */
html body { font-family: var(--pt-f) !important; }
input, select, button, textarea { font-family: inherit; }
a { color: var(--pt-accent); }
a:hover { color: var(--pt-accentDark); }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--pt-accent); outline-offset: 2px; }
img { max-width: 100%; }
.ptMono { font-family: var(--pt-mono); }
.ptWrap { max-width: 1200px; width: 100%; margin: 0 auto; padding-inline: 24px; }

.ptSkip { position: absolute; left: -9999px; top: 0; background: var(--pt-ink); color: #FFFFFF; padding: 8px 12px; z-index: 100; }
.ptSkip:focus { left: 8px; top: 8px; }

/* header / gnb */
#ptHeader { background: var(--pt-panel); border-bottom: 1px solid var(--pt-line); position: sticky; top: 0; z-index: 20; }
.ptHeaderIn { height: 64px; display: flex; align-items: center; gap: 28px; position: relative; }
.ptLogo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--pt-ink); flex-shrink: 0; white-space: nowrap; }
.ptLogo span { font-size: 19px; font-weight: 700; letter-spacing: -0.02em; }
.ptLogo:hover { color: var(--pt-ink); }
.ptGnb { display: flex; gap: 2px; flex: 1; min-width: 0; }
.ptGnbItem { padding: 9px 8px; border-radius: 6px; text-decoration: none; color: var(--pt-ink); font-size: 14px; }
.ptGnbItem strong { font-weight: 500; }
.ptGnbItem span { display: none; }
.ptGnbItem:hover { background: var(--pt-bg); color: var(--pt-ink); }
.ptGnbItem.on { background: var(--pt-accentSoft); color: var(--pt-accent); }
.ptGnbItem.on strong { font-weight: 700; }
/* 묶음 메뉴(펼침) */
.ptGnbGroup { position: relative; }
.ptGnbToggle { border: 0; background: transparent; cursor: pointer; font: inherit; display: inline-flex; align-items: center; gap: 4px; }
.ptGnbToggle strong::after { content: " ▾"; font-size: 11px; color: var(--pt-muted); }
.ptGnbGroup.open .ptGnbToggle { background: var(--pt-bg); }
.ptGnbSub { display: none; position: absolute; top: calc(100% + 6px); left: 0; min-width: 280px; background: var(--pt-panel); border: 1px solid var(--pt-line); border-radius: 10px; box-shadow: 0 10px 28px rgba(27, 36, 33, 0.14); padding: 6px; z-index: 40; }
.ptGnbGroup.open .ptGnbSub { display: block; }
.ptGnbSubItem { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 8px; text-decoration: none; color: var(--pt-ink); }
.ptGnbSubItem strong { font-size: 15px; font-weight: 700; }
.ptGnbSubItem span { font-size: 12px; color: var(--pt-muted); }
.ptGnbSubItem:hover { background: var(--pt-bg); color: var(--pt-ink); }
.ptGnbSubItem.on { background: var(--pt-accentSoft); color: var(--pt-accent); }
/* 게임 지도 묶음: 하위가 많아 PC 는 3칸 격자 */
.ptGnbSubWide { width: min(780px, calc(100vw - 32px)); grid-template-columns: repeat(3, 1fr); gap: 2px; }
.ptGnbGroup.open .ptGnbSubWide { display: grid; }
.ptMenuBtn { display: none; width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer; align-items: center; justify-content: center; color: var(--pt-ink); margin-left: auto; }
/* 좁은 폭(900 이하)은 햄버거 메뉴로 — 게임 지도를 한 메뉴로 묶어(10-27) 1280 → 900 */
.ptGnbItem { white-space: nowrap; }
@media (max-width: 900px) {
	.ptHeaderIn { gap: 12px; }
	.ptMenuBtn { display: flex; }
	.ptGnb { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 0; background: var(--pt-panel); border-bottom: 1px solid var(--pt-line); box-shadow: 0 8px 24px rgba(27, 36, 33, 0.15); padding: 8px 0; max-height: calc(100vh - 64px); overflow-y: auto; }
	.ptGnb.open { display: flex; }
	.ptGnbItem { display: flex; flex-direction: column; padding: 14px 20px; border-radius: 0; }
	.ptGnbItem strong { font-size: 16px; font-weight: 700; }
	.ptGnbItem span { display: block; font-size: 13px; color: var(--pt-muted); }
	.ptGnbToggle { width: 100%; text-align: left; }
	.ptGnbToggle strong::after { content: ""; }
	.ptGnbSub { display: block; position: static; box-shadow: none; border: 0; border-radius: 0; padding: 0 0 6px 12px; min-width: 0; }
	.ptGnbSubItem { padding: 10px 20px; }
	.ptGnbSubWide, .ptGnbGroup.open .ptGnbSubWide { display: grid; width: auto; grid-template-columns: repeat(2, 1fr); }
}

/* main / footer */
#ptMain { flex: 1; }
#ptFooter { border-top: 1px solid var(--pt-line); background: var(--pt-panel); }
.ptFooterIn { padding-block: 24px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--pt-muted); }

/* page head */
.ptPage { padding-block: 32px 48px; display: flex; flex-direction: column; gap: 20px; }
.ptCrumb { margin: 0; font-size: 13px; color: var(--pt-muted); }
.ptTitle { margin: 0; font-size: 30px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.3; }
.ptLead { margin: 0; font-size: 15px; color: var(--pt-body); line-height: 1.7; }
.ptHead { display: flex; flex-direction: column; gap: 6px; }

/* card / form */
.ptCard { background: var(--pt-panel); border: 1px solid var(--pt-line); border-radius: 10px; padding: 14px; min-width: 0; }
.ptCardHead { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.ptCardHead h2 { margin: 0; font-size: 16px; font-weight: 700; }
.ptCardHead small { font-size: 12px; color: var(--pt-muted); }
.ptField { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--pt-muted); }
.ptField input, .ptField select { height: 40px; border: 1px solid var(--pt-fieldLine); border-radius: 6px; padding: 0 10px; font-size: 14px; background: var(--pt-field); color: var(--pt-ink); min-width: 0; }
.ptCheck { height: 40px; display: inline-flex; align-items: center; gap: 8px; padding: 0 12px; border: 1px solid var(--pt-fieldLine); border-radius: 6px; background: var(--pt-field); font-size: 14px; color: var(--pt-ink); cursor: pointer; }
.ptCheck input { width: 18px; height: 18px; margin: 0; accent-color: var(--pt-accent); }
.ptBtn { height: 40px; border: 1px solid var(--pt-fieldLine); border-radius: 6px; padding: 0 14px; font-size: 14px; background: var(--pt-panel); color: var(--pt-ink); cursor: pointer; }
.ptBtn:hover { border-color: var(--pt-accent); }
.ptBtnMain { height: 48px; border: 0; border-radius: 8px; padding: 0 24px; font-size: 15px; font-weight: 700; background: var(--pt-accent); color: #FFFFFF; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.ptBtnMain:hover { background: var(--pt-accentDark); color: #FFFFFF; }
.ptBtnMain:disabled { opacity: 0.6; cursor: wait; }
.ptBtnDark { background: var(--pt-ink); }
.ptBtnLine { background: transparent; color: var(--pt-ink); border: 1px solid var(--pt-ink); }
.ptBtnLine:hover { background: var(--pt-ink); color: #FFFFFF; }

/* 오류 제보 */
.ptReportLink { border: 0; background: transparent; color: var(--pt-muted); font-size: 13px; text-decoration: underline; cursor: pointer; padding: 0; }
.ptReportLink:hover { color: var(--pt-accent); }
.ptReportFab { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 30; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; border: 1px solid var(--pt-line); border-radius: 99px; background: var(--pt-panel); color: var(--pt-body); font-size: 13px; font-weight: 500; box-shadow: 0 4px 14px rgba(27, 36, 33, 0.14); cursor: pointer; }
.ptReportFab:hover { border-color: var(--pt-accent); color: var(--pt-accent); }
.ptReport { position: fixed; inset: 0; z-index: 50; background: rgba(15, 22, 19, 0.5); display: flex; align-items: center; justify-content: center; padding: 16px; }
.ptReportBox { width: 100%; max-width: 520px; max-height: calc(100vh - 32px); overflow: auto; background: var(--pt-panel); border-radius: 12px; padding: 20px; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.3); }
.ptReportHead { display: flex; justify-content: space-between; align-items: center; }
.ptReportHead h2 { margin: 0; font-size: 18px; }
.ptReportClose { width: 40px; height: 40px; border: 0; background: transparent; font-size: 26px; line-height: 1; color: var(--pt-muted); cursor: pointer; }
.ptReportLast { margin: 0; padding: 8px 12px; border-radius: 8px; background: var(--pt-bg); border: 1px dashed var(--pt-fieldLine); font-size: 12px; color: var(--pt-body); word-break: break-all; }
.ptReportLead { margin: 0; font-size: 14px; color: var(--pt-body); }
.ptReportOpts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ptReportOpt { min-height: 44px; padding: 8px 12px; border: 1px solid var(--pt-fieldLine); border-radius: 8px; background: var(--pt-field); color: var(--pt-ink); font-size: 14px; text-align: left; cursor: pointer; }
.ptReportOpt:hover { border-color: var(--pt-accent); }
.ptReportOpt.on { border-color: var(--pt-accent); background: var(--pt-accentSoft); color: var(--pt-accent); font-weight: 700; }
.ptReportText { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 500; }
.ptReportText small { color: var(--pt-muted); font-weight: 400; }
.ptReportText textarea { border: 1px solid var(--pt-fieldLine); border-radius: 8px; padding: 10px 12px; font-size: 14px; background: var(--pt-field); color: var(--pt-ink); resize: vertical; min-height: 90px; }
.ptReportHp { position: absolute; left: -9999px; width: 1px; height: 1px; }
.ptReportMsg { font-size: 13px; min-height: 1.2em; }
.ptReportMsg.err { color: var(--pt-lv4); }
.ptReportMsg.ok { color: var(--pt-lv1); font-weight: 700; }
.ptReportBtns { display: flex; justify-content: flex-end; gap: 8px; }
.ptReportBtns .ptBtn { height: 44px; padding: 0 18px; }
body.ptNoScroll { overflow: hidden; }
@media (max-width: 760px) { .ptReportOpts { grid-template-columns: minmax(0, 1fr); } .ptReportFab { right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); } }

/* home */
.ptHero { padding-block: 56px 32px; display: flex; flex-direction: column; gap: 12px; }
.ptEyebrow { margin: 0; font-family: var(--pt-mono); font-size: 13px; letter-spacing: 0.08em; color: var(--pt-muted); }
.ptHero h1 { margin: 0; font-size: 40px; line-height: 1.25; font-weight: 700; letter-spacing: -0.02em; text-wrap: balance; }
.ptHero p { margin: 0; font-size: 17px; line-height: 1.7; color: var(--pt-body); max-width: 640px; }
.ptHomeGrid { padding-bottom: 48px; display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 24px; }
.ptHomeCard { background: var(--pt-panel); border: 1px solid var(--pt-line); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; }
/* 카드 전체 링크: 제목 링크를 카드 크기로 늘림(입력 폼은 그 위에 올려 따로 동작) */
.ptHomeCard { position: relative; transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s; }
.ptHomeCard:hover { border-color: var(--pt-accent); box-shadow: 0 6px 20px rgba(27, 36, 33, 0.10); transform: translateY(-2px); }
.ptCardLink { color: inherit; text-decoration: none; }
.ptCardLink:hover { color: inherit; }
.ptCardLink::after { content: ""; position: absolute; inset: 0; border-radius: 12px; z-index: 1; }
.ptCardLink:focus-visible { outline: none; }
.ptCardLink:focus-visible::after { outline: 2px solid var(--pt-accent); outline-offset: 2px; }
.ptHomeCard .ptQuick { position: relative; z-index: 2; }
@media (prefers-reduced-motion: reduce) { .ptHomeCard { transition: none; } .ptHomeCard:hover { transform: none; } }
.ptHomeCard .ptHomeVisual { height: 200px; background: #2F4A3C url(/dsn/zelda/map_thumb.jpg?v=20261027d) center / cover no-repeat; position: relative; display: flex; align-items: flex-end; padding: 20px; }
.ptHomeCard .ptHomeBody { padding: 24px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.ptHomeCard h2 { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -0.01em; }
.ptHomeCard p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--pt-body); }
.ptHomeCard .ptKicker { font-size: 13px; color: var(--pt-muted); font-weight: 500; }
.ptPill { background: #FFFFFF; color: #2F4A3C; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 99px; }
.ptPillAmber { background: var(--pt-amber); color: var(--pt-ink); }
.ptStats { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ptStats li { background: var(--pt-bg); border-radius: 8px; padding: 12px; }
.ptStats strong { display: block; font-family: var(--pt-mono); font-size: 20px; }
.ptStats span { font-size: 12px; color: var(--pt-muted); }
.ptQuick { display: flex; flex-direction: column; gap: 10px; }
.ptQuick label { font-size: 13px; font-weight: 500; }
.ptQuickRow { display: flex; gap: 8px; flex-wrap: wrap; }
.ptQuickRow input { flex: 1 1 200px; min-width: 0; height: 46px; border: 1px solid var(--pt-fieldLine); border-radius: 8px; padding: 0 14px; font-family: var(--pt-mono); font-size: 15px; background: var(--pt-field); }
.ptQuickRow .ptBtnMain { height: 46px; padding: 0 18px; }

/* terminal */
.ptTerm { background: var(--pt-term); color: var(--pt-termText); border-radius: 8px; padding: 16px; font-family: var(--pt-mono); font-size: 13px; line-height: 1.8; margin: 0; white-space: pre-wrap; word-break: break-all; overflow-x: auto; }
.ptTerm .dim { color: var(--pt-termMuted); }
.ptTerm .hi { color: #E5B65C; }

/* util */
.ptTabs { display: flex; gap: 4px; border-bottom: 1px solid var(--pt-line); }
.ptTab { height: 46px; padding: 0 20px; border: 0; border-bottom: 3px solid transparent; background: transparent; font-size: 15px; font-weight: 500; color: var(--pt-body); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; }
.ptTab.on { border-bottom-color: var(--pt-accent); color: var(--pt-accent); font-weight: 700; }
.ptUtilForm { background: var(--pt-panel); border: 1px solid var(--pt-line); border-radius: 10px; padding: 18px; display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.ptUtilForm .ptField { font-size: 13px; font-weight: 500; color: var(--pt-ink); gap: 6px; }
.ptUtilForm .ptField input, .ptUtilForm .ptField select { height: 48px; border-radius: 8px; font-size: 15px; }
.ptUtilForm .ptTarget { flex: 1 1 320px; }
.ptUtilForm .ptTarget input { font-family: var(--pt-mono); font-size: 16px; padding: 0 14px; }
.ptSplit { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.ptSplit > .ptSide { flex: 1 1 360px; min-width: 0; }
.ptSplit > .ptMainCol { flex: 2 1 520px; min-width: 0; }
.ptDl { margin: 0; display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 10px 12px; font-size: 14px; }
.ptDl dt { color: var(--pt-muted); }
.ptDl dd { margin: 0; word-break: break-all; }
.ptKpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.ptKpi { background: var(--pt-panel); border: 1px solid var(--pt-line); border-radius: 10px; padding: 16px; }
.ptKpi span { font-size: 12px; color: var(--pt-muted); }
.ptKpi strong { display: block; font-family: var(--pt-mono); font-size: 26px; line-height: 1.3; word-break: break-all; }
.ptKpi strong small { font-size: 14px; color: var(--pt-muted); }
.ptNote { margin: 0; font-size: 13px; color: var(--pt-muted); line-height: 1.7; }
.ptErr { background: #FBEDEE; border: 1px solid #E7B8C0; color: #8A2234; border-radius: 8px; padding: 12px 14px; font-size: 14px; }
.ptTermHead { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 10px; }
.ptTermHead h2 { margin: 0; font-size: 14px; font-weight: 700; color: var(--pt-termText); }
.ptTermBox { background: var(--pt-term); border-radius: 10px; padding: 18px; }
.ptTermBox .ptTerm { padding: 0; }
.ptCopy { height: 36px; border: 1px solid #4A5C55; border-radius: 6px; padding: 0 12px; font-size: 13px; background: transparent; color: var(--pt-termText); cursor: pointer; }

/* zelda */
/* 필터: 검색·세트·조건·최소 공격/방어를 한 줄 격자로 / 아래 적용 상태·DLC·초기화 */
.zdFilter { display: flex; flex-direction: column; gap: 12px; padding: 16px 18px; }
.zdFRow { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.4fr) repeat(5, minmax(0, 1fr)) minmax(0, 0.8fr); gap: 10px; align-items: end; }
.zdFilter .ptField { gap: 6px; }
.zdFilter .zdFLabel { font-size: 12px; font-weight: 600; color: var(--pt-muted); letter-spacing: -0.01em; }
.zdFilter .ptField input, .zdFilter .ptField select { width: 100%; height: 42px; border-radius: 8px; font-size: 14px; padding: 0 8px; transition: border-color .15s, background-color .15s, box-shadow .15s; }
.zdFilter .ptField input:focus, .zdFilter .ptField select:focus { outline: none; border-color: var(--pt-accent); box-shadow: 0 0 0 3px var(--pt-accentSoft); }
.zdFilter .zdQ input { padding-left: 34px; background: var(--pt-field) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%237A847F' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E") no-repeat 10px center; }
/* 고른 조건 강조 */
.zdFilter .ptField.on .zdFLabel { color: var(--pt-accent); }
.zdFilter .ptField.on input, .zdFilter .ptField.on select { border-color: var(--pt-accent); background-color: var(--pt-accentSoft); }
.zdFFoot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 12px; border-top: 1px dashed var(--pt-line); }
.zdFState { font-size: 13px; color: var(--pt-muted); }
.zdFState b { display: inline-block; min-width: 22px; padding: 1px 8px; margin-right: 4px; border-radius: 99px; background: var(--pt-accent); color: #fff; font-size: 12px; text-align: center; }
.zdFActs { display: inline-flex; gap: 8px; align-items: center; }
.zdFilter .ptCheck { height: 38px; border-radius: 99px; padding: 0 14px; }
.zdFilter .ptCheck:has(input:checked) { border-color: var(--pt-accent); background: var(--pt-accentSoft); color: var(--pt-accent); font-weight: 600; }
.zdFReset { height: 38px; border-radius: 99px; padding: 0 16px; }
.zdFReset:disabled { opacity: .45; cursor: default; }
@media (max-width: 1100px) {
	.zdFRow { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.zdFRow .zdQ { grid-column: span 2; }
	.zdFRow .ptField:nth-child(2) { grid-column: span 2; }
}
.zdTwo { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.zdTwo > .zdMapCol { flex: 999 1 560px; min-width: 0; }
.zdTwo > .zdSumCol { flex: 1 1 360px; min-width: 0; }
.zdMapBox { position: relative; }
#eowMap { width: 100%; aspect-ratio: 3600 / 2442; display: block; border-radius: 8px; background: #5A4A2E; cursor: crosshair; touch-action: none; }
.zdTable .eowChk { width: 18px; height: 18px; accent-color: var(--pt-accent); margin: 0; cursor: pointer; }
#zdMap { width: 100%; aspect-ratio: 10 / 8; display: block; border-radius: 8px; background: #3D5544; cursor: crosshair; touch-action: none; }
.zdZoom { position: absolute; top: 10px; right: 10px; display: flex; flex-direction: column; gap: 6px; }
.zdZoom button { width: 44px; height: 44px; border-radius: 8px; border: 1px solid var(--pt-line); background: var(--pt-panel); font-size: 18px; color: var(--pt-ink); cursor: pointer; }
.zdZoom button.txt { font-size: 12px; }
.zdLegend { margin: 10px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 12px; color: var(--pt-body); }
.zdLegend li { display: flex; align-items: center; gap: 6px; }
.zdLegend i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.zdLegend .zdLegendHead { color: var(--pt-muted); font-size: 12px; margin-right: 2px; }
.zdLegend label { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 0 10px 0 8px; border: 1px solid var(--pt-fieldLine); border-radius: 99px; background: var(--pt-field); cursor: pointer; font-size: 13px; color: var(--pt-ink); }
.zdLegend label input { width: 16px; height: 16px; margin: 0; accent-color: var(--pt-accent); }
.zdLegend .zdTyAll { height: 36px; font-size: 13px; border-radius: 99px; }
.zdLegend i.chest { border: 2px solid var(--pt-amber); }
.zdLayers { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 10px; font-size: 13px; }
.zdLayers > span { color: var(--pt-muted); font-size: 12px; margin-right: 2px; }
.zdLayers label { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 10px; border: 1px solid var(--pt-fieldLine); border-radius: 99px; background: var(--pt-field); cursor: pointer; }
.zdLayers input { width: 16px; height: 16px; margin: 0; accent-color: var(--pt-accent); }
.zdLayers i.ly { width: 12px; height: 12px; display: inline-block; }
.zdLayers i.korok { background: #9BE15D; border-radius: 50%; border: 1px solid #2E5A12; }
.zdLayers i.village { background: #F4E7C5; border: 2px solid #7A4E1D; border-radius: 2px; }
.zdLayers i.shrine { background: #FF8A3D; border: 1px solid #5A2A0A; transform: rotate(45deg) scale(0.8); }
.zdLayers i.tower { background: #4FC3B0; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.zdBadge { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; background: transparent !important; }
.zdBadge img { width: 20px; height: 20px; filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.8)); }
.zdBadge.chest { width: 14px; height: 14px; border-radius: 3px; background: #F2C14E !important; box-shadow: 0 0 6px #F2C14E; }
.zdLayers img.ly { width: 18px; height: 18px; object-fit: contain; }
.zdLayerTabs { display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }
.zdLayerTab { height: 40px; padding: 0 16px; border: 1px solid var(--pt-fieldLine); border-radius: 99px; background: var(--pt-field); font-size: 14px; font-weight: 500; color: var(--pt-ink); cursor: pointer; }
.zdLayerTab small { color: var(--pt-muted); font-family: var(--pt-mono); font-size: 12px; }
.zdLayerTab.on { background: var(--pt-accent); border-color: var(--pt-accent); color: #FFFFFF; font-weight: 700; }
.zdLayerTab.on small { color: #D6EDE6; }
.zdPop { position: absolute; z-index: 4; pointer-events: none; max-width: 280px; background: rgba(20, 28, 25, 0.95); color: #E8F1ED; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 8px; padding: 9px 11px; font-size: 12px; line-height: 1.55; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35); }
.zdPop strong { display: block; font-size: 14px; color: #FFFFFF; }
.zdPop .en { display: block; font-size: 11px; color: #9FB3AA; margin-bottom: 4px; }
.zdPop .where { color: #C9D8D1; margin-top: 2px; }
.zdPop .zdLv1 { color: #7BE0A2; }
.zdPop .zdLv2 { color: #F0D86A; }
.zdPop .zdLv3 { color: #FFA77A; }
.zdPop .zdLv4 { color: #FF8FA3; }
.zdTip { font-size: 12px; color: var(--pt-muted); margin-top: 6px; min-height: 1.6em; }
.zdScroll { overflow: auto; max-height: 560px; border: 1px solid var(--pt-line2); border-radius: 6px; }
.zdScroll.tall { max-height: 640px; }
.zdTable { width: 100%; border-collapse: collapse; font-size: 13px; }
.zdTable th, .zdTable td { padding: 8px; border-bottom: 1px solid var(--pt-line2); text-align: left; white-space: nowrap; }
.zdTable th { position: sticky; top: 0; background: var(--pt-panel); font-size: 11px; font-weight: 500; color: var(--pt-muted); cursor: pointer; user-select: none; z-index: 1; border-bottom-color: var(--pt-line); }
.zdTable th[data-dir="asc"]::after { content: " ▲"; }
.zdTable th[data-dir="desc"]::after { content: " ▼"; }
.zdTable td.num { font-family: var(--pt-mono); text-align: right; font-variant-numeric: tabular-nums; }
.zdTable td.mono { font-family: var(--pt-mono); font-size: 12px; color: var(--pt-muted); }
.zdTable tbody tr { cursor: pointer; }
.zdTable tbody tr:hover, .zdTable tbody tr.sel { background: var(--pt-accentSoft); }
.zdTable .sub { display: block; font-size: 11px; color: var(--pt-muted); }
.zdTable tr.zdItem .sub { display: inline; line-height: 1.5; }
.zdTable tr.zdItem .sub.kind { color: var(--pt-accent); }
/* 아이템 목록: 아이템 줄 + 펼친 위치 줄 */
.zdTable tr.zdItem td:first-child { position: relative; padding-left: 22px; }
.zdFold { position: absolute; left: 6px; top: 50%; width: 0; height: 0; margin-top: -4px; border-left: 6px solid var(--pt-muted); border-top: 4px solid transparent; border-bottom: 4px solid transparent; transition: transform 0.15s; }
.zdTable tr.zdItem.open .zdFold { transform: rotate(90deg); }
.zdTable tr.zdItem.open td { border-bottom-color: transparent; background: var(--pt-accentSoft); }
.zdTable tr.zdLoc td { white-space: normal; padding: 6px 8px 6px 28px; background: #F7FAF8; font-size: 12px; }
.zdTable tr.zdLoc:hover td, .zdTable tr.zdLoc.sel td { background: #E9F3EE; }
.zdTable tr.zdLoc.sel td { box-shadow: inset 3px 0 0 var(--pt-accent); }
.zdLocLine { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.zdLocLine + .zdLocLine { margin-top: 3px; }
.zdLocLine.place { color: var(--pt-body); }
.zdLocLine .why, .zdLocLine .sub-in { color: var(--pt-muted); font-size: 11px; }
.zdLocLine .mono { font-family: var(--pt-mono); font-size: 11px; color: var(--pt-muted); }
.zdDot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }
.zdChip { display: inline-block; font-size: 12px; padding: 1px 8px; border-radius: 99px; border: 1px solid currentColor; line-height: 1.5; }
.zdChip.chest { color: #8A5E10; }
.zdChip.floor { color: var(--pt-muted); }
.zdChip.once { color: var(--pt-lv3); }
.zdChip.again { color: var(--pt-lv1); }
.zdChip.dlc { color: #5B4BA8; }
.zdLv { font-weight: 700; }
.zdLv1 { color: var(--pt-lv1); }
.zdLv2 { color: var(--pt-lv2); }
.zdLv3 { color: var(--pt-lv3); }
.zdLv4 { color: var(--pt-lv4); }
.zdSeoList details > summary { cursor: pointer; list-style: none; }
.zdSeoList details > summary::-webkit-details-marker { display: none; }
.zdSeoList details > summary h2 { display: inline; margin: 0; font-size: 16px; font-weight: 700; }
.zdSeoList details > summary::before { content: "▸ "; color: var(--pt-muted); }
.zdSeoList details[open] > summary::before { content: "▾ "; }
.zdSeoList h3 { margin: 18px 0 6px; font-size: 14px; }
.zdSeoList h3 small { color: var(--pt-muted); font-weight: 400; }
.zdSeoList ul { margin: 0; padding-left: 18px; columns: 2 320px; column-gap: 28px; font-size: 13px; color: var(--pt-body); }
.zdSeoList li { break-inside: avoid; margin-bottom: 4px; }
.zdNotes { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--pt-muted); line-height: 1.7; }
.zdNotes b { color: var(--pt-ink); }

/* mobile */
@media (max-width: 760px) {
	.ptWrap { padding-inline: 16px; }
	.ptHeaderIn { height: 56px; gap: 12px; }
	.ptLogo span { font-size: 17px; }
	.ptMenuBtn { display: flex; }
	.ptGnb { display: none; position: absolute; top: 56px; left: 0; right: 0; flex-direction: column; gap: 0; background: var(--pt-panel); border-bottom: 1px solid var(--pt-line); box-shadow: 0 8px 24px rgba(27, 36, 33, 0.15); padding: 8px 0; }
	.ptGnb.open { display: flex; }
	.ptGnbItem { display: flex; flex-direction: column; padding: 14px 20px; border-radius: 0; }
	.ptGnbItem strong { font-size: 16px; font-weight: 700; }
	.ptGnbItem span { display: block; font-size: 13px; color: var(--pt-muted); }
	.ptGnbToggle { width: 100%; text-align: left; }
	.ptGnbToggle strong::after { content: ""; }
	.ptGnbSub { display: block; position: static; box-shadow: none; border: 0; border-radius: 0; padding: 0 0 6px 12px; min-width: 0; }
	.ptGnbSubItem { padding: 10px 20px; }
	.ptGnbSubWide, .ptGnbGroup.open .ptGnbSubWide { display: grid; width: auto; grid-template-columns: repeat(2, 1fr); }
	.ptHero { padding-block: 32px 20px; gap: 10px; }
	.ptHero h1 { font-size: 28px; line-height: 1.3; }
	.ptHero p { font-size: 15px; }
	.ptHomeGrid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
	.ptHomeCard .ptHomeVisual { height: 140px; padding: 14px; }
	.ptHomeCard .ptHomeBody { padding: 18px; }
	.ptHomeCard h2 { font-size: 20px; }
	.ptTitle { font-size: 24px; }
	.ptPage { padding-block: 24px 32px; }
	.ptUtilForm .ptBtnMain { flex: 1 1 100%; }
	.ptDl { grid-template-columns: 90px minmax(0, 1fr); }
	.zdFilter { padding: 16px; }
	.zdFRow { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}

/* ============================================================================
   지도 무대(mp*) — 지도 화면 90% x 90%, 검색·필터·목록은 왼쪽 서랍(햄버거)
   공용 수집 화면(collectPage)·젤다 화면이 함께 쓴다
   ============================================================================ */
.mpHeadWrap { padding-bottom: 14px; }
.mpHeadWrap .ptHead { margin-bottom: 0; }
/* 게임 지도 무대: PC 는 사이트 폭 1200(본문 1152) 안 (10-27 사용자 지시, 이전 90vw×90vh) — 모바일은 아래 미디어쿼리에서 전체 폭 */
.mpStage { position: relative; width: calc(100% - 48px); max-width: 1152px; height: min(85vh, 860px); min-height: 420px; margin: 0 auto 28px; scroll-margin-top: 72px; border-radius: 14px; overflow: hidden; background: #1E2422; box-shadow: 0 10px 30px rgba(20, 30, 26, 0.18); }
.mpStage canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; aspect-ratio: auto !important; border-radius: 0 !important; display: block; cursor: crosshair; touch-action: none; }
.mpStage .zdZoom { top: 14px; right: 14px; z-index: 5; }
.mpStage .zdZoom button { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18); }
.mpMenuBtn { position: absolute; top: 14px; left: 14px; z-index: 6; height: 44px; display: inline-flex; align-items: center; gap: 8px; padding: 0 16px 0 14px; border: 1px solid var(--pt-line); border-radius: 10px; background: var(--pt-panel); color: var(--pt-ink); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); }
.mpMenuBtn:hover { background: var(--pt-bg); }
.mpMenuBtn[aria-expanded="true"] { visibility: hidden; }
.mpTabs { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); z-index: 5; margin: 0; justify-content: center; max-width: calc(100% - 420px); }
.mpTabs .zdLayerTab { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); }
.mpHint { position: absolute; left: 14px; bottom: 10px; z-index: 4; margin: 0; padding: 4px 10px; border-radius: 99px; background: rgba(20, 28, 25, 0.72); color: #E8F1ED; font-size: 12px; pointer-events: none; }
.mpStage .zdPop { z-index: 7; }
/* 서랍 */
.mpDrawer { position: absolute; top: 0; left: 0; bottom: 0; z-index: 9; width: 400px; max-width: 92%; display: flex; flex-direction: column; background: var(--pt-panel); box-shadow: 6px 0 28px rgba(0, 0, 0, 0.28); transform: translateX(-104%); transition: transform .22s ease; }
.mpDrawer.open { transform: none; }
.mpDrawerHead { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--pt-line); }
.mpDrawerHead strong { font-size: 16px; }
.mpClose { width: 36px; height: 36px; border: 0; border-radius: 8px; background: transparent; font-size: 24px; line-height: 1; color: var(--pt-muted); cursor: pointer; }
.mpClose:hover { background: var(--pt-bg); color: var(--pt-ink); }
.mpDrawerBody { flex: 1; overflow-y: auto; padding: 14px 16px 24px; display: flex; flex-direction: column; gap: 12px; }
.mpDrawerBody .zdLayers { margin-top: 0; }
.mpDrawerBody .ptField input, .mpDrawerBody .ptField select { width: 100%; height: 42px; border-radius: 8px; font-size: 14px; }
.mpSearch input { padding-left: 34px !important; background: var(--pt-field) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%237A847F' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E") no-repeat 10px center !important; }
.mpListHead { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding-top: 10px; border-top: 1px solid var(--pt-line2); }
.mpListHead h2 { margin: 0; font-size: 15px; }
.mpListHead small { color: var(--pt-muted); font-size: 12px; }
.mpList td { white-space: normal; }
.mpList th { top: -14px; }
.mpBelow { padding-top: 4px; }
/* 젤다: 서랍이 넓고(표 6칸) 필터는 2열 */
.mpDrawerWide { width: 500px; }
.mpFilter { display: flex; flex-direction: column; gap: 10px; padding: 0; }
.mpFilter .zdFRow { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px; }
.mpFilter .zdFRow .zdQ, .mpFilter .zdFRow .ptField:nth-child(2) { grid-column: span 2; }
.mpFilter .zdFFoot { padding-top: 10px; }
.mpDrawerBody .zdLegend { margin: 0; }
/* 지도 탭이 많을 때(원신·배그 등) 중간 폭에서도 버튼과 안 겹치게 가로 스크롤 한 줄 */
@media (max-width: 1100px) {
	.mpTabs { top: 66px; left: 14px; right: 70px; transform: none; max-width: none; justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
	.mpTabs::-webkit-scrollbar { display: none; }
	.mpTabs .zdLayerTab { flex: 0 0 auto; }
}
@media (max-width: 760px) {
	.mpStage { width: 100%; height: 78vh; border-radius: 0; margin-bottom: 20px; }
	.mpMenuBtn span { display: none; }
	.mpMenuBtn { padding: 0 12px; }
	.mpTabs { top: 66px; left: 10px; right: 64px; }
	.mpTabs .zdLayerTab { height: 34px; padding: 0 12px; font-size: 13px; }
	.mpHint { display: none; }
	.mpDrawer, .mpDrawerWide { width: 100%; max-width: 100%; }
}
/* 공식 지도 바로가기 (지도 오른쪽 아래) */
.mpOfficial { position: absolute; right: 14px; bottom: 12px; z-index: 5; display: inline-flex; align-items: center; height: 38px; padding: 0 14px; border-radius: 99px; background: var(--pt-panel); color: var(--pt-accent); font-size: 13px; font-weight: 700; text-decoration: none; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25); }
.mpOfficial:hover { background: var(--pt-accentSoft); color: var(--pt-accent); }
@media (max-width: 760px) { .mpOfficial { bottom: 10px; right: 10px; height: 34px; font-size: 12px; } }
/* 터치 말풍선: 안의 '찾음 체크' 버튼은 누를 수 있게 */
.zdPop.touch { max-width: 300px; }
.zdPop .mpPopBtn { pointer-events: auto; margin-left: 6px; height: 34px; padding: 0 12px; border: 0; border-radius: 99px; background: #3FD07A; color: #10261A; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; vertical-align: middle; }

/* 행정구역 지도(/util/maps) — 카카오 지도 무대 + 결과 카드 */
/* 행정구역 지도 무대는 사이트 폭 1200(본문 1152) 안에 둔다(10-27 사용자 지시) — 게임 지도(90vw)와 다름 */
.kmStage { background: #E8ECEA; width: calc(100% - 48px); max-width: 1152px; height: min(80vh, 760px); }
.kmRecent { margin-bottom: 18px; }
#kmRecentTable tbody tr { cursor: pointer; }
#kmRecentTable tbody tr:hover td { background: var(--pt-bg); }
.kmRecentWord { color: var(--pt-ink); }
.kmRecentMsg { white-space: normal !important; }
.kmRecentMsg.fail { color: var(--pt-lv4); }
.kmMap { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; } /* 네이버 SDK 가 position:relative 를 넣어 높이가 0 이 되던 것 고정 */
.kmStage .mpMenuBtn { z-index: 6; }
.kmMyPos { position: absolute; top: 66px; left: 14px; z-index: 6; height: 38px; padding: 0 14px; border: 1px solid var(--pt-line); border-radius: 10px; background: var(--pt-panel); color: var(--pt-ink); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); }
.kmInfo { position: absolute; left: 14px; bottom: 14px; z-index: 7; width: 380px; max-width: calc(100% - 28px); max-height: calc(100% - 140px); overflow-y: auto; padding: 16px 16px 12px; border-radius: 12px; background: #FFFFFF; opacity: 1; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.25); }
.kmInfo[hidden] { display: none; }
.kmInfoClose { position: absolute; top: 6px; right: 6px; }
.kmTitle { margin: 0 32px 10px 0; font-size: 17px; line-height: 1.35; }
.kmRow { display: grid; grid-template-columns: 64px 1fr auto; gap: 8px; align-items: center; padding: 6px 0; border-top: 1px solid var(--pt-line2); font-size: 14px; }
.kmLabel { color: var(--pt-muted); font-size: 12px; }
.kmValue { word-break: keep-all; }
.kmCode { border: 1px solid var(--pt-line); border-radius: 6px; background: var(--pt-field); padding: 3px 8px; font-family: "IBM Plex Mono", monospace; font-size: 12px; color: var(--pt-ink); cursor: copy; }
.kmCode.copied { background: var(--pt-accentSoft); color: var(--pt-accent); border-color: var(--pt-accent); }
.kmTip { margin: 8px 0 0; font-size: 11px; color: var(--pt-muted); }
/* 시도 | 시군구 / 법정동 | 행정동 2×2 */
.kmGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 6px; }
.kmCell { display: flex; flex-direction: row; align-items: center; gap: 6px; min-width: 0; padding: 6px 8px; border-radius: 8px; background: #F2F4F1; }
.kmCellName { flex: 1; min-width: 0; font-size: 14px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kmCell .kmLabel { flex-shrink: 0; font-size: 11px; }
.kmCell .kmCode { flex-shrink: 0; }
.kmSearch { display: flex; gap: 8px; align-items: flex-end; }
.kmSearch .ptField { flex: 1; }
.kmSearch .ptBtn { height: 42px; padding: 0 16px; border-radius: 8px; }
.kmResults { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.kmResult { width: 100%; display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--pt-line2); border-radius: 8px; background: var(--pt-panel); text-align: left; font: inherit; cursor: pointer; }
.kmResult:hover { background: var(--pt-bg); }
.kmResult strong { font-size: 14px; }
.kmResult span { font-size: 12px; color: var(--pt-muted); }
.kmEmpty { padding: 12px; color: var(--pt-muted); font-size: 13px; }
.kmNote { margin: 6px 0 0; font-size: 12px; color: var(--pt-muted); }
@media (max-width: 760px) {
	/* 모바일 상세정보: 글자·여백을 줄이고 지도 가림을 최소화(높이 40% 안쪽, 안내 문구 숨김) */
	.kmInfo { left: 6px; right: 6px; bottom: 6px; width: auto; max-width: none; max-height: 40%; padding: 6px 6px 4px 6px; border-radius: 10px; }
	.kmInfoClose { top: 0; right: 0; width: 32px; height: 32px; font-size: 20px; }
	.kmTitle { margin: 0 28px 4px 0; font-size: 14px; }
	.kmRow { grid-template-columns: 52px 1fr auto; gap: 6px; padding: 3px 0; font-size: 12px; line-height: 1.35; }
	.kmLabel { font-size: 11px; }
	.kmCode { padding: 1px 6px; font-size: 11px; }
	.kmTip { display: none; }
	.kmMore { display: none; }
	.kmTitle { display: none; }
	.kmGrid { gap: 4px; margin: 0 26px 4px 0; }
	.kmCell { padding: 4px 6px; gap: 4px; }
	.kmCellName { font-size: 12px; }
	.kmCell .kmLabel { font-size: 10px; }
	.kmCell .kmCode { padding: 0 5px; font-size: 10px; }
	.kmMyPos { top: 64px; height: 34px; padding: 0 12px; font-size: 12px; }
}
.kmArea:empty { display: none; }
.kmRow .kmLabel { word-break: keep-all; }
/* 마커 위 라벨(통계 시군구·읍면동): 마커(높이 약 35px) 위로 띄운다 */
.kmPinLabel { margin-bottom: 44px; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 12px 7px; border-radius: 10px; background: #FFFFFF; border: 2px solid #E4572E; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22); white-space: nowrap; pointer-events: none; position: relative; }
.kmPinLabel::after { content: ""; position: absolute; left: 50%; bottom: -8px; transform: translateX(-50%); border: 7px solid transparent; border-top-color: #E4572E; border-bottom: 0; }
.kmPinSgg { font-size: 11px; color: #3D5A80; font-weight: 600; }
.kmPinEmd { font-size: 15px; color: #1B2421; }
@media (max-width: 760px) {
	.kmPinLabel { margin-bottom: 42px; padding: 4px 9px 5px; }
	.kmPinSgg { font-size: 10px; }
	.kmPinEmd { font-size: 13px; }
}
/* 결과 카드 뒤 코드(법정동·행정동·통계 코드·우편번호)는 숨김(10-27 사용자 지시) — 다시 보이려면 이 줄만 지운다 */
.kmInfo .kmCode { display: none; }
/* 통계 읍면동 불러오기 실패 안내는 모바일에서도 보인다 */
.kmInfo .kmAreaMsg { display: block; margin: 2px 0 0; }
@media (max-width: 760px) {
	.kmStage { width: calc(100% - 32px); height: 72vh; }
}
/* 최근 조회 100(행정구역 지도·넷유틸리티) 모바일: 표 대신 2줄 카드 — 1줄 시각·종류·검색어, 2줄 결과 (옵션 열은 숨김) */
@media (max-width: 760px) {
	#kmRecentTable thead, #recentTable thead { display: none; }
	#kmRecentTable, #kmRecentTable tbody, #recentTable, #recentTable tbody { display: block; width: 100%; }
	#kmRecentTable tr, #recentTable tr { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 2px 8px; align-items: baseline; padding: 8px 2px; border-bottom: 1px solid var(--pt-line2); }
	#kmRecentTable td, #recentTable td { display: block; padding: 0 !important; border: 0 !important; font-size: 12px; white-space: nowrap; background: transparent !important; }
	#kmRecentTable td:nth-child(1), #recentTable td:nth-child(1) { color: var(--pt-muted); font-size: 11px; }
	#kmRecentTable td:nth-child(2), #recentTable td:nth-child(2) { font-weight: 600; }
	#kmRecentTable td:nth-child(3), #recentTable td:nth-child(3) { overflow: hidden; text-overflow: ellipsis; }
	#kmRecentTable td:nth-child(4), #recentTable td:nth-child(4) { display: none; }
	#kmRecentTable td:nth-child(5), #recentTable td:nth-child(5) { grid-column: 1 / -1; white-space: normal !important; color: var(--pt-muted); }
	#kmRecentTable td[colspan], #recentTable td[colspan] { grid-column: 1 / -1; white-space: normal; }
	.kmRecent .ptCardHead, #utilRecent .ptCardHead { flex-wrap: wrap; gap: 2px 8px; }
	.kmRecent .zdScroll, #utilRecent .zdScroll { overflow-x: hidden; }
}
/* 행정구역 지도 상세정보 카드: 배경 반투명(알파 0.5, 사용자 지시 10-27) — 글자는 그대로 진하게, 뒤 지도는 살짝 흐리게 */
.kmInfo { background: rgba(255, 255, 255, 0.5) !important; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.kmCell { background: rgba(242, 244, 241, 0.5); }
/* 게임 페이지 비공식 고지(바닥글) */
.ptFooterIn { flex-wrap: wrap; }
.ptRights { order: 3; flex-basis: 100%; margin: 6px 0 0; font-size: 11px; line-height: 1.5; color: var(--pt-muted); }

/* 게시판(/board/{코드}) — skin/boardListWrap·boardList·boardView */
.bdTags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.bdTag { padding: 6px 12px; border: 1px solid var(--pt-line); border-radius: 99px; background: var(--pt-panel); color: var(--pt-ink); font-size: 13px; text-decoration: none; }
.bdTag:hover { background: var(--pt-bg); }
.bdTag.on { background: var(--pt-accent); border-color: var(--pt-accent); color: #fff; }
.bdSearch { display: flex; gap: 8px; margin-bottom: 12px; }
.bdSearch input { flex: 1; min-width: 0; height: 40px; padding: 0 12px; border: 1px solid var(--pt-line); border-radius: 8px; background: var(--pt-field); font: inherit; }
.bdSearch .ptBtn { height: 40px; padding: 0 16px; border-radius: 8px; }
.bdList { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--pt-line); }
.bdItem a { display: block; padding: 14px 4px; border-bottom: 1px solid var(--pt-line2); color: var(--pt-ink); text-decoration: none; }
.bdItem a:hover { background: var(--pt-bg); }
.bdMeta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; color: var(--pt-muted); }
.bdChip { padding: 2px 8px; border-radius: 99px; background: var(--pt-accentSoft); color: var(--pt-accent); font-size: 11px; font-weight: 600; }
.bdSubject { margin: 6px 0 4px; font-size: 16px; line-height: 1.4; }
.bdSummary { margin: 0; font-size: 13px; color: var(--pt-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bdEmpty { padding: 28px 4px; color: var(--pt-muted); text-align: center; }
.bdPaging { display: flex; justify-content: center; margin: 16px 0 28px; }
.bdPaging .pagination { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
.bdPaging .pagination button { min-width: 34px; height: 34px; border: 1px solid var(--pt-line); border-radius: 8px; background: var(--pt-panel); font: inherit; font-size: 13px; cursor: pointer; }
.bdPaging .pagination button.active { background: var(--pt-accent); border-color: var(--pt-accent); color: #fff; }
.bdView { max-width: 820px; margin: 0 auto; padding-bottom: 28px; }
.bdViewTitle { margin: 10px 0 18px; font-size: 26px; line-height: 1.35; }
.bdViewBody { font-size: 15px; line-height: 1.8; word-break: keep-all; }
.bdViewBody img { max-width: 100%; height: auto; }
.bdViewFoot { margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--pt-line2); }
/* 메인 하단: 오피니언 최근 10건 */
.ptHomeNews { margin: -16px 0 48px; padding: 20px 22px; background: var(--pt-panel); border: 1px solid var(--pt-line); border-radius: 12px; }
.ptHomeNewsHead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.ptHomeNewsHead h2 { margin: 0; font-size: 20px; }
.ptHomeNewsHead a { font-size: 13px; color: var(--pt-muted); text-decoration: none; }
.ptHomeNewsList { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
.ptHomeNewsList a { display: flex; align-items: center; gap: 8px; padding: 10px 2px; border-bottom: 1px solid var(--pt-line2); color: var(--pt-ink); text-decoration: none; }
.ptHomeNewsList a:hover strong { color: var(--pt-accent); }
.ptHomeNewsList .bdChip { flex-shrink: 0; }
.ptHomeNewsList strong { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ptHomeNewsList time { flex-shrink: 0; font-size: 12px; color: var(--pt-muted); }
@media (max-width: 760px) {
	.ptHomeNews { margin-top: -24px; padding: 16px 14px; }
	.ptHomeNewsList { grid-template-columns: 1fr; }
}
/* 행정구역 지도: 지도 공급자 고르기(카카오 | 네이버) — 위 가운데 */
.kmProv { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); z-index: 6; display: flex; padding: 3px; border-radius: 10px; background: #FFFFFF; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); }
.kmProv a { padding: 7px 14px; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--pt-ink); text-decoration: none; }
.kmProv a.on { background: var(--pt-accent); color: #FFFFFF; }
.kmPinWrap { transform: translate(-50%, -100%); }
@media (max-width: 760px) {
	.kmProv { top: 64px; left: 100px; transform: none; }
	.kmProv a { padding: 6px 10px; font-size: 12px; }
}

/* AI 일잘러 테스트(/util/aitest) */
.atPage { max-width: 820px; padding-bottom: 40px; }
.atCard { background: var(--pt-panel); border: 1px solid var(--pt-line); border-radius: 14px; padding: 20px; margin-bottom: 14px; }
.atCard h2 { margin: 0 0 12px; font-size: 18px; }
.atNote { margin: 6px 0 0; font-size: 12px; color: var(--pt-muted); }
.atList { margin: 0; padding-left: 18px; font-size: 14px; line-height: 1.7; }
.atSub { margin: 14px 0 4px; font-size: 14px; }
.atMain { background: var(--pt-accent) !important; border-color: var(--pt-accent) !important; color: #FFFFFF !important; }
.atIntro .atNick { display: flex; flex-direction: column; gap: 6px; margin: 16px 0 12px; font-size: 13px; color: var(--pt-muted); }
.atIntro .atNick input { height: 42px; padding: 0 12px; border: 1px solid var(--pt-line); border-radius: 8px; font: inherit; font-size: 15px; background: var(--pt-field); }
.atIntro .ptBtn { width: 100%; height: 48px; font-size: 16px; font-weight: 700; border-radius: 10px; }
.atProg { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--pt-muted); }
.atProgBar { flex: 1; height: 8px; border-radius: 99px; background: #E9EDEA; overflow: hidden; }
.atProgBar span { display: block; height: 100%; background: var(--pt-accent); transition: width .2s; }
.atStem { white-space: pre-wrap; font-size: 16px; font-weight: 600; line-height: 1.6; margin: 10px 0 14px; }
.atOpts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; counter-reset: opt; }
.atOpt { width: 100%; text-align: left; padding: 12px 14px 12px 42px; border: 1px solid var(--pt-line); border-radius: 10px; background: var(--pt-panel); font: inherit; font-size: 15px; line-height: 1.5; cursor: pointer; position: relative; color: var(--pt-ink); }
.atOpts li { counter-increment: opt; }
.atOpt::before { content: counter(opt); position: absolute; left: 12px; top: 11px; width: 22px; height: 22px; border-radius: 50%; background: var(--pt-bg); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.atOpt:hover { border-color: var(--pt-accent); }
.atOpt.on { border-color: var(--pt-accent); background: var(--pt-accentSoft); }
.atOpt.on::before { background: var(--pt-accent); color: #FFFFFF; }
.atNav { display: flex; gap: 8px; margin-top: 16px; }
.atNav .ptBtn { flex: 1; height: 44px; border-radius: 10px; }
.atHero { text-align: center; padding: 28px 20px; border-radius: 16px; background: linear-gradient(160deg, #2F6B4F, #1F4A37); color: #FFFFFF; margin-bottom: 14px; }
.atHero p { margin: 0; }
.atKicker { font-size: 13px; opacity: 0.85; }
.atGrade { display: inline-block; margin-top: 10px !important; padding: 3px 12px; border-radius: 99px; background: rgba(255, 255, 255, 0.18); font-size: 14px; font-weight: 700; }
.atCode { font-size: 46px; font-weight: 700; letter-spacing: 0.08em; line-height: 1.2; margin-top: 4px !important; }
.atName { font-size: 22px; font-weight: 700; margin: 2px 0 8px !important; }
.atLine { font-size: 15px; opacity: 0.92; margin-bottom: 14px !important; }
.atScore { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; padding: 10px 16px; border-radius: 12px; background: rgba(255, 255, 255, 0.12); font-size: 14px; }
.atScore b { font-size: 20px; }
.atAxis { margin-bottom: 12px; }
.atAxisHead { display: flex; justify-content: space-between; font-size: 13px; color: var(--pt-muted); }
.atAxisHead .on { color: var(--pt-ink); font-weight: 700; }
.atAxisBar { position: relative; height: 10px; border-radius: 99px; background: #E9EDEA; margin-top: 5px; }
.atAxisBar span { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 99px; background: var(--pt-accent); }
.atAxisBar i { position: absolute; top: -3px; bottom: -3px; left: 70%; width: 2px; background: var(--pt-ink); opacity: 0.4; }
.atArea { display: grid; grid-template-columns: 112px 1fr 36px; gap: 10px; align-items: center; font-size: 14px; margin-bottom: 8px; }
.atAreaBar { height: 12px; border-radius: 99px; background: #E9EDEA; overflow: hidden; }
.atAreaBar span { display: block; height: 100%; border-radius: 99px; background: var(--pt-accent); }
.atArea.weak .atAreaBar span { background: #C4622D; }
.atChips { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 8px 0 0; padding: 0; }
.atChips li { padding: 4px 10px; border-radius: 99px; background: var(--pt-accentSoft); color: var(--pt-accent); font-size: 13px; font-weight: 600; }
.atWeak { border-left: 4px solid #C4622D; padding: 2px 0 2px 14px; margin-bottom: 16px; font-size: 14px; }
.atWeak h3 { margin: 0 0 4px; font-size: 16px; }
.atWeak ul { margin: 6px 0; padding-left: 18px; }
.atWrong summary { cursor: pointer; font-weight: 700; font-size: 14px; }
.atWrongItem { padding: 12px 0; border-top: 1px solid var(--pt-line2); font-size: 14px; }
.atWrongItem .atStem { font-size: 14px; margin: 4px 0 8px; }
.atWrongItem ol { margin: 0; padding-left: 20px; }
.atWrongItem li.ans { color: var(--pt-accent); font-weight: 700; }
.atWrongItem li.ans::after { content: "  ← 정답"; }
.atWrongItem li.pick { color: #C4622D; text-decoration: line-through; }
.atWrongItem li.pick::after { content: "  ← 내 답"; text-decoration: none; display: inline-block; margin-left: 4px; }
.atExplain { margin: 8px 0 0; padding: 8px 10px; border-radius: 8px; background: var(--pt-bg); font-size: 13px; }
.atShare h2 { text-align: center; }
.atShareGrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.atShareBtn { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 4px; border: 1px solid var(--pt-line); border-radius: 12px; background: var(--pt-panel); font: inherit; font-size: 12px; color: var(--pt-ink); cursor: pointer; }
.atShareBtn:hover { background: var(--pt-bg); }
.atShareBtn .ico { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #FFFFFF; font-weight: 700; font-size: 15px; }
.atShareBtn .ico.kakao { background: #FEE500; color: #191919; }
.atShareBtn .ico.fb { background: #1877F2; }
.atShareBtn .ico.x { background: #111111; }
.atShareBtn .ico.threads { background: #000000; }
.atShareBtn .ico.blog { background: #03C75A; }
.atShareBtn .ico.band { background: #06C755; }
.atShareBtn .ico.li { background: #0A66C2; }
.atShareBtn .ico.reddit { background: #FF4500; }
.atShareBtn .ico.wa { background: #25D366; }
.atShareBtn .ico.link { background: #5B6661; }
.atShareBtn .ico.img { background: var(--pt-accent); }
.atShareMore { width: 100%; margin-top: 10px; height: 44px; border: 0; border-radius: 10px; background: var(--pt-accent); color: #FFFFFF; font: inherit; font-weight: 700; cursor: pointer; }
.atRetry { margin-bottom: 14px; }
.atRetry .ptBtn { display: block; width: 100%; height: 48px; line-height: 48px; text-align: center; border-radius: 10px; font-weight: 700; text-decoration: none; }
.atTopList { list-style: none; margin: 0; padding: 0; }
.atTopList a { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto 52px 84px; gap: 8px; align-items: center; padding: 9px 4px; border-bottom: 1px solid var(--pt-line2); color: var(--pt-ink); text-decoration: none; font-size: 14px; }
.atTopList a:hover { background: var(--pt-bg); }
.atTopList .rk { font-weight: 700; color: var(--pt-accent); text-align: center; }
.atTopList .nk { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.atTopList .tp { font-size: 12px; color: var(--pt-muted); }
.atTopList b { text-align: right; }
.atTopList .dt { font-size: 12px; color: var(--pt-muted); text-align: right; }
.atToast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); padding: 10px 16px; border-radius: 10px; background: rgba(20, 28, 25, 0.92); color: #FFFFFF; font-size: 14px; opacity: 0; transition: opacity .2s; pointer-events: none; z-index: 50; }
.atToast.on { opacity: 1; }
@media (max-width: 760px) {
	.atCode { font-size: 38px; }
	.atShareGrid { gap: 6px; }
	.atShareBtn { padding: 10px 2px; font-size: 11px; }
	.atShareBtn .ico { width: 36px; height: 36px; }
	.atArea { grid-template-columns: 92px 1fr 32px; font-size: 13px; }
	.atTopList a { grid-template-columns: 28px minmax(0, 1fr) 46px 74px; }
	.atTopList .tp { display: none; }
}
/* AI 일잘러 테스트 — 답을 고르면 아래로 다음 문제가 펼쳐지는 응시 화면 */
.atExam .atProg { position: sticky; top: 64px; z-index: 5; flex-wrap: wrap; padding: 10px 14px; margin-bottom: 12px; border: 1px solid var(--pt-line); border-radius: 12px; background: rgba(255, 255, 255, 0.96); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06); }
.atExam .atProg .atNote { flex-basis: 100%; margin: 0; }
.atList { display: flex; flex-direction: column; gap: 12px; }
.atQ { background: var(--pt-panel); border: 1px solid var(--pt-line); border-radius: 14px; padding: 18px; transition: opacity .35s ease, transform .35s ease, border-color .2s; }
.atQ.enter { opacity: 0; transform: translateY(18px); }
.atQ.done { border-color: var(--pt-accentSoft); }
.atQ.done .atStem { color: var(--pt-muted); }
.atQ .atStem { margin-top: 4px; }
.atSubmit { display: block; width: 100%; height: 52px; margin: 16px 0 8px; border-radius: 12px; font-size: 16px; font-weight: 700; }
.atRel { margin: 12px auto 0 !important; max-width: 560px; font-size: 13px; opacity: 0.9; }
.atRel.low { padding: 6px 10px; border-radius: 8px; background: rgba(255, 200, 150, 0.22); }
@media (max-width: 900px) {
	.atExam .atProg { top: 56px; }
}
/* AI 일잘러 테스트 첫 화면 설명(검색엔진·처음 온 사람용) */
.atAreaList { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.atAreaList li { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 10px; background: var(--pt-bg); font-size: 13px; }
.atAreaList b { font-size: 14px; }
.atTypeList { list-style: none; margin: 10px 0 12px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.atTypeList li { display: flex; flex-direction: column; align-items: center; padding: 8px 4px; border-radius: 10px; background: var(--pt-accentSoft); text-align: center; }
.atTypeList b { font-size: 15px; letter-spacing: 0.05em; color: var(--pt-accent); }
.atTypeList span { font-size: 12px; }
.atFaq { padding: 10px 0; border-top: 1px solid var(--pt-line2); }
.atFaq summary { cursor: pointer; font-weight: 600; font-size: 14px; }
.atFaq p { margin: 6px 0 0; font-size: 14px; color: var(--pt-body); }
@media (max-width: 760px) {
	.atAreaList { grid-template-columns: 1fr; }
	.atTypeList { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}