/* 회원 · 법적 문서 UI */

.sheet-panel{
  position:absolute; left:12px; right:12px;
  /* app.css 의 #sheet 와 같은 이유 — 하단 툴바/홈 인디케이터에 가리지 않게 */
  bottom:max(12px, calc(env(safe-area-inset-bottom) + 8px));
  max-width:460px; margin:0 auto; padding:24px 22px 22px;
  border-radius:18px; z-index:20;
  background:var(--panel); backdrop-filter:blur(24px);
  border:1px solid var(--line);
  transform:translateY(160%);
  transition:transform .4s cubic-bezier(.22,1,.36,1);
  max-height:min(86vh, 720px, calc(100dvh - 90px)); overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
.sheet-panel.up{ transform:translateY(0); }
.sheet-panel.tall{ max-width:600px; max-height:88vh; }
.sheet-panel h3{ font-size:18px; font-weight:400; margin-bottom:14px; }
.sp-close{
  position:sticky; top:0; float:right; font-size:23px; font-weight:200;
  opacity:.4; cursor:pointer; line-height:1; z-index:2; padding:2px 2px 6px 10px;
  /* 신호등으로 교체됨 — 남은 곳이 있으면 이 규칙이 받아준다 */
}
.sp-close:hover{ opacity:.85; }
.sp-lead{ font-size:13.5px; font-weight:300; line-height:1.75; opacity:.8; margin-bottom:18px; }
.sp-note{ font-size:11.5px; font-weight:300; line-height:1.7; opacity:.45; margin-top:14px; }
.sp-fine{ font-size:11.5px; font-weight:300; line-height:1.7; opacity:.5; margin-top:14px; text-align:center; }
.sp-fine a, .consent a{ color:var(--teal); text-decoration:underline; text-underline-offset:2px; }

/* ── 설정 항목 ── */
.set-sep{ height:1px; background:var(--line); margin:16px 0; }
.set-item{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  font:400 14px/1 inherit; color:var(--paper);
  background:none; border:0; padding:13px 2px; cursor:pointer; text-align:left;
}
.set-item:hover{ opacity:.7; }
.set-item .chev{ opacity:.3; font-size:18px; }
.set-item.danger{ color:var(--red); }

/* ── 계정 ── */
.acc-rows{ display:grid; grid-template-columns:auto 1fr; gap:9px 20px; font-size:14px; font-weight:300; }
.acc-rows dt{ opacity:.5; }
.founding{
  display:inline-block; margin-top:16px; padding:6px 13px; border-radius:999px;
  font-size:12px; font-weight:500; letter-spacing:.02em;
  background:linear-gradient(135deg, var(--amber), #ffd166); color:#20140a;
}

/* ── OAuth 버튼 ── */
.oauth{
  width:100%; display:flex; align-items:center; justify-content:center; gap:10px;
  font:500 14.5px/1 inherit; padding:14px; border-radius:11px; cursor:pointer;
  margin-bottom:9px; border:1px solid transparent; transition:transform .14s ease;
}
.oauth:hover{ transform:translateY(-1px); }
.oauth.google{ background:#fff; color:#1f1f1f; }
.oauth.apple{ background:#000; color:#fff; border-color:rgba(255,255,255,.35); }

.btn-primary{
  width:100%; font:500 14.5px/1 inherit; padding:14px; border-radius:11px; cursor:pointer;
  background:var(--amber); color:#20140a; border:0; margin-top:18px;
  transition:transform .14s ease;
}
.btn-primary:hover:not(:disabled){ transform:translateY(-1px); }
.btn-primary:disabled{ cursor:not-allowed; }
.btn-text{
  width:100%; font:400 13px/1 inherit; padding:12px; margin-top:8px;
  background:none; border:0; color:var(--fog); cursor:pointer; text-decoration:underline;
  text-underline-offset:2px;
}

/* ── 동의 ── */
.consent{
  display:flex; align-items:flex-start; gap:11px; padding:11px 2px; cursor:pointer;
  font-size:13.5px; font-weight:300; line-height:1.6;
}
.consent input{
  appearance:none; -webkit-appearance:none; flex:none;
  width:20px; height:20px; margin-top:1px; border-radius:6px; cursor:pointer;
  border:1.5px solid rgba(242,245,248,.3); background:transparent;
  transition:all .15s ease;
}
.consent input:checked{ background:var(--teal); border-color:var(--teal); }
.consent input:checked::after{
  content:'✓'; display:block; text-align:center; line-height:17px;
  color:#0b0f17; font-size:13px; font-weight:700;
}
.consent.all{ font-size:14.5px; font-weight:400; }
.consent b.req{ color:var(--teal); font-weight:500; margin-right:3px; }
.consent b.opt{ color:var(--fog); font-weight:500; margin-right:3px; }
.consent em{ display:block; font-style:normal; font-size:11.5px; opacity:.45; margin-top:3px; }

/* ── 사전등록 ── */
#wlForm input[type=email]{
  width:100%; padding:14px 15px; border-radius:10px; font:300 14.5px/1 inherit;
  background:rgba(0,0,0,.35); border:1px solid var(--line); color:var(--paper);
  margin-bottom:4px;
}
#wlForm input[type=email]:focus{ outline:2px solid var(--teal); outline-offset:1px; }
.wl-track{ height:6px; border-radius:99px; background:rgba(242,245,248,.1); overflow:hidden; margin-bottom:8px; }
.wl-bar{ height:100%; width:0; border-radius:99px; background:linear-gradient(90deg,var(--amber),#ffd166); transition:width .8s cubic-bezier(.22,1,.36,1); }
.wl-text{ font:400 12px ui-monospace,monospace; opacity:.6; margin-bottom:18px; }

/* ── 사업자 정보 ── */
.biz{ font-size:11.5px; font-weight:300; line-height:1.9; opacity:.45; }
.biz-row{ display:flex; gap:12px; }
.biz-row span:first-child{ min-width:110px; opacity:.7; }
.credits{ font-size:10.5px; font-weight:300; line-height:1.8; opacity:.3; margin-top:14px; }

/* ── 법적 문서 본문 ── */
.legal-body{ font-size:13px; font-weight:300; line-height:1.85; }
.legal-body h1{ font-size:19px; font-weight:500; margin:0 0 14px; }
.legal-body h2{ font-size:15.5px; font-weight:500; margin:26px 0 10px; padding-top:14px; border-top:1px solid var(--line); }
.legal-body h3{ font-size:14px; font-weight:500; margin:18px 0 8px; }
.legal-body p{ margin:9px 0; opacity:.85; }
.legal-body ul{ margin:9px 0 9px 18px; }
.legal-body li{ margin:5px 0; opacity:.85; }
.legal-body hr{ border:0; border-top:1px solid var(--line); margin:20px 0; }
.legal-body blockquote{
  margin:12px 0; padding:11px 14px; border-radius:9px;
  background:rgba(242,166,90,.08); border-left:2px solid var(--amber);
  font-size:12.5px; opacity:.85;
}
.legal-body code{
  font-family:ui-monospace,monospace; font-size:11.5px;
  background:rgba(242,245,248,.1); padding:2px 5px; border-radius:4px;
}
.legal-body table{ width:100%; border-collapse:collapse; margin:12px 0; font-size:12px; }
.legal-body th, .legal-body td{
  border:1px solid var(--line); padding:7px 9px; text-align:left; vertical-align:top;
}
.legal-body th{ background:rgba(242,245,248,.05); font-weight:500; }
.legal-body a{ color:var(--teal); }

@media (max-width:520px){
  .sheet-panel{ padding:20px 17px 18px; max-height:90vh; }
  .legal-body table{ font-size:11px; }
  .legal-body th, .legal-body td{ padding:5px 6px; }
}

/* ══════════ 위성 그룹 패널 (오른쪽) ══════════ */
#satPanel{
  position:absolute; right:12px; top:50%; transform:translateY(-50%) translateX(120%);
  width:212px; padding:14px 14px 10px; border-radius:14px; z-index:13;
  background:var(--panel); backdrop-filter:blur(20px); border:1px solid var(--line);
  opacity:0; transition:transform .42s cubic-bezier(.22,1,.36,1), opacity .35s ease;
  pointer-events:none;
}
#satPanel.on{ transform:translateY(-50%) translateX(0); opacity:1; pointer-events:auto; }

.sat-head{
  display:flex; align-items:baseline; justify-content:space-between;
  margin-bottom:10px; padding-bottom:9px; border-bottom:1px solid var(--line);
}
.sat-head #satTitle{ font-size:13.5px; font-weight:500; }
.sat-status{ font:400 10.5px ui-monospace,monospace; opacity:.55; }
.sat-status.loading{ color:var(--teal); opacity:.9; }
.sat-status.warn{ color:var(--amber); opacity:1; }

.sat-row{
  display:flex; align-items:center; gap:8px;
  padding:7px 2px; cursor:pointer; font-size:12.5px; font-weight:300;
}
.sat-row.always{ cursor:default; opacity:.85; }
.sat-row input{
  appearance:none; -webkit-appearance:none; flex:none;
  width:15px; height:15px; border-radius:4px; cursor:pointer;
  border:1.4px solid rgba(242,245,248,.3); background:transparent; transition:all .15s ease;
}
.sat-row input:checked{ background:var(--teal); border-color:var(--teal); }
.sat-row input:checked::after{
  content:'✓'; display:block; text-align:center; line-height:12px;
  color:#0b0f17; font-size:10px; font-weight:700;
}
.sat-row input:disabled{ opacity:.55; cursor:default; }
.sat-dot{ width:7px; height:7px; border-radius:50%; flex:none; }
.sat-name{ flex:1; }
.sat-cnt{ font:400 10px ui-monospace,monospace; opacity:.4; }
.sat-row.heavy .sat-cnt{ color:var(--amber); opacity:.8; }
.sat-row em{ font-style:normal; font-size:9.5px; opacity:.4; }

.sheet-note{
  margin-top:13px; font-size:11.5px; font-weight:300; line-height:1.65;
  opacity:.45; padding-top:11px; border-top:1px solid var(--line);
}

@media (max-width:640px){
  #satPanel{ width:180px; right:8px; padding:12px 11px 8px; }
  .sat-row{ font-size:11.5px; padding:6px 2px; }
}

/* ── 위성 "계속 보기" 토글 ── */
.keep-row{
  display:flex; align-items:flex-start; gap:11px; padding:4px 2px 12px; cursor:pointer;
  font-size:13.5px; font-weight:300; line-height:1.55;
}
.keep-row input{
  appearance:none; -webkit-appearance:none; flex:none;
  width:20px; height:20px; margin-top:1px; border-radius:6px; cursor:pointer;
  border:1.5px solid rgba(242,245,248,.3); background:transparent; transition:all .15s ease;
}
.keep-row input:checked{ background:var(--teal); border-color:var(--teal); }
.keep-row input:checked::after{
  content:'✓'; display:block; text-align:center; line-height:17px;
  color:#0b0f17; font-size:13px; font-weight:700;
}
.keep-row b{ font-weight:400; }
.keep-row em{ display:block; font-style:normal; font-size:11.5px; opacity:.45; margin-top:3px; }

/* 신호등 하나짜리 (닫기만 있는 시트) */
.traffic.one{ float:right; padding:2px 0 12px; }
.sheet-panel h3, #settings h3{ clear:both; }

/* ══════════ 하늘 패널 (태양 · 유성우 · 일식) ══════════ */
.sky-sec{ margin-bottom:22px; }
.sky-sec:last-child{ margin-bottom:4px; }
.sky-sec h4{
  font-size:12px; font-weight:500; letter-spacing:.09em; text-transform:uppercase;
  opacity:.45; margin-bottom:11px;
}
.sky-dim{ font-size:12.5px; font-weight:300; opacity:.55; margin-bottom:11px; line-height:1.6; }

/* 태양 — 영상과 수치를 나란히. 좁아지면 영상이 위로 간다. */
.sun-row{ display:flex; gap:16px; align-items:flex-start; }
.sun-img{
  width:132px; height:132px; flex:none; border-radius:50%;
  object-fit:cover; background:#0a0a10;
  box-shadow:0 0 26px rgba(255,170,60,.22), 0 0 0 1px rgba(255,190,110,.2);
}
.sun-info{ flex:1; min-width:0; }
.sun-badge{
  display:inline-block; margin-bottom:9px; padding:3px 11px; border-radius:999px;
  font:500 12px ui-monospace,SFMono-Regular,monospace;
  border:1px solid currentColor; opacity:.95;
}

/* 공통 정의 목록 */
.sky-rows{ display:grid; grid-template-columns:auto 1fr; gap:6px 14px; font-size:12.5px; font-weight:300; }
.sky-rows dt{ opacity:.48; white-space:nowrap; }
.sky-rows dd{ word-break:break-word; }

.sky-card{
  padding:12px 13px; margin-bottom:9px; border-radius:11px;
  background:rgba(242,245,248,.04); border:1px solid var(--line);
}
/* 지금 활동 중인 유성우는 눈에 띄게 */
.sky-card.live{ border-color:rgba(63,199,192,.4); background:rgba(63,199,192,.07); }
.sc-head{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:8px; }
.sc-head b{ font-size:14px; font-weight:400; }
.sc-when{ font:400 11px ui-monospace,monospace; opacity:.5; white-space:nowrap; }

.sky-link{
  display:inline-block; margin-top:10px; font-size:12px; color:var(--teal);
  text-decoration:underline; text-underline-offset:3px;
}
.sky-note{
  margin-top:11px; font-size:11px; font-weight:300; line-height:1.65; opacity:.42;
}
/* 눈 보호 경고 — 흐리게 두면 안 되는 문장이다 */
.sky-warn{
  margin-top:11px; padding:9px 11px; border-radius:9px; font-size:11.5px; line-height:1.6;
  background:rgba(255,93,93,.1); border:1px solid rgba(255,93,93,.3); color:#ffb3b3;
}

@media (max-width:520px){
  .sun-row{ flex-direction:column; align-items:center; }
  .sun-img{ width:150px; height:150px; }
  .sun-info{ width:100%; }
}

/* ══════════ 구독 ══════════ */
.plan-picker{ display:flex; gap:9px; margin-bottom:18px; }
.plan{
  flex:1; padding:13px 12px; border-radius:12px; cursor:pointer; text-align:left;
  background:rgba(242,245,248,.04); border:1.5px solid var(--line); color:var(--paper);
  font:inherit; transition:border-color .15s ease, background .15s ease;
}
.plan.on{ border-color:var(--teal); background:rgba(63,199,192,.1); }
.pl-name{ font-size:12.5px; opacity:.7; display:flex; align-items:center; gap:6px; }
.pl-name em{ font-style:normal; font-size:10px; padding:1px 6px; border-radius:999px;
  background:var(--amber); color:#20140a; }
.pl-price{ font-size:22px; font-weight:300; margin-top:5px; }
.pl-per{ font-size:11px; opacity:.45; margin-top:2px; }

.feat-block h4{ font-size:11px; letter-spacing:.09em; text-transform:uppercase;
  opacity:.45; margin:16px 0 8px; }
.feat-list{ list-style:none; display:grid; gap:6px; font-size:13px; font-weight:300; }
.feat-list li{ padding-left:22px; position:relative; }
.feat-list li::before{ position:absolute; left:0; top:0; }
.feat-list li.yes::before{ content:'✦'; color:var(--amber); }
.feat-list li.free::before{ content:'✓'; color:var(--teal); }

.pay-pending{
  margin-top:18px; padding:13px 14px; border-radius:11px;
  background:rgba(242,166,90,.1); border:1px solid rgba(242,166,90,.3);
}
.pay-pending b{ font-weight:500; font-size:13.5px; color:var(--amber); }
.pay-pending p{ margin-top:6px; font-size:12.5px; font-weight:300; line-height:1.65; opacity:.75; }
.sub-legal{ margin-top:14px; font-size:11px; line-height:1.7; opacity:.4; }
.sub-active{
  padding:13px; border-radius:11px; text-align:center; font-size:14px;
  background:rgba(63,199,192,.12); border:1px solid rgba(63,199,192,.35); color:var(--teal);
}
.btn-secondary{
  width:100%; margin-top:9px; font:400 14px/1 inherit; padding:12px; border-radius:10px;
  cursor:pointer; background:rgba(242,245,248,.07); color:var(--paper);
  border:1px solid var(--line);
}
.btn-secondary:hover{ background:rgba(242,245,248,.12); }
.btn-secondary.danger{ color:var(--red); border-color:rgba(255,93,93,.3); }

/* 설정의 요금제 줄 */
.tier-box{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; justify-content:flex-end; }
.tier-badge{ font-size:11.5px; padding:3px 10px; border-radius:999px;
  background:rgba(242,245,248,.1); opacity:.7; }
.tier-badge.on{ background:rgba(63,199,192,.18); color:var(--teal); opacity:1; }
.tier-cta{
  font:500 12.5px/1 inherit; padding:8px 15px; border-radius:999px; cursor:pointer;
  background:var(--amber); color:#20140a; border:0;
}
.tier-cta.ghost{ background:transparent; color:var(--fog); border:1px solid var(--line); }
.tier-dev{ display:flex; align-items:center; gap:4px; width:100%; justify-content:flex-end;
  font-size:9.5px; opacity:.35; }
.seg.tiny{ font-size:10px; padding:3px 8px; }

/* ══════════ 선착순 오픈 ══════════ */
.dm-progress{ margin:16px 0; }
.dm-bar{ height:7px; border-radius:999px; background:rgba(242,245,248,.1); overflow:hidden; }
.dm-bar i{ display:block; height:100%; border-radius:999px;
  background:linear-gradient(90deg,var(--teal),var(--amber)); transition:width .5s ease; }
.dm-num{ margin-top:7px; font-size:12px; font-weight:300; opacity:.65; }
.dm-num b{ font-weight:500; opacity:1; }
.dm-perk{ padding:12px 13px; border-radius:11px; margin-bottom:14px;
  background:rgba(242,166,90,.09); border:1px solid rgba(242,166,90,.26); }
.dm-perk b{ font-weight:500; font-size:12.5px; color:var(--amber); }
.dm-perk p{ margin-top:5px; font-size:12.5px; font-weight:300; line-height:1.6; opacity:.8; }
.dm-form input{
  width:100%; padding:12px 13px; border-radius:10px; font:400 14px/1 inherit;
  background:rgba(242,245,248,.06); border:1px solid var(--line); color:var(--paper);
  margin-bottom:9px;
}

/* ══════════ 항공편 ══════════ */
.ap-row{ margin-bottom:11px; }
.ap-lab{ display:block; font-size:11px; letter-spacing:.07em; text-transform:uppercase;
  opacity:.45; margin-bottom:6px; }
.ap-input{
  width:100%; padding:11px 13px; border-radius:10px; font:400 14px/1 inherit;
  background:rgba(242,245,248,.06); border:1px solid var(--line); color:var(--paper);
}
.ap-results{ margin-top:5px; max-height:200px; overflow-y:auto; }
.ap-opt, .cand, .book-link{
  width:100%; display:flex; align-items:center; gap:10px; text-align:left;
  padding:10px 12px; margin-top:5px; border-radius:9px; cursor:pointer;
  background:rgba(242,245,248,.04); border:1px solid var(--line);
  color:var(--paper); font:inherit;
}
.ap-opt:hover, .cand:hover, .book-link:hover{ background:rgba(242,245,248,.09); }
.ap-opt b, .cand b{ font:500 13px ui-monospace,monospace; color:var(--teal); flex:none; }
.ap-opt span, .cand span{ flex:1; font-size:12px; font-weight:300; opacity:.75;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ap-opt em, .cand em{ font-style:normal; font-size:10.5px; opacity:.4; flex:none; }
.cand{ flex-wrap:wrap; }
.ap-chip{
  display:inline-flex; align-items:center; gap:7px; padding:9px 13px; border-radius:10px;
  background:rgba(63,199,192,.12); border:1px solid rgba(63,199,192,.35);
  color:var(--paper); font:400 13.5px/1 inherit; cursor:pointer;
}
.ap-chip b{ font:500 13px ui-monospace,monospace; color:var(--teal); }
.ap-chip span{ opacity:.4; font-size:16px; }
.book-link b{ font-weight:400; font-size:13.5px; flex:none; }
.book-link span{ flex:1; font-size:11.5px; opacity:.5; }
.book-link em{ font-style:normal; opacity:.4; }
.tr-head{ display:flex; align-items:baseline; gap:11px; margin-bottom:12px; }
.tr-head b{ font:500 19px ui-monospace,monospace; color:var(--teal); }
.tr-head span{ font-size:13px; opacity:.6; }
.tr-warn{
  margin-top:11px; padding:10px 12px; border-radius:9px; font-size:12px; line-height:1.6;
  background:rgba(242,166,90,.1); border:1px solid rgba(242,166,90,.28); color:#ffd9ac;
}
/* 선착순 대기 레이어 썸네일 */
.ly.demand{ opacity:.8; }
.ly.demand::after{
  content:'👥'; position:absolute; top:6px; right:6px; font-size:10px; opacity:.85;
}

/* ══════════ 커뮤니티 ══════════ */
.comm-tabs{ display:flex; gap:6px; margin-bottom:16px; }
.comm-tab{
  flex:1; padding:9px 12px; border-radius:9px; cursor:pointer;
  font:400 13px/1 inherit; color:var(--fog);
  background:rgba(242,245,248,.05); border:1px solid var(--line);
}
.comm-tab.on{ background:var(--paper); color:#0b0f17; border-color:var(--paper); font-weight:500; }

/* 소식 카드 */
.fd-card{
  width:100%; display:block; text-align:left; margin-bottom:8px;
  padding:12px 13px; border-radius:11px; cursor:pointer; color:var(--paper);
  background:rgba(242,245,248,.04); border:1px solid var(--line); font:inherit;
}
.fd-card:hover{ background:rgba(242,245,248,.08); }
.fd-card.urgent{ border-color:rgba(255,93,93,.4); background:rgba(255,93,93,.07); }
.fd-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:7px; }
.fd-badge{ font-size:10.5px; padding:2px 8px; border-radius:999px; border:1px solid; }
.fd-time{ font:400 10.5px ui-monospace,monospace; opacity:.4; }
.fd-title{ font-size:14.5px; font-weight:400; }
.fd-sub{ font-size:12px; font-weight:300; opacity:.6; margin-top:3px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* 개발 요청 */
.req-intro{
  padding:13px 14px; border-radius:11px; margin-bottom:16px;
  background:rgba(63,199,192,.08); border:1px solid rgba(63,199,192,.26);
}
.req-intro b{ font-weight:500; font-size:13.5px; color:var(--teal); }
.req-intro p{ margin-top:7px; font-size:12.5px; font-weight:300; line-height:1.7; opacity:.8; }
.req-intro p b{ color:var(--paper); font-size:inherit; }
.req-form{ margin-bottom:18px; }
.req-input{
  width:100%; padding:12px 13px; border-radius:10px; resize:vertical;
  font:400 13.5px/1.6 inherit; color:var(--paper);
  background:rgba(242,245,248,.06); border:1px solid var(--line);
}
.req-preview{
  margin-top:7px; padding:9px 11px; border-radius:8px; font-size:12px;
  font-weight:300; line-height:1.6; opacity:.75;
  background:rgba(242,245,248,.04); border:1px dashed var(--line);
}
.tr-tag{
  display:inline-block; margin-right:7px; padding:1px 7px; border-radius:999px;
  font-size:10px; background:rgba(63,199,192,.18); color:var(--teal);
}
.req-card{
  padding:12px 13px; margin-bottom:8px; border-radius:11px;
  background:rgba(242,245,248,.04); border:1px solid var(--line);
}
.rq-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.rq-st{ font-size:10.5px; padding:2px 8px; border-radius:999px; border:1px solid; }
.rq-date{ font:400 10.5px ui-monospace,monospace; opacity:.35; }
.rq-body{ font-size:13.5px; font-weight:300; line-height:1.7; white-space:pre-wrap; }
.rq-tr{ margin-top:8px; }
.tr-btn{
  font:400 11.5px/1 inherit; padding:5px 10px; border-radius:7px; cursor:pointer;
  background:transparent; color:var(--teal); border:1px solid rgba(63,199,192,.35);
}
.tr-text{ margin-top:6px; font-size:12.5px; font-weight:300; line-height:1.65; opacity:.72; }
.rq-foot{ display:flex; align-items:center; gap:8px; margin-top:10px; }
.rq-vote{
  font:400 12px/1 inherit; padding:6px 12px; border-radius:999px; cursor:pointer;
  background:rgba(242,245,248,.06); color:var(--paper); border:1px solid var(--line);
}
.rq-vote.on{ background:rgba(63,199,192,.18); color:var(--teal); border-color:rgba(63,199,192,.4); }
.rq-vote b{ font-weight:500; }
.rq-report{
  margin-left:auto; font:400 11px/1 inherit; padding:6px 10px; border-radius:7px;
  cursor:pointer; background:transparent; color:var(--fog); border:0; opacity:.4;
}
.rq-report:hover{ opacity:.8; color:var(--red); }
.book-link .aff{
  font-style:normal; font-size:9.5px; padding:1px 6px; border-radius:999px;
  background:rgba(242,166,90,.2); color:var(--amber); flex:none;
}

/* ══════════ 이벤트 패널 ══════════ */
.ev-funnel{
  padding:11px 13px; border-radius:11px; margin-bottom:14px;
  background:rgba(242,245,248,.045); border:1px solid var(--line);
}
.ef-head{ font-size:11px; letter-spacing:.08em; text-transform:uppercase; opacity:.45; margin-bottom:8px; }
.ef-row{ display:flex; align-items:baseline; gap:7px; flex-wrap:wrap; font-size:11.5px; }
.ef-row span{ display:flex; flex-direction:column; align-items:center; opacity:.6; }
.ef-row span b{ font:500 16px ui-monospace,monospace; opacity:1; }
.ef-row span.ok{ opacity:1; color:var(--teal); }
.ef-row i{ opacity:.3; font-style:normal; }
.ef-note{ margin-top:7px; font:400 10.5px ui-monospace,monospace; opacity:.35; }

.ev-card{
  padding:12px 13px; margin-bottom:9px; border-radius:11px;
  background:rgba(242,245,248,.04); border:1px solid var(--line);
}
.ev-card.dim{ opacity:.62; border-style:dashed; }
.ev-top{ display:flex; align-items:center; gap:7px; margin-bottom:7px; }
.ev-kind{ font-size:10.5px; padding:2px 8px; border-radius:999px; border:1px solid; }
.ev-status{ font-size:10.5px; opacity:.45; }
.ev-status.ok{ color:var(--teal); opacity:1; }
.ev-score{ margin-left:auto; font:500 14px ui-monospace,monospace; opacity:.8; }
.ev-score em{ font-style:normal; font-size:9.5px; opacity:.4; font-weight:400; }
.ev-place{ font-size:14px; font-weight:400; margin-bottom:5px; }
.ev-summary{ font-size:12.5px; font-weight:300; line-height:1.65; opacity:.75; }
.ev-flag{
  margin-top:8px; padding:7px 9px; border-radius:8px; font-size:11px; line-height:1.55;
  background:rgba(242,166,90,.1); border:1px solid rgba(242,166,90,.26); color:#ffd9ac;
}
.ev-links{ margin-top:10px; }
.ev-links-h{ font-size:10.5px; opacity:.4; margin-bottom:5px; }
.ev-link{
  display:inline-flex; align-items:center; gap:4px; margin:0 5px 5px 0;
  padding:4px 9px; border-radius:7px; font-size:11px;
  background:rgba(242,245,248,.06); border:1px solid var(--line); color:var(--fog);
}
.ev-link:hover{ color:var(--paper); background:rgba(242,245,248,.11); }
.ev-link em{ font-style:normal; opacity:.5; }
.ev-go{
  width:100%; margin-top:10px; font:400 12.5px/1 inherit; padding:9px; border-radius:8px;
  cursor:pointer; background:rgba(63,199,192,.12); color:var(--teal);
  border:1px solid rgba(63,199,192,.3);
}

/* 경고 없음 */
.warn-clear{
  padding:14px; border-radius:11px; text-align:center; font-size:14px;
  background:rgba(63,199,192,.1); border:1px solid rgba(63,199,192,.3); color:var(--teal);
}

/* ══════════ 위성 탭의 예정된 발사 ══════════ */
.sl-head{ font-size:11px; letter-spacing:.08em; text-transform:uppercase; opacity:.45; margin-bottom:8px; }
.sl-row{
  width:100%; display:flex; align-items:baseline; gap:8px; text-align:left;
  padding:8px 9px; margin-bottom:4px; border-radius:8px; cursor:pointer;
  background:rgba(242,245,248,.04); border:1px solid var(--line);
  color:var(--paper); font:inherit;
}
.sl-row:hover{ background:rgba(242,245,248,.09); }
.sl-row.soon{ border-color:rgba(242,166,90,.42); background:rgba(242,166,90,.09); }
.sl-row b{ font-weight:400; font-size:12.5px; flex:none; max-width:44%;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sl-row span{ flex:1; font-size:10.5px; opacity:.45;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sl-row em{ font-style:normal; font:400 10.5px ui-monospace,monospace; opacity:.7; flex:none; }
.sl-row.soon em{ color:var(--amber); opacity:1; }
.sl-empty{ font-size:11.5px; opacity:.45; line-height:1.6; }
.sl-note{ margin-top:8px; font-size:10px; line-height:1.55; opacity:.32; }
.ev-syndicate{
  margin-top:8px; padding:8px 10px; border-radius:8px; font-size:11px; line-height:1.6;
  background:rgba(242,166,90,.09); border:1px solid rgba(242,166,90,.24); color:#ffd9ac;
}
/* 이벤트 기사 제목 — 카드의 주인공 */
.ev-headline{
  font-size:15.5px; font-weight:400; line-height:1.45; margin:2px 0 6px;
  color:var(--paper);
}
.ev-tr{ margin-top:8px; }
.ev-tr-text{ margin-top:6px; font-size:12.5px; font-weight:300; line-height:1.6; opacity:.78; }
.title-tr{ margin-top:12px; padding-top:11px; border-top:1px solid var(--line); }
/* 유료 기능 안내 — 인질처럼 보이지 않게, 이유를 함께 */
.paid-hint{
  margin-top:14px; padding:13px 14px; border-radius:11px;
  background:rgba(242,166,90,.08); border:1px solid rgba(242,166,90,.26);
}
.ph-head{ font-size:13.5px; font-weight:500; color:var(--amber); }
.paid-hint p{ margin-top:6px; font-size:12.5px; font-weight:300; line-height:1.65; opacity:.8; }
.ph-btn{
  margin-top:10px; font:500 12.5px/1 inherit; padding:8px 15px; border-radius:999px;
  cursor:pointer; background:var(--amber); color:#20140a; border:0;
}
.ph-free{ margin-top:9px; font-size:11px; line-height:1.6; opacity:.45; }
/* 번역된 제목 아래의 원문 — 확인용이므로 작고 흐리게, 그래도 읽을 수 있게 */
.title-orig, .ev-orig{
  margin-top:5px; font-size:11.5px; font-weight:300; line-height:1.5;
  opacity:.42; word-break:break-word;
}
.title-orig{ margin-bottom:11px; }
.to-tag{
  display:inline-block; margin-right:6px; padding:0 6px; border-radius:999px;
  font-size:9.5px; background:rgba(242,245,248,.1); opacity:.9; vertical-align:1px;
}
/* 항적 고도 색 범례 */
.alt-legend{ margin-top:12px; }
.al-t{ font-size:11px; opacity:.45; margin-bottom:5px; }
.al-bar{ display:flex; height:7px; border-radius:999px; overflow:hidden; }
.al-bar i{ flex:1; }
.al-nums{ display:flex; justify-content:space-between; margin-top:4px;
  font:400 10px ui-monospace,monospace; opacity:.4; }
.sky-note.attrib{ opacity:.55; font-size:10.5px; }

/* ══ 업데이트 내역 (타임라인) ══════════════════════════════════
   시각·표식·내용 3열. 표식이 세로선 위의 점이 되도록
   :before 로 선을 긋고 점을 그 위에 올린다.
   ⚠️ 세로선을 마지막 항목 아래까지 늘이면 허공에 선이 남는다 —
      마지막 행에서 끊는다. */
.changelog{ font-size:13px; }
.cl-note{
  font-size:11px; line-height:1.6; opacity:.42; margin:0 0 20px;
  padding-bottom:14px; border-bottom:1px solid var(--line);
}
.cl-day + .cl-day{ margin-top:26px; }
.cl-date{
  font-size:12px; font-weight:500; letter-spacing:.02em;
  margin:0 0 14px; opacity:.55;
}
.cl-list{ list-style:none; margin:0; padding:0; }

.cl-row{
  display:grid; grid-template-columns:42px 13px 1fr;
  align-items:start; column-gap:9px;
  padding-bottom:16px; position:relative;
}
.cl-row:last-child{ padding-bottom:2px; }

.cl-when{
  font:400 11px ui-monospace,SFMono-Regular,Menlo,monospace;
  opacity:.38; padding-top:2px; text-align:right; letter-spacing:-.01em;
}

/* 점 + 아래로 이어지는 선 */
.cl-mark{ position:relative; height:100%; }
.cl-mark::after{
  content:''; position:absolute; left:3px; top:5px;
  width:7px; height:7px; border-radius:50%;
  background:var(--tag); box-shadow:0 0 0 3px rgba(10,14,20,.85);
}
.cl-row:not(:last-child) .cl-mark::before{
  content:''; position:absolute; left:6px; top:9px; bottom:-16px;
  width:1px; background:var(--line);
}

.cl-what p{ margin:0; opacity:.86; line-height:1.75; }
.cl-what p b{ font-weight:500; opacity:1; }
.cl-tag{
  display:inline-block; margin:0 0 5px; padding:1px 7px; border-radius:999px;
  font-size:9.5px; font-weight:500; letter-spacing:.04em;
  color:var(--tag); background:color-mix(in srgb, var(--tag) 14%, transparent);
}

@media (max-width:420px){
  .cl-row{ grid-template-columns:38px 13px 1fr; column-gap:7px; }
  .changelog{ font-size:12.5px; }
}

/* ══ AI 브리핑 카드 ═══════════════════════════════════════════
   Perplexity 식 — 사실 한 줄 옆에 그 줄의 출처 칩.
   ⚠️ 칩이 문장 끝에 자연스럽게 붙어야 한다. 줄 바꿈으로 떨어지면
      "어느 문장의 출처인지"가 흐려진다 → display:inline 유지. */
.bf-notice{
  font-size:11px; line-height:1.65; opacity:.5; margin:0 0 14px;
  padding:9px 11px; border-radius:9px;
  background:rgba(63,199,192,.07); border:1px solid rgba(63,199,192,.16);
}
.bf-card{
  border:1px solid var(--line); border-radius:13px;
  padding:14px 14px 12px; margin-bottom:12px;
  background:rgba(242,245,248,.022);
}
.bf-card.compact{ border:0; padding:0; margin:0; background:none; }

.bf-top{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin-bottom:9px; }
.bf-kind{
  font-size:10px; font-weight:500; letter-spacing:.03em;
  padding:1px 7px; border-radius:999px;
  color:#ffb199; background:rgba(255,107,61,.12);
}
.bf-conf{
  font-size:10px; font-weight:500; padding:1px 7px; border-radius:999px;
  color:var(--c); background:color-mix(in srgb, var(--c) 13%, transparent);
}
.bf-outlets{ font-size:10px; opacity:.4; margin-left:auto;
  font-variant-numeric:tabular-nums; }

.bf-head{
  font-size:16px; font-weight:500; line-height:1.45; margin:0 0 4px;
  letter-spacing:-.01em;
}
.bf-card.compact .bf-head{ font-size:14.5px; }
.bf-place{ font-size:11px; opacity:.45; margin-bottom:9px; }
.bf-sum{ font-size:13px; line-height:1.7; opacity:.82; margin:0 0 12px; }

.bf-list{ list-style:none; margin:0 0 12px; padding:0; }
.bf-list li{
  position:relative; padding-left:14px; margin-bottom:10px;
  font-size:12.5px; line-height:1.75;
}
.bf-list li::before{
  content:''; position:absolute; left:2px; top:9px;
  width:4px; height:4px; border-radius:50%;
  background:currentColor; opacity:.32;
}
.bf-txt{ opacity:.88; }

/* 출처 칩 — 문장 뒤에 바로 붙는다 */
.bf-src{ white-space:nowrap; margin-left:5px; }
.bf-chip{
  display:inline-block; padding:0 6px; border-radius:5px;
  font:400 10px/1.65 ui-monospace,SFMono-Regular,Menlo,monospace;
  color:#7fd8d3; background:rgba(63,199,192,.1);
  border:1px solid rgba(63,199,192,.2);
  text-decoration:none; vertical-align:1.5px; margin-right:3px;
  max-width:11em; overflow:hidden; text-overflow:ellipsis;
}
.bf-chip:hover{ background:rgba(63,199,192,.2); }
.bf-chip.more{ cursor:pointer; opacity:.7; font-family:inherit; font-size:10px; }

.bf-ctx{
  border-top:1px solid var(--line); padding-top:9px; margin-bottom:11px;
}
.bf-ctx-row{
  display:flex; justify-content:space-between; gap:12px;
  font-size:11.5px; padding:3px 0;
}
.bf-ctx-row span{ opacity:.5; }
.bf-ctx-row b{ font-weight:400; text-align:right; }

/* 아직 모르는 것 — 감추면 카드가 실제보다 확실해 보인다 */
.bf-open{
  padding:9px 11px; border-radius:9px; margin-bottom:11px;
  background:rgba(255,209,102,.055); border:1px solid rgba(255,209,102,.15);
}
.bf-open-h{ font-size:10px; font-weight:500; letter-spacing:.03em;
  color:#ffd166; opacity:.85; margin-bottom:5px; }
.bf-open ul{ list-style:none; margin:0; padding:0; }
.bf-open li{ font-size:11.5px; line-height:1.65; opacity:.68;
  padding-left:10px; position:relative; }
.bf-open li::before{ content:'·'; position:absolute; left:2px; opacity:.6; }

.bf-go{
  width:100%; padding:8px; border-radius:9px; cursor:pointer;
  border:1px solid rgba(63,199,192,.3); background:rgba(63,199,192,.09);
  color:#7fd8d3; font-size:12px; font-weight:500; margin-bottom:9px;
}
.bf-go:hover{ background:rgba(63,199,192,.16); }

.bf-by{ font-size:10px; line-height:1.6; opacity:.36; }

/* ══ 부이 카메라 ═══════════════════════════════════════════════
   NDBC buoycam 은 2880×300 파노라마(6방향)다.
   ⚠️ 가로가 매우 길다. 폭에 맞춰 줄이면 세로가 너무 얇아지므로
      가로 스크롤을 허용하고 기본 배율을 조금 키운다. */
.buoy-cam{ margin-top:13px; }
.bc-img{
  display:block; width:100%; height:auto; border-radius:8px;
  background:rgba(242,245,248,.04); min-height:34px;
}
.bc-cap{ font-size:10.5px; line-height:1.6; opacity:.45; margin-top:6px; }
.bc-why{
  font-size:12px; line-height:1.75; opacity:.8; margin-top:10px;
  padding:9px 11px; border-radius:9px;
  background:rgba(90,209,232,.06); border:1px solid rgba(90,209,232,.15);
}

/* ══ 부이 사진·차트 ═══════════════════════════════════════════
   ⚠️ NDBC 이미지는 원본이 크다 (차트 800px, 카메라 2880px).
      width:100% + max-width:100% 를 **둘 다** 줘야 시트를 넘지 않는다.
      (한쪽만 주면 시트가 가로로 밀려 스크롤이 생긴다 — 실제로 그랬다.) */
.buoy-cam{ margin-top:13px; max-width:100%; overflow:hidden; }
.buoy-cam img{ max-width:100%; }

.bc-img{
  display:block; width:100%; max-width:100%; height:auto; border-radius:8px;
  background:rgba(242,245,248,.04); min-height:26px;
}
.bc-hull{
  display:block; width:auto; max-width:min(190px,100%); height:auto;
  border-radius:8px; margin-top:12px;
}
.bc-cap{ font-size:10.5px; line-height:1.6; opacity:.45; margin-top:6px; }
.bc-why{
  font-size:12px; line-height:1.75; opacity:.8; margin-top:10px;
  padding:9px 11px; border-radius:9px;
  background:rgba(90,209,232,.06); border:1px solid rgba(90,209,232,.15);
}
.bc-plots{ margin-top:14px; max-width:100%; }
.bc-plots-h{ font-size:11px; font-weight:500; opacity:.55; margin-bottom:8px; }
.bc-plot{ margin:0 0 8px; max-width:100%; }
.bc-plot img{
  display:block; width:100%; max-width:100%; height:auto; border-radius:8px;
  /* NDBC 차트는 배경이 밝다 — 로딩 중 검정→흰색 깜빡임을 줄인다 */
  background:#eef1f6;
}
.bc-link{
  display:block; margin-top:10px; font-size:11.5px;
  color:#7fd8d3; text-decoration:none;
}
.bc-link:hover{ text-decoration:underline; }

/* ══ 산불 위성 영상 + 주변 뉴스 ═══════════════════════════════ */
.fire-view{ margin-top:13px; max-width:100%; }
.fv-img{
  display:block; width:100%; max-width:100%; height:auto; border-radius:8px;
  background:rgba(242,245,248,.04); min-height:40px;
}
.fv-news{
  margin-top:13px; padding-top:11px; border-top:1px solid var(--line);
}
.fv-news-h{ font-size:11px; font-weight:500; opacity:.5; margin-bottom:7px; }
.fv-news-row{ font-size:12px; line-height:1.6; margin-bottom:7px; }
.fv-news-row a{ color:#9fd8ff; text-decoration:none; }
.fv-news-row a:hover{ text-decoration:underline; }
.fv-news-m{ font-size:10.5px; opacity:.4; }