/* style.css — 히루룽 팬페이지 공통 스타일 (서브 페이지 공용, 메인과 동일 테마)
   :root 색 값은 메인 index.html 의 :root 와 같은 값을 유지한다. */

:root{
  --main:#79c7e6; --main-dark:#1f6d92; --main-deep:#14506d; --main-light:#ddf0fa;
  --bg:#ffffff; --paper:#f6fbfe; --card:#ffffff; --cream:#eaf5fb;
  --sub:#c8d2da; --silver:#c8d2da; --silver-dark:#8a99a5;
  --logo:#1f6d92; --ink:#232f36; --text:#39505d; --text-mid:#4d6b7a; --text-soft:#68838f;
  --rule:#dde5ea; --page-bg:#c6d2da;
  --fs-display:1; --fs-title:1; --fs-body:1; --fs-label:1;
  --on-main:#08394f;
  --shadow:0 4px 18px rgba(31,80,110,.07); --shadow-hover:0 10px 26px rgba(20,60,85,.14);
  --radius-md:14px; --transition:.2s ease;
  --page-width:1240px;
  --pen:'Noto Sans KR',sans-serif; --serif:'Nanum Myeongjo',serif;
  --script:'Parisienne',cursive; --katuri:'Jua','Noto Sans KR',sans-serif;
}
body.dark{
  --main:#8fd8f2; --main-dark:#aee4f8; --main-deep:#cdeffc; --main-light:#123243;
  --bg:#0f171c; --paper:#0f171c; --card:#18232b; --cream:#12303f;
  --sub:#3c4d59; --silver:#3c4d59; --silver-dark:#7d919e;
  --logo:#aee4f8; --ink:#e0f1f9; --text:#d3e7f0; --text-mid:#a9c3ce; --text-soft:#93aeba;
  --rule:#26333b; --page-bg:#070c10; --on-main:#08222e;
  --shadow:0 4px 18px rgba(0,0,0,.4); --shadow-hover:0 10px 26px rgba(0,0,0,.5);
}

html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
*{ margin:0; padding:0; box-sizing:border-box; }
body{ background:var(--page-bg); font-family:var(--pen); color:var(--ink); min-height:100vh;
      padding:22px 14px 0; font-size:calc(15px * var(--fs-body)); transition:background .3s,color .3s; }
a{ color:inherit; }
.av{ cursor:pointer; }

/* 떠있는 패널 */
.page{ max-width:var(--page-width,1240px); margin:0 auto; background:var(--bg); border-radius:30px;
       box-shadow:0 28px 70px rgba(40,70,95,.28); overflow:hidden; transition:background .3s; }
body.dark .page{ box-shadow:0 28px 70px rgba(0,0,0,.55); }
.wrap{ margin:0; padding:18px 30px 34px; opacity:0; transition:opacity .3s ease; }
body.ready .wrap{ opacity:1; }
@media (prefers-reduced-motion:reduce){ .wrap{ opacity:1; } }
.container{ max-width:var(--page-width,1240px); margin:0 auto; padding:0 20px; }

