/* =========================================================
  Dominations Calculator - UI/UX (RESTORED + MUSEUM ARTIFACTS)
  build: 20251226-RESTORE-ALL + MUSEUM + DONATE-FIX + NOTICE-5
  ========================================================= */

/* ------------------------------- 0) Theme ------------------------------- */
:root{
  --bg:#000;
  --text:#fff;
  --muted:#b6bcc7;
  --muted2:#9aa4b2;
  --line:rgba(255,255,255,.12);
  --line2:rgba(255,255,255,.10);
  --good:#49d17d;
  --warn:#ea580c;
  --yellow:#facc15;
  --soft-yellow:#fde68a;
  --red:#ef4444;

  /* home/menu */
  --menu-media-ratio: 20 / 7;
  --menu-caption-h: 52px;

  /* ✅ missile/plane 수치칸 공통 폭 */
  --hp-right-input-w:120px;

  --fs-h1:22px;
  --fs-h2:16px;
  --fs-label:12px;
  --fs-body:13px;
  --fs-input:13px;
  --input-h:42px;
  --input-pad-x:12px;
  --fs-hint:12px;

  --radius-card:16px;
  --radius-md:14px;
  --radius-sm:12px;

  --fw-ui:800;
  --fw-input:600;
  --fw-value:800;

  --green:#2ecc71;
  --green-bg1:rgba(46,204,113,.12);
  --green-bg2:rgba(46,204,113,.04);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
html{ overflow-x:hidden; }
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  overflow-x:hidden;
}
a{ color:inherit; }
img{ max-width:100%; height:auto; display:block; }

/* ------------------------------- 1) Common layout ------------------------------- */
.app-header{
  padding:24px 16px 10px;
  max-width:980px;
  width:100%;
  margin:0 auto;
}
h1{ margin:0 0 6px; font-size:var(--fs-h1); }
.sub{ margin:0; color:var(--muted); font-size:13px; }

.container{
  max-width:980px;
  width:100%;
  margin:0 auto;
  padding:12px 16px 40px;
  display:grid;
  gap:14px;
}
.container.hero{ padding-top:0; padding-bottom:0; }

/* ------------------------------- 2) Card ------------------------------- */
.card{
  background:linear-gradient(to bottom, rgba(255,255,255,.03), rgba(255,255,255,0) 22%), #000;
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius-card);
  padding:16px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 0 0 1px rgba(255,255,255,.06),
    0 14px 36px rgba(0,0,0,.80);
}
.card h2{
  margin:0 0 14px;
  padding-bottom:8px;
  font-size:var(--fs-h2);
  font-weight:var(--fw-ui);
  border-bottom:1px solid rgba(255,255,255,.10);
}
.h3{ margin:0 0 10px; font-size:14px; color:#e5e7eb; }

/* =========================
   크라운 기준 카드 강조 (노란 포인트)
========================= */
.card:first-of-type{
  border: 1px solid rgba(250, 204, 21, .55); /* 노란 테두리 */
  box-shadow:
    0 0 0 1px rgba(250, 204, 21, .18) inset,
    0 0 22px rgba(250, 204, 21, .18);
}

/* ------------------------------- 3) Grid / Labels ------------------------------- */
.grid2{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:12px;
  align-items:stretch;
}
@media (max-width:720px){ .grid2{ grid-template-columns:minmax(0,1fr); } }

.label{
  display:block;
  font-size:var(--fs-label);
  color:var(--muted);
  margin:0 0 6px;
  font-weight:600;
}

/* ------------------------------- 4) Inputs / Selects ------------------------------- */
.input{
  width:100%;
  height:var(--input-h);
  padding:0 var(--input-pad-x);
  background:#000;
  color:var(--text);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  outline:none;
  appearance:none;
  font-size:var(--fs-input);
  font-weight:var(--fw-input);
  line-height:1;
}
.input:focus{ border-color:rgba(250,204,21,.55); }
.input:disabled, .input[readonly]{
  opacity:1 !important;
  -webkit-text-fill-color:inherit;
}

input[type="checkbox"], input[type="radio"]{ accent-color:var(--yellow); }

/* select arrow unify (기존 정상 동작 유지) */
select.input, select.input option{
  font-weight:var(--fw-input) !important;
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  padding-right:36px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
  background-size:14px;
}

/* ------------------------------- 5) Text helpers ------------------------------- */
.hint{
  margin:6px 0 0;
  font-size:var(--fs-hint);
  color:var(--muted2);
  line-height:1.35;
}
.hint.spaced{ margin:12px 0 0 !important; }
.notice-hint{ color:var(--soft-yellow); font-size:13px; }
.hint.nowrap{ white-space:nowrap; }
.hint.right{ margin-left:auto; }
.auto-box > .hint{
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}

label{ line-height:1.25; }
label:has(input[type="checkbox"]), label:has(input[type="radio"]){
  display:flex;
  align-items:center;
  gap:8px;
}
input[type="checkbox"], input[type="radio"]{
  vertical-align:middle;
  margin:0;
  transform:translateY(2px);
}

/* ------------------------------- 6) Details ------------------------------- */
.details{
  margin-top:12px;
  border:1px dashed rgba(255,255,255,.12);
  border-radius:var(--radius-md);
  padding:10px 12px;
}
.details > summary{
  cursor:pointer;
  color:#e5e7eb;
  font-weight:var(--fw-ui);
  font-size:13px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border-radius:var(--radius-sm);
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.10);
}
.details:not([open]) > summary{
  border-color:rgba(250,204,21,.28);
  box-shadow:0 0 0 1px rgba(250,204,21,.10), 0 0 18px rgba(250,204,21,.10);
}
.details > summary::after{
  content:"열기";
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:24px;
  padding:0 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
  color:rgba(250,204,21,.95);
  border:1px solid rgba(250,204,21,.35);
  background:rgba(250,204,21,.08);
}
.details[open] > summary::after{
  content:"닫기";
  color:rgba(255,255,255,.80);
  border-color:rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  box-shadow:none;
}
.details > summary:hover{ border-color:rgba(250,204,21,.40); }

