/* ─── 색상 모드 ────────────────────────────────────────────
   백코(연분홍)가 기본값이라 스크립트가 돌기 전에도 그대로 그려진다.
   블루밍(하늘색~파스텔 민트)은 data-theme으로 덮어쓴다. */
:root{
  --ink:#5c4462; --ink-2:#8a748f; --sub:#a691b4; --faint:#c9b3d2;
  --line:#f3dfeb; --line-2:#ecd8f0;
  --accent:#ea8ab9; --accent-2:#b4a3ea; --accent-ink:#c95f96;
  --glass:rgba(255,255,255,.68); --glass-line:rgba(255,255,255,.8);
  --field:rgba(253,241,248,.72);
  --avatar-bg:#f7ebf3;
  --body-bg:linear-gradient(165deg,#fdf1f8 0%,#f9eefc 42%,#eff1fe 100%);
  --header-bg:linear-gradient(112deg,#f9bad8 0%,#e9b3ec 46%,#bfc6f6 100%);
  --haze-1:#f9bcd9; --haze-2:#c9b6f5; --haze-3:#b9d4f7; --haze-4:#fad3c4;
  --btn-bg:linear-gradient(110deg,#f29ec6,#b8a6ec);
  --meter-bg:linear-gradient(90deg,#9b8fc7,#efe4f2,#f4a8c8);
  --needle:#5c4462;
  --mask-bg:rgba(92,58,96,.42);
  --toast-bg:rgba(92,68,98,.94);
  --glow:rgba(226,130,180,.36);
  --glow-soft:rgba(196,134,175,.16);
  --glow-mid:rgba(196,134,175,.34);
  --header-glow:rgba(214,140,190,.30);
  --title-shadow:rgba(170,90,140,.28);
  --logo-shadow:rgba(150,70,120,.35);
  --danger:#e2718f; --danger-line:#f6d7e0;
  --shadow:0 8px 28px var(--glow-soft);
  --shadow-sm:0 3px 12px var(--glow-soft);
  --radius:22px;
}
/* 블루밍 — 하늘색에서 파스텔 민트로 */
:root[data-theme="blooming"]{
  --ink:#17414d; --ink-2:#3d6f7e; --sub:#7fa7b3; --faint:#a9ccd6;
  --line:#d3ebf3; --line-2:#dff2f6;
  --accent:#3aaecd; --accent-2:#61c9b4; --accent-ink:#1a8aa8;
  --glass:rgba(255,255,255,.66); --glass-line:rgba(255,255,255,.82);
  --field:rgba(238,251,254,.78);
  --avatar-bg:#e4f2f7;
  --body-bg:linear-gradient(165deg,#f3fcfe 0%,#dff0fa 44%,#dcf6ee 100%);
  --header-bg:linear-gradient(112deg,#8ed3ee 0%,#79cfd9 46%,#a7e5cd 100%);
  --haze-1:#a8dcf2; --haze-2:#9fe0d8; --haze-3:#b6d6f5; --haze-4:#c9f0e2;
  --btn-bg:linear-gradient(110deg,#4bb8d6,#63cdb6);
  --meter-bg:linear-gradient(90deg,#6f9fc4,#e9f5f8,#7ed9c6);
  --needle:#17414d;
  --mask-bg:rgba(20,62,74,.42);
  --toast-bg:rgba(21,62,73,.94);
  --glow:rgba(60,165,195,.34);
  --glow-soft:rgba(60,140,170,.16);
  --glow-mid:rgba(60,140,170,.32);
  --header-glow:rgba(70,165,195,.30);
  --title-shadow:rgba(20,95,120,.26);
  --logo-shadow:rgba(20,85,110,.32);
  --danger:#dd6b83; --danger-line:#f3d6dc;
}
/* 블루레몬 — 연노랑 레몬에서 푸른 바다로 */
:root[data-theme="bluelemon"]{
  --ink:#1d3f5c; --ink-2:#3f6a8a; --sub:#7d9db8; --faint:#b0c8dc;
  --line:#dbe9f4; --line-2:#e7f1f8;
  --accent:#4f9fd4; --accent-2:#e6cb63; --accent-ink:#2f7fb4;
  --glass:rgba(255,255,255,.67); --glass-line:rgba(255,255,255,.82);
  --field:rgba(248,251,244,.8);
  --avatar-bg:#e6eff7;
  --body-bg:linear-gradient(165deg,#fefae2 0%,#eef6ee 42%,#d8e8fb 100%);
  --header-bg:linear-gradient(112deg,#f7e6a0 0%,#a6d8c8 46%,#7fb3e8 100%);
  --haze-1:#f9edaa; --haze-2:#a9dccb; --haze-3:#93c0ef; --haze-4:#cfe6f7;
  --btn-bg:linear-gradient(110deg,#e9cd63,#5aa6dd);
  --meter-bg:linear-gradient(90deg,#4a7fa8,#eef4f2,#efd671);
  --needle:#1d3f5c;
  --mask-bg:rgba(24,58,84,.42);
  --toast-bg:rgba(24,58,84,.94);
  --glow:rgba(90,150,200,.34);
  --glow-soft:rgba(80,130,180,.16);
  --glow-mid:rgba(80,130,180,.32);
  --header-glow:rgba(120,170,215,.30);
  --title-shadow:rgba(30,80,120,.26);
  --logo-shadow:rgba(30,70,110,.32);
  --danger:#dd6b7f; --danger-line:#f2d6db;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  min-height:100vh; color:var(--ink);
  background:var(--body-bg); background-attachment:fixed;
  font-family:"Pretendard","Apple SD Gothic Neo","Malgun Gothic","맑은 고딕",system-ui,sans-serif;
  letter-spacing:-.2px; -webkit-font-smoothing:antialiased;
  transition:color .25s;
}
/* 몽환적인 배경 안개 */
.haze{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.haze i{position:absolute;display:block;border-radius:50%;filter:blur(78px);opacity:.52;
  animation:drift 26s ease-in-out infinite alternate;transition:background-color .35s}
.haze i:nth-child(1){width:44vw;height:44vw;left:-8vw;top:-6vw;background-color:var(--haze-1)}
.haze i:nth-child(2){width:38vw;height:38vw;right:-6vw;top:8vh;background-color:var(--haze-2);animation-delay:-7s}
.haze i:nth-child(3){width:42vw;height:42vw;left:22vw;bottom:-14vw;background-color:var(--haze-3);animation-delay:-14s}
.haze i:nth-child(4){width:26vw;height:26vw;right:14vw;bottom:4vh;background-color:var(--haze-4);animation-delay:-20s}
@keyframes drift{
  from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(3vw,-4vh,0) scale(1.14)}
}
@media(prefers-reduced-motion:reduce){.haze i{animation:none}}
.wrap,header{position:relative;z-index:1}
button{font-family:inherit;cursor:pointer;letter-spacing:-.2px}
input,select{font-family:inherit;letter-spacing:-.2px}

header{
  background:var(--header-bg); color:#fff;padding:26px 20px 20px;text-align:center;
  box-shadow:0 6px 34px var(--header-glow); transition:background .3s;
}
header .brand{display:flex;align-items:center;justify-content:center;gap:11px}
header .brand img{width:42px;height:42px;image-rendering:pixelated;
  filter:drop-shadow(0 2px 6px var(--logo-shadow))}
header h1{margin:0;font-size:25px;text-shadow:0 2px 10px var(--title-shadow)}
header h1 span{opacity:.85;font-weight:500;font-size:19px}
/* 문서형 페이지의 브랜드 표기 — h1은 본문 제목에만 쓴다 */
header .brandname{margin:0;font-size:22px;font-weight:700;line-height:1.3;text-shadow:0 2px 10px var(--title-shadow)}
header p{margin:9px 0 0;font-size:13.5px;color:#fff;opacity:.95;text-shadow:0 1px 6px var(--title-shadow)}

/* 색상 모드 스위치 */
.seg{display:inline-flex;margin-top:13px;gap:3px;padding:3px;border-radius:22px;
  background:rgba(255,255,255,.26);border:1px solid rgba(255,255,255,.55);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.seg button{padding:6px 17px;border:0;background:transparent;border-radius:18px;
  font-size:12.5px;font-weight:700;color:rgba(255,255,255,.92);transition:.16s}
.seg button:hover{background:rgba(255,255,255,.22)}
.seg button[aria-pressed="true"]{background:#fff;color:var(--accent-ink);
  box-shadow:0 2px 8px rgba(0,0,0,.12)}
/* ─── 공통 컴포넌트 ─────────────────────────────────────── */
.card{background:var(--glass);border:1px solid var(--glass-line);border-radius:var(--radius);
  box-shadow:var(--shadow);backdrop-filter:blur(14px) saturate(1.25);-webkit-backdrop-filter:blur(14px) saturate(1.25)}

/* 키보드 사용자를 위한 본문 바로가기 */
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:#fff;color:var(--ink);
  padding:10px 16px;border-radius:0 0 12px 0;font-weight:700;font-size:13px}
.skip:focus{left:0}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:6px}

/* ─── 사이트 내비게이션 ─────────────────────────────────── */
.sitenav{background:rgba(255,255,255,.62);border-bottom:1px solid var(--glass-line);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.sitenav ul{max-width:1240px;margin:0 auto;padding:0 18px;list-style:none;display:flex;
  gap:2px;overflow-x:auto;scrollbar-width:none}
.sitenav ul::-webkit-scrollbar{display:none}
.sitenav a{display:block;padding:13px 15px;font-size:13.5px;font-weight:700;color:var(--ink-2);
  text-decoration:none;white-space:nowrap;border-bottom:3px solid transparent;transition:.16s}
.sitenav a:hover{color:var(--accent-ink)}
.sitenav a[aria-current="page"]{color:var(--accent-ink);border-bottom-color:var(--accent)}

/* ─── 문서형 페이지 ─────────────────────────────────────── */
.page{max-width:840px;margin:0 auto;padding:26px 18px 64px}
.page>.card{padding:28px 30px}
@media(max-width:620px){.page>.card{padding:22px 18px}}
.doc h1{font-size:27px;margin:0 0 10px;line-height:1.35}
.doc .lead{font-size:15px;line-height:1.75;color:var(--ink-2);margin:0 0 8px}
.doc h2{font-size:19px;margin:34px 0 12px;padding-bottom:9px;border-bottom:2px solid var(--line)}
.doc h3{font-size:15.5px;margin:24px 0 8px}
.doc p{font-size:14.5px;line-height:1.85;margin:0 0 14px}
.doc ul,.doc ol{font-size:14.5px;line-height:1.85;padding-left:22px;margin:0 0 14px}
.doc li{margin-bottom:7px}
.doc li::marker{color:var(--accent)}
.doc strong{font-weight:700}
.doc code{background:var(--field);border:1px solid var(--line);border-radius:6px;
  padding:1px 6px;font-size:.9em;font-family:ui-monospace,"Cascadia Mono",Consolas,monospace}
.doc a{color:var(--accent-ink);text-decoration:underline;text-underline-offset:3px}
.doc a:hover{text-decoration-thickness:2px}
.doc hr{border:0;border-top:1px dashed var(--line-2);margin:30px 0}
.doc time{color:var(--sub);font-size:13px}

.doc table{width:100%;border-collapse:collapse;font-size:13.5px;margin:0 0 16px}
.doc th,.doc td{border:1px solid var(--line);padding:9px 11px;text-align:left;vertical-align:top}
.doc thead th{background:var(--field);font-weight:700;white-space:nowrap}
.doc tbody th{background:var(--field);font-weight:700;white-space:nowrap}
.tablewrap{overflow-x:auto;margin:0 0 16px}
.tablewrap table{margin:0}

/* 동물상 카드 */
.typegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px;margin:0 0 18px}
.typecard{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:rgba(255,255,255,.55)}
.typecard .th{padding:10px 14px;color:#fff;font-weight:800;font-size:15px;display:flex;align-items:center;gap:8px;
  text-shadow:0 1px 5px rgba(90,60,80,.22)}
.typecard .tb{padding:12px 14px;font-size:13px;line-height:1.75;color:var(--ink-2)}
.typecard .tb dl{margin:8px 0 0;font-size:12.5px}
.typecard .tb dt{font-weight:700;color:var(--ink);margin-top:7px}
.typecard .tb dd{margin:2px 0 0}

.note{background:var(--field);border:1px solid var(--line);border-left:4px solid var(--accent);
  border-radius:0 14px 14px 0;padding:14px 16px;margin:0 0 18px;font-size:13.5px;line-height:1.8;color:var(--ink-2)}
.note strong{color:var(--ink)}

/* ─── 푸터 ─────────────────────────────────────────────── */
.sitefoot{background:rgba(255,255,255,.55);border-top:1px solid var(--glass-line);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);margin-top:auto}
.sitefoot .inner{max-width:1240px;margin:0 auto;padding:24px 18px 30px;
  display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center;font-size:13px;color:var(--ink-2)}
.sitefoot nav{display:flex;flex-wrap:wrap;gap:6px 18px}
.sitefoot a{color:var(--ink-2);text-decoration:none;font-weight:600}
.sitefoot a:hover{color:var(--accent-ink);text-decoration:underline;text-underline-offset:3px}
.sitefoot .copy{margin-left:auto;color:var(--sub);font-size:12.5px}
@media(max-width:620px){.sitefoot .copy{margin-left:0;width:100%}}

/* 문서형 페이지에서만 푸터를 아래로 밀어둔다 (앱 화면 레이아웃은 건드리지 않음) */
body.doc-page{display:flex;flex-direction:column}
body.doc-page>.page{flex:1 0 auto}

/* ─── 광고 자리 ─────────────────────────────────────────── */
.adbox{margin-top:16px;padding:10px;border:1px solid var(--line);border-radius:16px;
  background:rgba(255,255,255,.5);text-align:center;min-height:0}
.adbox[hidden]{display:none}
.adbox .adlabel{display:block;font-size:10.5px;font-weight:700;color:var(--sub);
  margin-bottom:6px;letter-spacing:.06em}
.adbox ins{display:block}
.page .adbox{max-width:840px;margin:22px auto 0}