/* ════════════════════════════════════════════════════════════════════════
   케로로 팡팡 홈페이지 — 공용 디자인 시스템 (2026-10-22 2차 «소대 색띠»)
   · 색은 전부 게임 «캐릭터 선택» 화면(UI/TEST/PRACTICE.PNG)에서 뽑았다:
     띠 다섯 = 케로로 연두·타마마 파랑·기로로 분홍·쿠루루 노랑·도로로 청록, 글씨 테두리 = 남색 #000C55 계열
   · 제목 글씨 = Jua(게임 UI 글씨와 같은 둥근 굵은 계열) + 게임식 남색 테두리 · 본문 = 나눔고딕
   · 판은 남색 테두리 + 납작한 그림자(만화 외곽선 말투) — 흐린 회색 그림자·장식용 그라데이션은 쓰지 않는다
   ════════════════════════════════════════════════════════════════════════ */
:root {
	--ink: #0b1659;          /* 케론 남색 — 게임 외곽선·글씨 테두리 */
	--ink-2: #343c6b;
	--ink-3: #666d93;
	--line: #d5d9ea;
	--line-2: #e7eaf4;
	--paper: #ffffff;
	--mist: #f1f3fa;
	--cream: #fffbe6;        /* 게임 글씨 속 색 */

	--lime: #c3e315;  --lime-d: #7fa308;  --lime-l: #f0f8c8;     /* 케로로 */
	--blue: #6a83c4;  --blue-d: #46609f;  --blue-l: #e4e9f6;     /* 타마마 */
	--pink: #da6088;  --pink-d: #b63f66;  --pink-l: #fae3eb;     /* 기로로 */
	--yellow: #fee451; --orange: #f9be0b; --orange-d: #d98400; --yellow-l: #fff5c7;  /* 쿠루루 */
	--teal: #5b9fbc;  --teal-d: #387c98;  --teal-l: #ddedf4;     /* 도로로 */
	--red: #e5484d;

	--font-display: 'Jua', 'Nanum Gothic', sans-serif;
	--font-body: 'Nanum Gothic', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
	--wrap: 1180px;
	--r: 14px;
	--r-sm: 9px;
	--drop: 0 4px 0 var(--ink);

	/* 띠 무늬(게임 화면의 옅은 무늬를 그대로 옮겼다 — 같은 색 계열로 한 톤 진하게) */
	--pat-lime: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='76' height='76' viewBox='0 0 76 76'%3E%3Cpath d='M19 6l4.3 9.2 10 1.2-7.4 6.9 1.9 9.9L19 28.3l-8.8 4.9 1.9-9.9-7.4-6.9 10-1.2zM57 44l4.3 9.2 10 1.2-7.4 6.9 1.9 9.9-8.8-4.9-8.8 4.9 1.9-9.9-7.4-6.9 10-1.2z' fill='%23b2d40c'/%3E%3C/svg%3E");
	--pat-blue: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='%235d76b8'%3E%3Cpath d='M14 8h11l7 9v20l-12-8-12 8V17zM54 48h11l7 9v20l-12-8-12 8V57z'/%3E%3C/g%3E%3C/svg%3E");
	--pat-pink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='84' viewBox='0 0 84 84'%3E%3Cg fill='%23cf5179'%3E%3Cpath d='M21 6c8.8 0 15 6 15 13.6 0 4.6-2.4 8-5.6 9.6V34H11.6v-4.8C8.4 27.6 6 24.2 6 19.6 6 12 12.2 6 21 6zm-6 11.4a3.4 3.4 0 100 6.8 3.4 3.4 0 000-6.8zm12 0a3.4 3.4 0 100 6.8 3.4 3.4 0 000-6.8z'/%3E%3Cpath d='M63 48c8.8 0 15 6 15 13.6 0 4.6-2.4 8-5.6 9.6V76H53.6v-4.8C50.4 69.6 48 66.2 48 61.6 48 54 54.2 48 63 48zm-6 11.4a3.4 3.4 0 100 6.8 3.4 3.4 0 000-6.8zm12 0a3.4 3.4 0 100 6.8 3.4 3.4 0 000-6.8z'/%3E%3C/g%3E%3C/svg%3E");
	--pat-yellow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='%23f2cf27' stroke-width='4.5' stroke-linecap='round'%3E%3Cpath d='M20 20m-2 0a2 2 0 104 0 6 6 0 10-12 0 10 10 0 1020 0 14 14 0 10-28 0'/%3E%3Cpath d='M60 60m-2 0a2 2 0 104 0 6 6 0 10-12 0 10 10 0 1020 0 14 14 0 10-28 0'/%3E%3C/g%3E%3C/svg%3E");
	--pat-teal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='%234f93b0'%3E%3Cpath d='M20 4l4 12 12 4-12 4-4 12-4-12-12-4 12-4zM60 44l4 12 12 4-12 4-4 12-4-12-12-4 12-4z'/%3E%3C/g%3E%3C/svg%3E");
}