/* ------------------------------- 7) Bonus list (missile) ------------------------------- */
.bonus-list{ margin-top:10px; display:grid; gap:8px; }
.bonus-item{ display:grid; grid-template-columns: 1fr 92px; gap:10px; align-items:center; }
.bonus-item .input:last-child{ text-align:right; }
@media (max-width:520px){
  .bonus-item{ grid-template-columns:1fr 74px; gap:8px; }
}
.tower-hint{ margin:6px 2px 10px; }

/* ------------------------------- 8) Buttons / rows ------------------------------- */
.row{
  margin-top:10px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:flex-start;
}
.row.no-top{ margin-top:0; }
.row.center{ align-items:center; }
.row.actions{ justify-content:space-between; }

.btn{
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.35);
  color:var(--text);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:40px;
  padding:0 14px;
  border-radius:var(--radius-sm);
  cursor:pointer;
  font-weight:800;
  font-size:13px;
  line-height:1;
}
.btn.secondary{ border-color:rgba(250,204,21,.35); }
.btn.ghost{ border-color:rgba(255,255,255,.10); color:var(--muted); }

/* ------------------------------- 9) Result block ------------------------------- */
.result{
  margin-top:12px;
  padding:12px;
  border-radius:var(--radius-md);
  background:#000;
  border:1px solid rgba(255,255,255,.10);
}
.result-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:6px 0;
  font-size:14px;
}
.result-row span{ font-weight:var(--fw-ui) !important; color:rgba(255,255,255,.88); }
.result-row b{
  font-weight:var(--fw-value);
  font-size:18px;
  color:var(--good);
  text-shadow:0 0 10px rgba(73,209,125,.35), 0 0 2px rgba(73,209,125,.60);
}
.result-row.small{ font-size:12px; color:var(--muted2); }
.result-row.small span{ color:var(--muted2); }
.result-row.small b{ color:var(--text); font-size:12px; }

/* ✅ 전설토큰 ↔ 환율 사이 구분선 */
.rate-sep{
  height:1px;
  padding:0;
  margin:8px 0;            /* 위아래 간격 (원하면 6px로 더 줄여도 됨) */
  background:rgba(255,255,255,.10);
}

.mono{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12px;
  color:#e5e7eb;
  background:#000;
  border:1px solid rgba(255,255,255,.10);
  border-radius:var(--radius-sm);
  padding:10px;
  white-space:pre-wrap;
}

/* ------------------------------- 10) Top nav ------------------------------- */
.top-nav{
  max-width:980px;
  width:100%;
  margin:10px auto 0;
  padding:0 18px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.top-nav-btn{
  text-decoration:none;
  padding:10px 12px;
  border-radius:var(--radius-sm);
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.35);
  color:#e5e7eb;
  font-size:13px;
  font-weight:800;
}
.top-nav-btn:hover{ border-color:rgba(250,204,21,.45); }
.top-nav-btn.active{
  border-color:rgba(250,204,21,.75);
  color:var(--yellow);
  font-weight:900;
}

/* ------------------------------- 11) Reference (yellow accent) ------------------------------- */
.card.yellow-accent{
  border:1px solid rgba(250,204,21,.34);
  box-shadow:0 0 0 1px rgba(250,204,21,.10), 0 0 14px rgba(250,204,21,.12), 0 16px 34px rgba(0,0,0,.80);
}
#referenceCard{ border-radius:var(--radius-md); padding:10px 12px; }
#referenceCard .details{ border:none; padding:0; margin:0; }

#referenceDetails > summary{
  display:grid !important;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  column-gap:10px;
  padding:10px 12px !important;
  min-height:36px;
  margin:0;
  color:var(--yellow);
  font-weight:900;
  font-size:14px;
  list-style:none;
  text-align:left;
}
#referenceDetails > summary::before{ content:"▶"; color:var(--yellow); font-size:12px; justify-self:start; }
#referenceDetails[open] > summary::before{ content:"▼"; }
#referenceDetails > summary::after{ justify-self:end; }
#referenceDetails:not([open]) > summary{ border-bottom:none; }
#referenceDetails[open] > summary{
  border-bottom:1px solid rgba(255,255,255,.08);
  padding-bottom:10px;
  margin-bottom:10px;
}
.ref-grid{ margin-top:12px; }

#referenceCard .ref-box{
  background:transparent;
  border:0;
  border-radius:0;
  padding:10px 0;
  border-bottom:1px solid rgba(255,255,255,.08);
  display:flex;
  flex-direction:column;
  height:100%;
}
#referenceCard .ref-box:last-child{ border-bottom:0; }
#referenceCard .h3{ color:rgba(250,204,21,.92); margin-bottom:8px; }
#referenceCard .ref-inner{ flex:1; display:flex; min-height:130px; }
#referenceCard .mono{
  flex:1;
  width:100%;
  background:transparent;
  border:0;
  border-radius:0;
  padding:0;
  color:#e5e7eb;
}

/* ------------------------------- 12) HERO image card ------------------------------- */
.image-card{
  display:block;
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.18);
  background:#000;
  box-shadow:0 0 0 1px rgba(250,204,21,.10), 0 0 24px rgba(250,204,21,.08), 0 14px 36px rgba(0,0,0,.70);
  transition:transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.image-card:hover{
  transform:translateY(-1px);
  border-color:rgba(250,204,21,.35);
  box-shadow:0 0 0 1px rgba(250,204,21,.18), 0 0 36px rgba(250,204,21,.16), 0 18px 44px rgba(0,0,0,.80);
}
.image-card img{ width:100%; height:auto; object-fit:cover; }