/* 상단 네비 — 전 페이지 동일 마크업 */
.nav{ background:transparent; padding:12px 22px 26px; position:relative; }
.nav::after{ content:''; position:absolute; left:8%; right:8%; bottom:0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(63,120,160,.28) 18%,rgba(63,120,160,.5) 50%,rgba(63,120,160,.28) 82%,transparent); }
body.dark .nav::after{ background:linear-gradient(90deg,transparent,rgba(140,180,200,.22) 22%,rgba(140,180,200,.36) 50%,rgba(140,180,200,.22) 78%,transparent); }
.nav-inner{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.nav-logo{ display:flex; align-items:baseline; gap:9px; text-decoration:none; margin-right:auto; white-space:nowrap; }
.nav a.nav-logo .lg-script{ font-family:var(--script); font-size:calc(36px * var(--fs-display)); color:var(--logo); line-height:1; }
.nav a.nav-logo .lg-sub{ font-size:calc(11.5px * var(--fs-label)); font-weight:700; letter-spacing:.3em; color:var(--text-soft); }
.nav a.pill{ font-size:calc(14px * var(--fs-body)); font-weight:600; color:var(--ink); padding:9px 16px; border-radius:999px;
  border:1.5px solid var(--main-light); background:var(--card); text-decoration:none; white-space:nowrap; transition:all var(--transition); }
.nav a.pill:hover{ border-color:var(--main); color:var(--main-dark); }
.nav a.pill.active{ background:var(--main); border-color:var(--main); color:var(--on-main); }
body.dark .nav a.pill.active{ color:var(--on-main); }
.theme-switch{ position:relative; width:52px; height:27px; border-radius:999px; border:none; background:var(--main-light); cursor:pointer; flex-shrink:0; margin-left:6px; }
.theme-switch .knob{ position:absolute; top:3px; left:4px; width:21px; height:21px; border-radius:50%; background:#fff;
  display:flex; align-items:center; justify-content:center; font-size:11px; transition:left .25s; box-shadow:0 2px 5px rgba(0,0,0,.15); }
body.dark .theme-switch{ background:#22323c; }
body.dark .theme-switch .knob{ left:27px; background:#0f171c; }

/* 임베드 전용 PC 화면 버튼 */
.open-full{ display:none; font-size:12px; font-weight:700; text-decoration:none; padding:8px 13px; border-radius:999px;
  background:var(--main-dark); color:#fff; white-space:nowrap; }
body.dark .open-full{ color:var(--on-main); }
body.embed .open-full{ display:inline-flex; align-items:center; }

/* 페이지 인트로 */
.kicker{ display:flex; align-items:center; gap:10px; margin-top:24px; }
.kicker .cat{ font-size:calc(11.5px * var(--fs-label)); letter-spacing:3px; font-weight:800; color:var(--main-dark); }
.kicker .date{ margin-left:auto; background:var(--main-dark); color:#fff; font-size:calc(11px * var(--fs-label));
  font-weight:800; letter-spacing:1px; padding:4px 9px; border-radius:6px; }
body.dark .kicker .date{ color:var(--on-main); }
.headline,.page-title{ font-family:var(--pen); font-weight:800; font-size:calc(30px * var(--fs-display)); line-height:1.3; color:var(--ink); margin-top:12px; letter-spacing:-1px; }
.headline em{ font-style:normal; color:var(--main-dark); }
.byline,.page-subtitle{ font-size:calc(13px * var(--fs-body)); font-weight:600; color:var(--text-soft); margin-top:10px; line-height:1.7; }
.seclabel{ display:flex; align-items:center; gap:12px; margin:34px 0 16px; }
.seclabel b{ font-size:calc(11.5px * var(--fs-label)); letter-spacing:3px; font-weight:800; color:var(--main-dark); white-space:nowrap; }
.seclabel .ln{ flex:1; height:1.5px; background:var(--rule); }

/* 카드 */
.card{ background:var(--card); border:1.5px solid var(--rule); border-radius:16px; padding:22px; margin-top:18px; }
.card-title{ font-family:var(--katuri); font-size:calc(19px * var(--fs-title)); color:var(--main-dark); margin-bottom:12px; }

/* 폼 · 버튼 (admin 이 의존) */
.btn{ cursor:pointer; border:1.5px solid var(--rule); background:var(--card); color:var(--ink);
  border-radius:12px; padding:10px 16px; font-family:inherit; font-size:calc(14px * var(--fs-body)); font-weight:700; transition:all var(--transition); }
.btn:hover{ border-color:var(--main); }
.btn-primary{ background:var(--main); color:var(--on-main); border-color:var(--main); }
.btn-primary:hover{ background:var(--main-dark); color:#fff; border-color:var(--main-dark); }
body.dark .btn-primary{ color:var(--on-main); }
body.dark .btn-primary:hover{ color:var(--on-main); }
.input{ width:100%; box-sizing:border-box; padding:11px 14px; border-radius:12px; border:1.5px solid var(--rule);
  font-size:calc(14px * var(--fs-body)); font-family:inherit; background:var(--bg); color:var(--text); outline:none; }
.input:focus{ border-color:var(--main); }
.input-label{ display:block; font-size:calc(12px * var(--fs-label)); font-weight:700; color:var(--text-mid); margin-bottom:5px; }
.form-field{ margin-bottom:14px; }
.hint{ font-size:calc(11.5px * var(--fs-label)); color:var(--text-soft); margin-top:5px; line-height:1.6; word-break:break-all; }
.badge{ display:inline-block; font-size:calc(11px * var(--fs-label)); font-weight:800; border-radius:6px; padding:2px 8px;
  background:var(--main-light); color:var(--main-dark); }
.badge-pink{ background:#ffe3ec; color:#c2597a; }
body.dark .badge-pink{ background:#3c2530; color:#f0a8bf; }

/* 상태 */
.spinner{ width:30px; height:30px; border:3px solid var(--main-light); border-top-color:var(--main-dark); border-radius:50%; margin:30px auto; animation:spin .8s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.empty{ text-align:center; color:var(--text-soft); font-size:calc(14px * var(--fs-body)); padding:38px 10px; line-height:1.7; }
.empty-icon{ font-size:calc(30px * var(--fs-display)); margin-bottom:8px; opacity:.5; }

/* 콘텐츠 칩 (nav pill 과 별개) */
.pill{ border-radius:999px; padding:7px 13px; font-size:calc(13px * var(--fs-body)); font-weight:600; background:var(--main-light); color:var(--main-dark); display:inline-block; }
.pill.no{ background:#ffe2e2; color:#b74d46; }
body.dark .pill.no{ background:#3a2222; color:#eda9a3; }
.tag{ font-size:calc(11px * var(--fs-label)); background:var(--main); color:var(--on-main); border-radius:6px; padding:2px 7px; font-weight:800; }
body.dark .tag{ color:var(--on-main); }

/* 문의 모달 */
.modal{ position:fixed; inset:0; background:rgba(20,40,55,.42); display:none; align-items:center; justify-content:center; z-index:500; padding:16px; }
.modal.on{ display:flex; }
body.embed .modal{ position:absolute; inset:auto 0 auto 0; align-items:flex-start; }
.modal .box{ background:var(--card); border-radius:18px; width:100%; max-width:420px; padding:24px; box-shadow:0 20px 60px rgba(20,40,55,.3); }
.modal .box h4{ font-family:var(--katuri); font-size:calc(18px * var(--fs-title)); color:var(--main-dark); font-weight:800; }
.modal .box p{ font-size:calc(13px * var(--fs-body)); color:var(--text-soft); margin:4px 0 14px; }
.modal .box input,.modal .box textarea{ width:100%; box-sizing:border-box; padding:12px 14px; border-radius:13px; border:1.5px solid var(--rule);
  font-size:calc(14px * var(--fs-body)); margin-bottom:10px; font-family:inherit; background:var(--bg); color:var(--text); outline:none; }
.modal .box input:focus,.modal .box textarea:focus{ border-color:var(--main); }
.modal .box .bt{ display:flex; gap:8px; }
.modal .box .bt button{ flex:1; padding:12px; border-radius:13px; border:none; font-weight:800; cursor:pointer; font-family:inherit; font-size:calc(14px * var(--fs-body)); }
.modal .box .send{ background:var(--main); color:var(--on-main); }
.modal .box .cancel{ background:var(--main-light); color:var(--main-dark); }
body.dark .modal .box .send{ color:var(--on-main); }

/* 상세 모달 오버레이 (임베드 안전: 문서 기준 absolute) */
.ov{ position:absolute; left:0; right:0; background:rgba(12,24,32,.35); display:none; align-items:flex-start; justify-content:center; z-index:500; padding:16px; }
.ov.show{ display:flex; }

/* 토스트 */
.toast{ position:fixed; left:50%; bottom:30px; transform:translateX(-50%) translateY(20px); background:var(--ink); color:var(--bg);
  padding:11px 20px; border-radius:999px; font-size:calc(13px * var(--fs-body)); font-weight:700; opacity:0; pointer-events:none; transition:opacity .25s,transform .25s; z-index:1000; }
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
body.embed .toast{ position:absolute; }

/* 푸터 (패널 밖) */
footer{ text-align:center; color:var(--text-soft); font-size:calc(12px * var(--fs-body)); line-height:1.7; font-weight:600; margin:22px 0 30px; }

@media (max-width:680px){
  body{ padding:12px 8px 0; }
  .page{ border-radius:22px; }
  .wrap{ padding:22px 16px 26px; }
}
@media (max-width:560px){
  .nav a.nav-logo .lg-script{ font-size:calc(30px * var(--fs-display)); }
  .nav a.pill{ padding:7px 12px; font-size:calc(13px * var(--fs-body)); }
}