* { box-sizing: border-box; }
/* ⚠ hidden 속성은 화면 규칙(display:flex 등)이 덮어쓴다 — 어디서든 hidden 이면 숨긴다 */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; border-radius: 6px; }
.wrap { width: min(var(--wrap), calc(100% - 32px)); margin: 0 auto; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ── 게임 글씨(남색 테두리 + 크림색 속) ─────────────────────────────── */
.lettering {
	font-family: var(--font-display);
	font-weight: normal;
	color: var(--cream);
	-webkit-text-stroke: 0.2em var(--ink);
	paint-order: stroke fill;
	text-shadow: 0 0.09em 0 var(--ink);
	letter-spacing: 0.01em;
}

/* ── 맨 위 띠 + 머리 메뉴 ──────────────────────────────────────────── */
.topbar { background: var(--ink); color: #dfe3f6; font-size: 13px; }
.topbar .wrap { display: flex; align-items: center; justify-content: flex-end; gap: 4px; height: 32px; }
.topbar a, .topbar button { padding: 3px 9px; border: 0; border-radius: 6px; background: none; color: #dfe3f6; font-size: 13px; }
.topbar a:hover, .topbar button:hover { color: #fff; background: rgba(255, 255, 255, 0.1); }
.topbar .who { color: var(--yellow); font-weight: 700; padding: 3px 6px; }
.topbar .who img { display: inline-block; width: 20px; height: 20px; vertical-align: -5px; margin-right: 4px; }
.topbar .sep { width: 1px; height: 11px; background: rgba(255, 255, 255, 0.25); }

.gnb { position: sticky; top: 0; z-index: 50; background: #fff; border-bottom: 3px solid var(--ink); }
.gnb .wrap { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 74px; }
.gnb nav { display: flex; gap: 2px; }
.gnb nav.left { justify-content: flex-end; padding-right: 22px; }
.gnb nav.right { justify-content: flex-start; padding-left: 22px; }
.gnb nav a { position: relative; padding: 8px 15px; border-radius: 10px; font-family: var(--font-display); font-size: 19px; color: var(--ink); white-space: nowrap; transition: background 0.15s, color 0.15s; }
.gnb nav a:hover { background: var(--mist); }
.gnb nav a.on { color: var(--ink); background: var(--yellow); box-shadow: inset 0 0 0 2px var(--ink); }
.gnb .logo { display: block; position: relative; width: 156px; height: 74px; }
.gnb .logo img { position: absolute; left: 0; top: 2px; width: 156px; height: auto; transition: transform 0.2s; }
.gnb .logo:hover img { transform: rotate(-3deg) scale(1.04); }
.gnb .menu-btn { display: none; }

/* ── 버튼(게임 알약 버튼 말투) ─────────────────────────────────────── */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	height: 46px; padding: 0 22px; border: 2px solid var(--ink); border-radius: 999px;
	font-family: var(--font-display); font-size: 18px; line-height: 1; white-space: nowrap;
	box-shadow: var(--drop); transition: transform 0.12s, box-shadow 0.12s, background 0.15s;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 5px 0 var(--ink); }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.btn-go { background: var(--orange); color: var(--ink); }
.btn-go:hover { background: #ffc928; }
.btn-lime { background: var(--lime); color: var(--ink); }
.btn-white { background: #fff; color: var(--ink); }
.btn-ink { background: var(--ink); color: #fff; }
.btn-sm { height: 38px; padding: 0 16px; font-size: 16px; box-shadow: 0 3px 0 var(--ink); }
.btn-ghost { background: transparent; color: var(--ink-2); border-color: var(--line); box-shadow: none; }
.btn-ghost:hover { box-shadow: none; border-color: var(--ink); }
.btn[disabled] { opacity: 0.5; cursor: default; transform: none; }

/* ── 판(남색 테두리) ──────────────────────────────────────────────── */
.card { overflow: hidden; background: #fff; border: 2px solid var(--ink); border-radius: var(--r); box-shadow: 0 4px 0 rgba(11, 22, 89, 0.12); }
/* 판 맨 위 = 담당 소대원 띠(게임 창 제목줄처럼) */
.card > .band-rule:first-child { height: 16px; margin: 0; border: 0; border-bottom: 2px solid var(--ink); border-radius: 0; background-size: 34px 34px; }
.card-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px 12px; }
.card-h h2, .card-h h3 { display: flex; align-items: center; gap: 10px; margin: 0; font-family: var(--font-display); font-weight: normal; font-size: 23px; line-height: 1.2; color: var(--ink); }
.card-h h2 img, .card-h h3 img { width: 42px; height: 42px; }
.card-h .more { flex: none; padding: 5px 12px; border: 2px solid var(--line); border-radius: 999px; color: var(--ink-2); font-size: 13px; font-weight: 700; }
.card-h .more:hover { border-color: var(--ink); color: var(--ink); }
.card-h .more-row { display: inline-flex; flex: none; gap: 6px; }
.card-h .more-admin { border-color: var(--ink); background: var(--yellow-l); color: var(--ink); }
.card-b { padding: 4px 20px 18px; }
.empty { padding: 26px 8px; text-align: center; color: var(--ink-3); font-size: 14px; }

/* 구역 머리 밑줄 — 담당 소대원 띠 색 + 무늬 */
.band-rule { height: 10px; margin: 0 20px; border-radius: 999px; border: 2px solid var(--ink); background-size: 38px 38px; }
.band-rule.lime { background-color: var(--lime); background-image: var(--pat-lime); }
.band-rule.blue { background-color: var(--blue); background-image: var(--pat-blue); }
.band-rule.pink { background-color: var(--pink); background-image: var(--pat-pink); }
.band-rule.yellow { background-color: var(--yellow); background-image: var(--pat-yellow); }
.band-rule.teal { background-color: var(--teal); background-image: var(--pat-teal); }

/* 분류 꼬리표 */
.tag { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border: 2px solid var(--ink); border-radius: 999px; font-size: 12px; font-weight: 800; white-space: nowrap; line-height: 1; }
.tag.notice { background: var(--blue-l); color: var(--ink); }
.tag.event { background: var(--yellow); color: var(--ink); }
.tag.update { background: var(--lime); color: var(--ink); }
.tag.faq { background: var(--yellow); color: var(--ink); }      /* 고객지원 분류(2026-10-24) */
.tag.guide { background: var(--teal-l); color: var(--ink); }
.tag.policy { background: var(--pink-l); color: var(--ink); }
.tag.hot { background: var(--pink); color: #fff; }

/* ── 하위 페이지 띠 머리(site.js renderSubhero) ─────────────────────── */
.subhero { position: relative; overflow: hidden; height: 200px; border-bottom: 3px solid var(--ink); background: var(--paper); isolation: isolate; }
.sh-bands { position: absolute; inset: 0 -120px; display: flex; gap: 10px; transform: skewX(-24deg); z-index: -1; }
.sh-bands i { flex: 1; background-size: 76px 76px; }
.sh-bands i:nth-child(1) { background-color: var(--lime); background-image: var(--pat-lime); }
.sh-bands i:nth-child(2) { background-color: var(--blue); background-image: var(--pat-blue); }
.sh-bands i:nth-child(3) { background-color: var(--pink); background-image: var(--pat-pink); }
.sh-bands i:nth-child(4) { background-color: var(--yellow); background-image: var(--pat-yellow); }
.sh-bands i:nth-child(5) { background-color: var(--teal); background-image: var(--pat-teal); }
.sh-in { position: relative; height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.sh-tx { min-width: 0; }
.crumb { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 8px; padding: 3px 12px; border: 2px solid var(--ink); border-radius: 999px; background: #fff; color: var(--ink); font-size: 13px; font-weight: 700; }
.crumb a:hover { text-decoration: underline; }
.crumb span[aria-hidden] { color: var(--ink-3); }
.sh-tx h1 { margin: 0; font-size: 46px; line-height: 1.15; }
.sh-desc { display: inline-block; margin: 10px 0 0; padding: 6px 14px; border: 2px solid var(--ink); border-radius: 10px; background: #fff; color: var(--ink); font-size: 15px; font-weight: 700; }
.sh-char { align-self: flex-end; height: 186px; width: auto; margin-bottom: -6px; filter: drop-shadow(0 0 0 transparent); }
.sub-main { padding-top: 30px; padding-bottom: 20px; min-height: 40vh; }

/* ── 바닥글 ───────────────────────────────────────────────────────── */
.site-foot { margin-top: 64px; background: var(--ink); color: #c4cae8; font-size: 13px; }
.site-foot .wrap { display: grid; grid-template-columns: auto 1fr auto; gap: 32px; align-items: center; padding: 34px 0 38px; }
.site-foot .f-logo { width: 156px; }
.site-foot .f-links { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.site-foot .f-links a { color: #fff; font-weight: 700; }
.site-foot .f-links a:hover { color: var(--yellow); }
.site-foot .f-stamp { width: 104px; opacity: 0.95; }

/* ── 알림 ─────────────────────────────────────────────────────────── */
.toast-box { position: fixed; z-index: 999; left: 50%; bottom: 28px; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast { pointer-events: auto; max-width: min(520px, 90vw); padding: 12px 18px; border: 2px solid var(--ink); border-radius: 12px; background: #fff; color: var(--ink); font-size: 14px; font-weight: 700; box-shadow: var(--drop); animation: toast-in 0.22s ease; }
.toast.err { background: var(--pink-l); }
.toast.ok { background: var(--lime-l); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

/* ── 게임시작 안내 창(2026-10-23 · 설치 안 됨 / 휴대폰) ─────────────── */
body.gm-open { overflow: hidden; }
.gm-modal { position: fixed; z-index: 1000; inset: 0; display: grid; place-items: center; padding: 16px; background: rgba(11, 22, 89, 0.55); animation: gm-fade 0.18s ease; }
.gm-card { position: relative; width: min(520px, 100%); max-height: calc(100vh - 32px); overflow: auto; padding: 26px 26px 22px; border: 3px solid var(--ink); border-radius: 20px; background: #fff; box-shadow: 0 6px 0 var(--ink); text-align: left; }
.gm-face { display: block; width: 72px; height: 72px; margin: -6px 0 6px; }
.gm-card h2 { margin: 0 0 8px; font-family: var(--font-display); font-weight: normal; font-size: 26px; line-height: 1.25; color: var(--ink); }
.gm-card p { margin: 0 0 12px; color: var(--ink-2); font-size: 15px; line-height: 1.65; }
.gm-steps { margin: 0 0 16px; padding: 12px 14px 12px 34px; border: 2px solid var(--ink); border-radius: 12px; background: var(--yellow-l); color: var(--ink); font-size: 14.5px; line-height: 1.8; }
.gm-go { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.gm-note { padding-top: 10px; border-top: 2px dashed var(--line); font-size: 13.5px !important; }
.gm-note a { color: var(--ink); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.gm-x { position: absolute; top: 10px; right: 12px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent; color: var(--ink-2); font-size: 26px; line-height: 1; cursor: pointer; }
.gm-x:hover { background: var(--mist); color: var(--ink); }
@keyframes gm-fade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .gm-modal { animation: none; } }

.av { display: inline-grid; place-items: center; width: 40px; height: 40px; flex: none; border: 2px solid var(--ink); border-radius: 50%; color: #fff; font-family: var(--font-display); font-size: 18px; line-height: 1; user-select: none; }
/* 2026-10-24 프로필 «사진» 얼굴 — 머리글자 동그라미와 같은 자리·같은 테두리 */
img.av { object-fit: cover; background: var(--mist); }
@keyframes kpp-shimmer { from { background-position: -320px 0; } to { background-position: 320px 0; } }
@keyframes kpp-pulse { 50% { box-shadow: 0 0 0 6px rgba(127, 163, 8, 0); } }

/* ── 작은 화면 ────────────────────────────────────────────────────── */
@media (max-width: 980px) {
	.gnb .wrap { grid-template-columns: auto 1fr auto; height: 64px; }
	.gnb nav { display: none; }
	.gnb .logo { width: 120px; height: 64px; grid-column: 1; }
	.gnb .logo img { width: 120px; top: 3px; }
	.gnb .menu-btn { display: grid; place-items: center; grid-column: 3; justify-self: end; width: 44px; height: 44px; border: 2px solid var(--ink); border-radius: 12px; background: #fff; color: var(--ink); box-shadow: 0 3px 0 var(--ink); }
	.gnb .menu-btn svg { width: 22px; height: 22px; }
	.gnb.open nav { display: flex; position: absolute; left: 0; right: 0; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 10px 12px; background: #fff; border-bottom: 3px solid var(--ink); }
	.gnb.open nav.left { top: 64px; padding-right: 12px; }
	.gnb.open nav.right { top: 122px; padding-left: 12px; }
	.site-foot .wrap { grid-template-columns: 1fr; gap: 18px; }
	.sh-char { height: 140px; }
}
@media (max-width: 640px) {
	.subhero { height: 168px; }
	.sh-tx h1 { font-size: 34px; }
	.sh-desc { font-size: 13px; }
	.sh-char { display: none; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition: none !important; } }

/* 2026-10-24 전화인증 다리가 돌아오는 창(/done) */
.done-page { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; background: var(--mist); }
.done-card { width: min(420px, 100%); padding: 30px 26px; border: 3px solid var(--ink); border-radius: 22px; background: #fff; box-shadow: 0 6px 0 rgba(11, 22, 89, 0.18); text-align: center; }
.done-card img { width: 80px; height: 80px; }
.done-card h1 { margin: 10px 0 8px; font-family: var(--font-display); font-weight: normal; font-size: 26px; color: var(--ink); }
.done-card.ok h1 { color: var(--lime-d); }
.done-card.bad h1 { color: var(--pink-d); }
.done-card p { margin: 0; color: var(--ink-2); font-size: 15px; line-height: 1.6; }