/* ------------------------------- 13) Icon button ------------------------------- */
.icon-btn{
  width:32px;
  height:32px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  color:#e5e7eb;
  cursor:pointer;
  font-size:18px;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.icon-btn:hover{ border-color:rgba(250,204,21,.45); }

/* ------------------------------- 14) Need Count Card ------------------------------- */
.need-count-card{
  background:#000 !important;
  border:1px solid rgba(239,68,68,.42) !important;
  box-shadow:0 0 0 1px rgba(239,68,68,.14), 0 0 18px rgba(239,68,68,.18), 0 18px 46px rgba(0,0,0,.85) !important;
  padding:12px !important;
}
.need-count-card > h2{ color:rgba(239,68,68,.92) !important; margin:0 0 8px !important; }
.need-count-body{ padding:0; margin:0; }
.need-count-card .result-row{ padding:10px 0; margin:0; line-height:1.2; }
.need-count-card .result-row + .result-row{ border-top:1px solid rgba(255,255,255,.12); }
.need-count-card .result-row span{ color:rgba(255,255,255,.92) !important; }
.need-count-card .result-row b{ color:var(--good) !important; }
.need-count-card .result{ padding:0 !important; margin:0 !important; background:transparent !important; border:0 !important; box-shadow:none !important; }

/* =========================================================
  ✅ 공통 AUTO 박스 (missile/plane 동일)
  ========================================================= */
.auto-box{
  margin-top:10px;
  padding:12px;
  border-radius:var(--radius-md);
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.02);
}
.auto-title{
  font-weight:900;
  font-size:var(--fs-body);
  color:#e5e7eb;
  margin:0 0 10px;
}
.auto-sub{
  font-size:var(--fs-hint);
  color:var(--muted2);
  line-height:1.4;
  margin:-4px 0 10px;
}
.auto-checks{ display:grid; gap:8px; }
.auto-checks .check-item{
  font-size:var(--fs-body);
  color:#e5e7eb;
  display:flex;
  align-items:center;
  gap:8px;
}
.auto-sum{
  margin-top:10px;
  display:flex;
  justify-content:space-between;
  gap:10px;
  font-size:var(--fs-body);
}
.auto-sum span{ color:var(--muted2); }
.auto-sum b{ color:var(--good); }

/* 모든 연구 완료 (초록) */
.all-research-box{
  border-color:rgba(46,204,113,.35);
  background:linear-gradient(180deg, var(--green-bg1), var(--green-bg2));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 0 0 1px rgba(46,204,113,.10),
    0 0 18px rgba(46,204,113,.10);
}
.all-research-box .check-item span{ color:var(--green); font-weight:600; }
.all-research-box:has(input[type="checkbox"]:checked){
  border-color:var(--green);
  background:rgba(46,204,113,.14);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 0 0 1px rgba(46,204,113,.22),
    0 0 22px rgba(46,204,113,.18);
}
.all-research-box:has(input[type="checkbox"]:checked) .check-item span{ color:var(--green); font-weight:700; }
.all-research-box input[type="checkbox"]{ accent-color:var(--green); }

/* ------------------------------- 제조소 조건 박스/상태 ------------------------------- */
.manu-conditions{
  margin-top:10px;
  border-top:1px solid rgba(255,255,255,.08);
  padding-top:10px;
  display:grid;
  gap:8px;
}
.manu-cond-row{
  display:grid;
  grid-template-columns:1fr auto;
  gap:10px;
  align-items:center;
  padding:10px 12px;
  border-radius:var(--radius-md);
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.02);
}
.manu-cond-text{
  font-size:var(--fs-body);
  color:#e5e7eb;
  line-height:1.35;
  word-break:keep-all;
}
.manu-cond-status{
  min-width:64px;
  height:28px;
  padding:0 12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
  letter-spacing:.2px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.40);
}
.manu-cond-status.is-on{
  color:#baf7d0;
  border-color:rgba(34,197,94,.45);
  box-shadow:0 0 0 1px rgba(34,197,94,.20), 0 0 12px rgba(34,197,94,.25);
}
.manu-cond-status.is-off{
  color:#ffd7d7;
  border-color:rgba(239,68,68,.45);
  box-shadow:0 0 0 1px rgba(239,68,68,.18), 0 0 12px rgba(239,68,68,.20);
}

/* 제조소 연구 완료 여부 */
.manu-research-box{
  padding:12px;
  border-radius:var(--radius-md);
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.02);
}
.manu-research-title{
  font-weight:900;
  font-size:var(--fs-body);
  color:#e5e7eb;
  margin:0 0 10px;
}
.manu-research-checks{ display:grid; gap:8px; }
.manu-research-item{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:var(--fs-body);
  color:#e5e7eb;
}

/* 제조소 장비 슬롯 레이아웃 */
.manu-block .grid2{
  display:grid;
  grid-template-columns:minmax(0,1fr) 120px;
  gap:10px;
  align-items:end;
}
@media (max-width:520px){
  .manu-block .grid2{ grid-template-columns:minmax(0,1fr) 102px; gap:8px; }
}

/* 제조소: 받는 피해 감소(칩) */
.manu-sub-block{
  margin-top:12px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radius-md);
  background:rgba(0,0,0,.35);
  padding:12px;
}
.manu-sub-block .auto-title,
.manu-sub-block .hp-bonus-block-title{
  position:relative;
  top:-4px;
  margin:0 0 10px;
  font-weight:var(--fw-ui);
}
.reduce-wrap{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:10px;
  margin-top:10px;
}
.reduce-chip{
  width:100%;
  min-height:44px;
  border-radius:var(--radius-md);
  background:#000;
  border:1px solid rgba(250,204,21,.35);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 0 0 1px rgba(250,204,21,.18),
    0 0 12px rgba(250,204,21,.14);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  line-height:1.1;
  font-size:var(--fs-body);
  font-weight:600;
  color:#e5e7eb;
  white-space:normal;
  word-break:keep-all;
}

/* =========================================================
  ✅ Plane 협의회/유물/침략 감소: 2박스 통일
  ========================================================= */
.hp-rows{ display:grid; gap:10px; margin-top:10px; }

.hp-rowbox{
  display:grid;
  grid-template-columns:1fr var(--hp-right-input-w);
  gap:10px;
  align-items:center;
}
.hp-rowbox-left{
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.35);
  border-radius:var(--radius-card);
  padding:12px 14px;
  font-weight:900;
  font-size:13px;
  line-height:1.2;
  color:#e5e7eb;
}
.hp-rowbox-right{
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.35);
  border-radius:var(--radius-card);
  height:44px;
  padding:0 14px;
  text-align:right;
  font-weight:900;
  font-size:14px;
  color:#e5e7eb;
  outline:none;
  box-shadow:none;
}

.hp-yellow .hp-rowbox-left, .hp-yellow .hp-rowbox-right{ color:var(--yellow); }
.hp-red .hp-rowbox-left, .hp-red .hp-rowbox-right{ color:var(--red); }

.hp-rowbox-desc{
  font-size:var(--fs-hint);
  color:var(--muted2);
  text-align:right;
  padding:2px 6px 0 0;
}
.hp-rowbox-subdesc{
  font-size:var(--fs-hint);
  color:var(--muted2);
  margin-top:-4px;
  text-align:right;
  padding-right:6px;
}
@media (max-width:520px){
  .hp-rowbox{ grid-template-columns:1fr var(--hp-right-input-w); }
}

/* plane radio row */
.radio-row{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
}
.radio-row{ margin-bottom:12px; }
.radio-row label{ font-size:13px; font-weight:900; color:#e5e7eb; }
.radio-row input[type="radio"]{ transform:translateY(1px); }

/* INPUT/SELECT 전용 폰트 분리(정상 코드 유지) */
input.input, select.input, .hp-rowbox-right{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans KR",Arial,sans-serif;
  font-weight:600;
}
/* 길드 보너스 라벨 위 여백(정상 코드 유지) */
#guildGciBlock .label{ margin-top:16px; }

/* =========================================================
  ✅ HOME / MENU (index.html)
  ========================================================= */
body.home-page{ background:var(--bg); }

.home-wrap{
  max-width:980px;
  width:100%;
  margin:0 auto;
  padding:14px 16px 44px;
  display:grid;
  gap:14px;
}

/* 메인 배너 */
.banner-main-wrap{
  border-radius:var(--radius-card);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  background:#000;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 0 0 1px rgba(255,255,255,.06),
    0 14px 36px rgba(0,0,0,.80);
}
.banner-main{ width:100%; height:auto; object-fit:cover; }

/* 공지 */
.notice-box{
  background:linear-gradient(to bottom, rgba(255,255,255,.03), rgba(255,255,255,0) 22%), #000;
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius-card);
  padding:14px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 0 0 1px rgba(255,255,255,.06),
    0 14px 36px rgba(0,0,0,.80);
}
.notice-head{ display:grid; gap:8px; margin-bottom:10px; }
.notice-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:fit-content;
  height:26px;
  padding:0 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
  letter-spacing:.2px;
  color:rgba(250,204,21,.95);
  border:1px solid rgba(250,204,21,.35);
  background:rgba(250,204,21,.08);
}
.notice-fixed{ color:var(--muted); font-size:13px; line-height:1.4; }
.notice-list{
  margin:10px 0 12px;
  padding-left:18px;
  color:#e5e7eb;
  font-size:13px;
  line-height:1.45;
}
.notice-list li{ margin:6px 0; }
.hl-yellow{ color:var(--yellow); font-weight:900; }
.hl-darkgreen{ color:rgba(73,209,125,.95); font-weight:900; }

.kakao-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:100%;
  text-decoration:none;
  border-radius:var(--radius-md);
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.04);
  color:#e5e7eb;
  font-weight:900;
  font-size:13px;
  padding:12px 14px;
}
.kakao-btn:hover{ border-color:rgba(250,204,21,.45); }

/* divider */
.calc-divider{
  border-radius:999px;
  padding:10px 12px;
  text-align:center;
  font-size:13px;
  font-weight:1000;
  letter-spacing:.4px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.03);
}
.calc-divider.calc-red{
  border-color:rgba(239,68,68,.40);
  box-shadow:0 0 0 1px rgba(239,68,68,.14), 0 0 18px rgba(239,68,68,.14);
}

/* home grid */
.home-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:12px;
}
@media (max-width:720px){ .home-grid{ grid-template-columns:minmax(0,1fr); } }
.calc-grid{ margin-top:0; }

/* menu cards */
.menu-card{
  display:flex;
  flex-direction:column;
  text-decoration:none;
  border-radius:var(--radius-card);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  background:#000;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 0 0 1px rgba(255,255,255,.06),
    0 14px 36px rgba(0,0,0,.80);
  transition:transform .15s ease, border-color .15s ease, box-shadow .15s ease;
  min-width:0;
}
.menu-card:hover{
  transform:translateY(-1px);
  border-color:rgba(250,204,21,.35);
  box-shadow:0 0 0 1px rgba(250,204,21,.18), 0 0 26px rgba(250,204,21,.12), 0 18px 44px rgba(0,0,0,.80);
}
.menu-card-media{
  width:100%;
  aspect-ratio:var(--menu-media-ratio);
  background:#000;
  overflow:hidden;
  position:relative;
}
.menu-card-media img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
}
.menu-card-footer{
  min-height:var(--menu-caption-h);
  margin-top:auto;
  padding:12px 14px;
  border-top:1px solid rgba(255,255,255,.10);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.menu-card-title{
  font-size:13px;
  font-weight:1000;
  color:#e5e7eb;
  line-height:1.2;
}
.menu-card-meta{ display:flex; align-items:center; gap:8px; }

/* status badge */
.status-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:26px;
  padding:0 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:1000;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.04);
  color:#e5e7eb;
}
.status-badge.is-live{
  border-color:rgba(73,209,125,.40);
  background:rgba(73,209,125,.10);
  color:rgba(186,247,208,.98);
}

/* ✅ CLICK 배지(주황, 테두리/글로우 “조금 더 진하게”) */
.status-badge.is-click{
  border-color: rgba(234, 88, 12, .98);
  background: rgba(234, 88, 12, .18);
  color: rgba(234, 88, 12, .98);
  box-shadow:
    0 0 0 1px rgba(234, 88, 12, .26),
    0 0 18px rgba(234, 88, 12, .45),
    0 0 38px rgba(234, 88, 12, .28);
}

/* ✅ 추천/비추천 배지 (status-badge 스타일 그대로 사용) */
.status-badge.is-good{
  border-color: rgba(73,209,125,.90);
  background: rgba(73,209,125,.14);
  color: rgba(186,247,208,.98);
  box-shadow:
    0 0 0 1px rgba(73,209,125,.22),
    0 0 18px rgba(73,209,125,.45),
    0 0 38px rgba(73,209,125,.26);
}

.status-badge.is-bad{
  border-color: rgba(239,68,68,.95);
  background: rgba(239,68,68,.14);
  color: rgba(254,202,202,.98);
  box-shadow:
    0 0 0 1px rgba(239,68,68,.22),
    0 0 18px rgba(239,68,68,.45),
    0 0 38px rgba(239,68,68,.26);
}

/* footer / ads */
.site-footer{
  text-align:center;
  margin:48px 0 24px;
  font-size:13px;
  opacity:.7;
}
.footer-link{ color:inherit; text-decoration:none; }
.footer-link:hover{ text-decoration:underline; }
.ads-wrapper{
  max-width:1200px;
  margin:32px auto;
  padding:0 12px;
}

/* =========================================================
  ✅ DONATE 카드 공통(모든 페이지)
  1) footer 제거
  2) 이미지 우측상단 CLICK 배지 사용(HTML에서 donate-badge를 media에 넣어야 완벽)
  3) 크기: 메인 카드(2열) 한 칸 가로폭과 동일
  ========================================================= */
.menu-card.is-donate .menu-card-footer{ display:none; }

/* index(메인)의 donate 섹션: 기존처럼 “반 칸 폭” 중앙정렬 */
.home-donate{ display:flex; justify-content:center; }
@media (min-width:721px){
  .home-donate{
    max-width: calc((980px - 12px) / 2);
    margin-left:auto;
    margin-right:auto;
    width:100%;
  }
}

/* 내부 페이지(missile/plane/airdefense/artifacts 등) 하단 donate: 반 칸 폭 중앙정렬 */
body:not(.home-page) .home-grid.calc-grid{
  grid-template-columns:1fr;
  max-width: calc((980px - 12px) / 2);
  margin-left:auto;
  margin-right:auto;
}

/* donate 이미지 비율 (기존 제공값 유지) */
.menu-card.is-donate .menu-card-media{ aspect-ratio:1536 / 866; }

/* media 안 우측 상단 배지 */
.menu-card.is-donate .donate-badge{
  position:absolute;
  top:12px;
  right:12px;
  z-index:2;
  pointer-events:none;
}

/* =========================================================
  ✅ Artifact page (Museum)
  ========================================================= */

/* 필터 바 */
.artifact-filterbar{
  margin-top:10px;
  display:flex;
  align-items:center;
  gap:10px;
}
.artifact-filterbar .artifact-filter-check{
  font-size:12px;
  font-weight:800;
  color:#e5e7eb;
}
.artifact-filterbar #clearFilters{ margin-left:auto; }
@media (max-width:520px){
  .artifact-filterbar{ flex-wrap:wrap; align-items:flex-start; }
  .artifact-filterbar #clearFilters{ margin-left:0; width:100%; }
}

/* 체크칩 */
.artifact-chip-wrap{ margin-top:12px; gap:8px; flex-wrap:wrap; }
.artifact-check-item{
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.04);
  font-size:11px;
  font-weight:650;
  line-height:1.2;
  color:#e5e7eb;
}
.artifact-check-item:hover{
  border-color:rgba(250,204,21,.45);
  background:rgba(250,204,21,.08);
}

/* ✅ 유물 목록 헤더(항목 종류) — “정상 디자인” 복구 */
.artifact-head{
  display:grid;
  grid-template-columns: 190px 180px 72px minmax(0,1fr) 90px 100px;
  gap:10px;
  padding:10px 10px 10px;
  margin-top:8px;
  border-bottom:1px solid rgba(250,204,21,.22); /* ✅ 노란 경계선 */
  color:rgba(229,231,235,.85);
  font-size:12px;
  font-weight:1000;
  letter-spacing:.2px;
}
.artifact-head .right{ text-align:right; }
.artifact-head .center{ text-align:center; }
@media (max-width:720px){ .artifact-head{ display:none; } }

/* 리스트 */
.artifact-list{
  display:grid;
  gap:10px;
  margin-top:10px;
}

/* 카드 */
.artifact-item{
  background:linear-gradient(to bottom, rgba(255,255,255,.04), rgba(255,255,255,.01));
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 0 0 1px rgba(255,255,255,.06),
    0 14px 30px rgba(0,0,0,.70);

  display:grid;
  grid-template-columns: 190px 180px 72px minmax(0,1fr) 90px 100px;
  gap:10px;
  padding:10px 10px;
  align-items:start;
}

/* 등급별 테두리 */
.artifact-item.is-legend{
  border-color:rgba(234,88,12,.55);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 0 0 1px rgba(234,88,12,.12),
    0 14px 30px rgba(0,0,0,.70);
}
.artifact-item.is-myth{
  border-color:rgba(125,211,252,.55);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 0 0 1px rgba(125,211,252,.12),
    0 14px 30px rgba(0,0,0,.70);
}

/* 이름/영문 */
.artifact-name{
  font-weight:1000;
  font-size:13px;
  color:#fff;
  line-height:1.25;
}
.artifact-en{
  font-size:11px;
  color:var(--muted2);
  line-height:1.25;
  word-break:break-word;
}

/* 등급 */
.artifact-grade{
  display:flex;
  justify-content:center;
  align-items:flex-start;
  padding-top:1px;
}
.artifact-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
  min-width:52px;
  height:26px;
  padding:0 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
  line-height:1;

  /* 기본=전설 */
  color:rgba(234,88,12,.98);
  border:1px solid rgba(234,88,12,.55);
  background:rgba(234,88,12,.10);
  box-shadow:
    0 0 0 1px rgba(234,88,12,.14),
    0 0 16px rgba(234,88,12,.12);
}
.artifact-badge.is-legend{
  color:rgba(234,88,12,.98);
  border-color:rgba(234,88,12,.55);
  background:rgba(234,88,12,.10);
}
.artifact-badge.is-myth{
  color:rgba(125,211,252,.98);
  border-color:rgba(125,211,252,.55);
  background:rgba(125,211,252,.10);
  box-shadow:
    0 0 0 1px rgba(125,211,252,.18),
    0 0 18px rgba(125,211,252,.18),
    0 0 36px rgba(125,211,252,.10);
}

/* 옵션/수치 */
.artifact-ov{ grid-column:4 / 6; }

/* ✅ 유물 옵션 표 경계선(“사라짐” 복구 핵심) */
.ov-table{
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  overflow:hidden;
  background:rgba(255,255,255,.02);
}
.ov-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) 110px;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.ov-row:last-child{ border-bottom:none; }
.ov-opt, .ov-val{
  padding:10px 12px;
  min-height:38px;
  display:flex;
  align-items:center;
  line-height:1.35;
}
.ov-opt{
  color:#e5e7eb;
  font-weight:700;
  border-right:1px solid rgba(255,255,255,.12);
}
.ov-val{
  justify-content:flex-end;
  text-align:right;
  color:rgba(250,204,21,.92);
  font-weight:1000;
  white-space:nowrap;
}

@media (min-width:721px){
  .ov-table{ border-radius:12px; }
  .ov-row{ grid-template-columns:minmax(0,1fr) 82px; }
  .ov-opt, .ov-val{
    padding:7px 10px;
    min-height:30px;
    font-size:12px;
  }
  .ov-opt{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    font-weight:650;
  }
  .ov-val{ font-size:12px; }
}

/* 가격 */
.artifact-price{
  display:flex;
  justify-content:flex-end;
  align-items:flex-start;
  padding-top:2px;
  white-space:nowrap;
}
.price-wrap{
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-weight:1000;
  color:var(--yellow);
  font-size:13px;
}
.token-icon{
  width:16px;
  height:16px;
  object-fit:contain;
  filter:drop-shadow(0 0 10px rgba(250,204,21,.18));
}
.price-text{
  font-weight:1000;
  color:rgba(255,255,255,.88);
  font-size:12px;
}

/* 빈 결과 */
.artifact-empty{
  text-align:center;
  padding:24px;
  color:var(--muted2);
  font-size:13px;
  border:1px dashed rgba(255,255,255,.12);
  border-radius:14px;
  background:rgba(255,255,255,.02);
}

/* 모바일 */
@media (max-width:720px){
  .artifact-item{
    grid-template-columns:1fr 88px;
    gap:10px;
    padding:10px 10px;
  }
  .artifact-name{ grid-column:1 / 2; font-size:14px; }
  .artifact-en{ grid-column:1 / 2; margin-top:-6px; font-size:12px; }
  .artifact-grade{
    grid-column:2 / 3;
    grid-row:1 / 3;
    justify-content:flex-end;
  }
  .artifact-ov{ grid-column:1 / -1; }
  .ov-row{ grid-template-columns:minmax(0,1fr) 88px; }
  .artifact-price{
    grid-column:1 / -1;
    justify-content:flex-end;
    padding-top:0;
  }
}

/* =========================================================
   ✅ 공지사항: 최신 5줄만 표시
   ========================================================= */
.notice-list li:nth-child(n+6){ display:none; }

/* ✅ 환율 블록: 오른쪽 2줄 묶음 정렬 */
#rateRow{
  align-items:flex-start; /* 왼쪽(텍스트)와 오른쪽(2줄) 위 정렬 */
}

#rateRow .rate-left{
  display:flex;
  flex-direction:column;
  gap:2px; /* 제목과 ECB 문구 간격 줄이기 */
}

#rateRow .rate-note{
  margin-top:2px; /* 기존보다 촘촘하게 */
  text-align:left;
}

/* 오른쪽: 2줄 + 버튼을 하나로 */
#rateRow .rate-block{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:6px;
}

/* 환율 2줄 묶음 정렬 */
.rate-stack{
  display:flex;
  flex-direction:column;
  gap:6px;
  text-align:right;
  min-width: 230px;
}

.rate-line{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
}

.rate-fixed{
  opacity:.9;
}

.rate-value{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-width: 150px;
  justify-content:flex-end;
}

.rate-unit{
  opacity:.95;
}

/* 텍스트형 새로고침 버튼 + ECB 우측 정렬 */
.rate-note{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:6px;
}

.rate-refresh-btn{
  height:26px;
  padding:0 10px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.04);
  color:#e5e7eb;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
}
.rate-refresh-btn:disabled{
  opacity:.55;
  cursor:default;
}

.rate-note-text{
  text-align:right;
  opacity:.85;
}

/* 숫자만 로딩 스피너 표시 */
#rateRow.rate-loading .rate-number{
  opacity:0.35;
}

.rate-spinner{
  display:none;
  width:18px;
  height:18px;
  margin-left:6px;
}

#rateRow.rate-loading .rate-spinner{
  display:inline-flex;
}

/* 둥근 바 스피너 애니메이션 */
.spinner-svg{
  width:18px;
  height:18px;
  animation:spin 0.9s linear infinite;
}

.spinner-svg rect{
  fill: rgba(229,231,235,.95); /* 기본 밝은 회색 */
  opacity:.10;
}

/* 12개의 막대에 그라데이션(진해졌다 옅어지는 느낌) */
.spinner-svg rect:nth-child(1) {opacity:1.00;}
.spinner-svg rect:nth-child(2) {opacity:0.85;}
.spinner-svg rect:nth-child(3) {opacity:0.72;}
.spinner-svg rect:nth-child(4) {opacity:0.60;}
.spinner-svg rect:nth-child(5) {opacity:0.50;}
.spinner-svg rect:nth-child(6) {opacity:0.42;}
.spinner-svg rect:nth-child(7) {opacity:0.35;}
.spinner-svg rect:nth-child(8) {opacity:0.30;}
.spinner-svg rect:nth-child(9) {opacity:0.26;}
.spinner-svg rect:nth-child(10){opacity:0.22;}
.spinner-svg rect:nth-child(11){opacity:0.18;}
.spinner-svg rect:nth-child(12){opacity:0.14;}

@keyframes spin{
  to { transform: rotate(360deg); }
}


/* ✅ 새로고침: 아이콘 대신 텍스트 박스 버튼 */
.rate-btn{
  height:28px;
  padding:0 10px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  color:#e5e7eb;
  font-weight:800;
  font-size:12px;
  cursor:pointer;
  transition:transform .08s ease, background .12s ease, border-color .12s ease;
}

.rate-btn:hover{
  background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.20);
}

.rate-btn:active{
  transform:scale(.98);
}

.rate-btn:disabled{
  opacity:.55;
  cursor:not-allowed;
}


.rate-refresh{
  opacity:.6;
}
.rate-refresh:hover{ opacity:1; }

/* 로딩 중: 새로고침 아이콘 회전 */
.rate-loading .rate-refresh{
  animation: spin .8s linear infinite;
  opacity: .9;
}

/* 로딩 중: 환율 숫자 자리 스켈레톤(반짝임) */
.rate-loading #outUsdKrwRate{
  display:inline-block;
  min-width: 88px;        /* 숫자 자리가 흔들리지 않게 */
  height: 14px;
  border-radius: 8px;
  color: transparent;     /* 텍스트 숨김 */
  background: rgba(255,255,255,.10);
  position: relative;
  overflow: hidden;
  vertical-align: middle;
}

.rate-loading #outUsdKrwRate::after{
  content:"";
  position:absolute;
  inset:0;
  transform: translateX(-120%);
  background: linear-gradient(90deg,
    transparent,
    rgba(255,255,255,.20),
    transparent
  );
  animation: shine 1.1s ease-in-out infinite;
}

@keyframes shine{
  to { transform: translateX(120%); }
}
/* =========================
   Crown value inline icon
========================= */
.value-with-icon{
  display:inline-flex;
  align-items:center;
  justify-content:flex-end;
  gap:6px;
  white-space:nowrap;
}

.value-text{
  display:inline-block;
  line-height:1;
}

.crown-icon{
  width:16px;
  height:16px;
  display:inline-block;      /* ✅ block 금지 (줄바꿈 원인) */
  vertical-align:middle;
  flex:0 0 auto;
}

/* 환율 안내 문구 여백 조정 */
.rate-note{
  margin-top:-1px;   /* 기존 6px → 2px */
  text-align:right;

}
/* 환율 새로고침 버튼 크기 축소 */
.rate-refresh{
  width:22px;
  height:22px;
  font-size:14px;   /* 아이콘 크기 */
  padding:0;
  line-height:1;
}

/* =========================================================
  ✅ Council page (Advisors)
  - 전설: 주황(is-legend)
  - 특급: 보라(is-special)
  - ✅ 영문 컬럼 제거 + 반응형 개선 + 경계선 추가
  ========================================================= */

.council-rk{ display:contents; }  /* PC에서는 role/kind가 원래처럼 그리드 칸을 차지 */


/* 헤더(항목 종류) */
.council-head{
  display:grid;
  /* 이름 / 역할 / 종류 / 등급 / 옵션 / (수치=숨김 처리용 0) */
  grid-template-columns: minmax(160px, 1.2fr) 90px 90px 72px minmax(260px, 2fr) 0px;
  gap:10px;
  padding:10px 10px 10px;
  margin-top:8px;
  border-bottom:1px solid rgba(250,204,21,.22);
  color:rgba(229,231,235,.85);
  font-size:12px;
  font-weight:1000;
  letter-spacing:.2px;
}
.council-head .right{ text-align:right; }
.council-head .center{ text-align:center; }

/* ✅ '수치' 헤더는 공간만 잡아먹어서 숨김 (옵션표 안에 값이 이미 있음) */
.council-head > div:last-child{ display:none; }

@media (max-width:720px){ .council-head{ display:none; } }

/* 리스트 */
.council-list{
  display:grid;
  gap:10px;
  margin-top:10px;
}

/* 카드 */
.council-item{
  background:linear-gradient(to bottom, rgba(255,255,255,.04), rgba(255,255,255,.01));
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 0 0 1px rgba(255,255,255,.06),
    0 14px 30px rgba(0,0,0,.70);

  display:grid;
  grid-template-columns: minmax(160px, 1.2fr) 90px 90px 72px minmax(260px, 2fr) 0px;
  gap:10px;
  padding:10px 10px;
  align-items:start;

  /* ✅ 좁은 창에서 내부 테이블이 튀어나오며 깨지는 현상 방지 */
  min-width:0;
  overflow:hidden;
}

/* 등급별 테두리 */
.council-item.is-legend{
  border-color:rgba(234,88,12,.55);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 0 0 1px rgba(234,88,12,.12),
    0 14px 30px rgba(0,0,0,.70);
}

/* ✅ 특급(보라) */
.council-item.is-special{
  border-color:rgba(168,85,247,.55);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 0 0 1px rgba(168,85,247,.14),
    0 14px 30px rgba(0,0,0,.70);
}

/* 이름 */
.council-name{
  font-weight:1000;
  font-size:13px;
  color:#fff;
  line-height:1.25;

  /* ✅ 이름/역할 사이 경계선 */
  padding-right:10px;
  border-right:1px solid rgba(255,255,255,.10);
}

/* 역할/종류 */
.council-role, .council-kind{
  font-size:12px;
  color:#e5e7eb;
  font-weight:800;
  display:flex;
  justify-content:center;

  /* ✅ 역할/종류 사이 경계선(역할에만) */
  min-width:0;
}
.council-role{
  padding:0 10px;
  border-right:1px solid rgba(255,255,255,.10);
}
.council-kind{
  padding-left:10px;
}

/* 등급 배지 */
.council-grade{
  display:flex;
  justify-content:center;
  align-items:flex-start;
  padding-top:1px;
}
.council-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
  min-width:52px;
  height:26px;
  padding:0 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
  line-height:1;
}

/* 전설(주황) */
.council-badge.is-legend{
  color:rgba(234,88,12,.98);
  border:1px solid rgba(234,88,12,.55);
  background:rgba(234,88,12,.10);
  box-shadow:
    0 0 0 1px rgba(234,88,12,.14),
    0 0 16px rgba(234,88,12,.12);
}

/* 특급(보라) */
.council-badge.is-special{
  color:rgba(168,85,247,.98);
  border:1px solid rgba(168,85,247,.55);
  background:rgba(168,85,247,.10);
  box-shadow:
    0 0 0 1px rgba(168,85,247,.18),
    0 0 18px rgba(168,85,247,.18),
    0 0 36px rgba(168,85,247,.10);
}

/* 옵션 표는 기존 ov-* 재사용 */
.council-ov{
  grid-column:5 / 6;
  min-width:0;  /* ✅ 좁은 폭에서 테이블이 컨테이너 밖으로 안 튀게 */
}

/* 수치 칸은 기존처럼 숨김(자리도 0px) */
.council-val{ display:none; }

/* ✅ 헤더에도 동일 경계선 (이름/역할/종류 사이) */
.council-head > div:nth-child(1){
  padding-right:10px;
  border-right:1px solid rgba(255,255,255,.10);
}
.council-head > div:nth-child(2){
  padding:0 10px;
  border-right:1px solid rgba(255,255,255,.10);
}
.council-head > div:nth-child(3){
  padding-left:10px;
}

/* ✅ 중간 폭(데스크탑 창 줄였을 때)에서도 자연스럽게 압축 */
@media (max-width:920px){
  .council-head,
  .council-item{
    grid-template-columns: minmax(130px, 1.1fr) 80px 80px 68px minmax(220px, 2fr) 0px;
    gap:8px;
  }
}

/* 모바일 */
@media (max-width:720px){

  /* 모바일: 1줄=이름+등급 / 2줄=학자 | 전쟁 / 3줄=옵션표 */
  .council-item{
    display:grid;
    grid-template-columns: 1fr 88px;   /* 이름 / 등급 */
    grid-template-rows: auto auto auto;
    gap:10px;
    padding:10px 10px;
    min-width:0;
    overflow:hidden;
  }

  /* 1줄: 이름 */
  .council-name{
    grid-column:1 / 2;
    grid-row:1 / 2;
    font-size:14px;
    min-width:0;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    border-right:none; /* 모바일에서는 이름 옆 세로선 제거 */
    padding-right:0;
  }

  /* 1줄: 등급 */
  .council-grade{
    grid-column:2 / 3;
    grid-row:1 / 2;
    justify-content:flex-end;
    align-items:flex-start;
  }

  /* 2줄: 역할|종류를 한 줄로 (래퍼가 한 줄을 책임짐) */
  .council-rk{
    grid-column:1 / -1;
    grid-row:2 / 3;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:0;
    white-space:nowrap; /* ✅ 무조건 한 줄 */
  }

  /* 모바일에서는 좌측정렬 */
  .council-rk .council-role,
  .council-rk .council-kind{
    display:inline-flex;
    align-items:center;
    justify-content:flex-start;
    text-align:left;
    font-size:12px;
    font-weight:800;
    color:#e5e7eb;
    margin:0;
    padding:0;
    border:0;
  }

  /* ✅ 학자 | 전쟁 구분선 */
  .council-rk .council-role{
    padding-right:12px;
    border-right:1px solid rgba(255,255,255,.18);
    margin-right:12px;
  }

  /* 3줄: 옵션 표 */
  .council-ov{
    grid-column:1 / -1;
    grid-row:3 / 4;
  }

  .ov-row{ grid-template-columns:minmax(0,1fr) 88px; }
}
/* =========================================================
  ✅ Mobile/All pages: 가로 밀림(수평 오버플로우) 방지 + 중앙정렬 보정
  ========================================================= */

/* iOS 안전영역(노치) 대응 + 전체 폭 고정 */
html, body{
  width:100%;
  max-width:100%;
  overflow-x:clip; /* 가로 삐져나감 차단 (지원 안되면 아래 hidden이 먹음) */
  overflow-x:hidden;
}

/* 컨텐츠가 노치/인앱브라우저에 밀리지 않게 */
body{
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* 모든 핵심 래퍼는 항상 "가운데 + 화면폭에 맞춤" */
.app-header,
.container,
.home-wrap,
.top-nav,
.ads-wrapper{
  width:100%;
  max-width:980px;
  margin-left:auto;
  margin-right:auto;
}

/* grid/flex에서 자식이 폭을 밀어내는 경우 방지 */
.container, .home-wrap, .card,
.council-item, .artifact-item,
.ov-table, .ov-row,
.menu-card, .menu-card-media{
  min-width:0;
  max-width:100%;
}

/* 모바일에서 일부 min-width 때문에 가로가 튀는 걸 방지 (특히 index의 환율 블록) */
@media (max-width:720px){
  .rate-stack, .rate-value, .rate-line{
    min-width:0 !important;
  }
}

/* =========================================================
  ✅ AdSense: 모바일/인앱브라우저 우측 쏠림 방지 (폭 강제 고정)
  ========================================================= */

.ad-wrap{
  width:100%;
  max-width:980px;
  margin:18px auto 0;
  padding:0 16px;
  display:flex;
  justify-content:center;
  overflow:hidden; /* 광고가 삐져나오면 여기서 잘라냄 */
}

/* ins 자체가 화면을 밀어내지 못하게 */
ins.adsbygoogle{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  overflow:hidden !important;
}

/* 모바일에서 광고가 넓게 잡히는 경우 대비 */
@media (max-width:720px){
  .ad-wrap{ padding:0 12px; }
}
/* =========================================================
  ✅ Desktop compact mode (큰 화면에서만 더 컴팩트하게)
  - 모바일/좁은 창 반응형은 그대로 유지
  ========================================================= */
@media (min-width: 1200px){
  :root{
    /* 글자/입력/라운드 등을 살짝 줄여서 전체가 덜 커 보이게 */
    --fs-h1:20px;
    --fs-h2:15px;
    --fs-body:12.5px;
    --fs-input:12.5px;

    --input-h:40px;

    --radius-card:14px;
    --radius-md:13px;
    --radius-sm:11px;
  }

  /* 메인 래퍼/컨테이너의 폭을 살짝 줄여서 '축소된 느낌' 유지 */
  .app-header,
  .container,
  .home-wrap,
  .top-nav,
  .ad-wrap{
    max-width: 900px;
  }
}