/* 오늘의 투자 운세 — 모바일 우선 다크 테마 */

:root {
  --bg: #090b14;
  --bg-2: #10131f;
  --card-1: #161a2c;
  --card-2: #1b2038;
  --line: #272d4c;
  --line-soft: #1f2440;

  --text: #eceef8;
  --text-2: #c8cee6;
  --muted: #8f97bd;
  --faint: #5a6288;

  --gold: #f2cd82;
  --gold-hi: #ffdf9e;
  --gold-dim: #b08d4c;

  --up: #ff6b6b;    /* 국내 관행: 상승 빨강 */
  --down: #5aa9f0;  /* 하락 파랑 */

  --radius: 18px;
  --wrap: 560px;
  --ease: cubic-bezier(.22, .8, .26, 1);
}

* { box-sizing: border-box; }

/* .ad-slot 처럼 display를 직접 지정한 요소에서도 hidden 속성이 이기도록 한다. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont,
    'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', system-ui, sans-serif;
  line-height: 1.68;
  word-break: keep-all;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* 배경 — 별과 은은한 광원. 고정이라 스크롤해도 따라오지 않는다. */
.stars {
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(1.6px 1.6px at 18% 22%, rgba(255,255,255,.55), transparent),
    radial-gradient(1.4px 1.4px at 76% 12%, rgba(255,255,255,.42), transparent),
    radial-gradient(1px 1px at 44% 64%, rgba(255,255,255,.32), transparent),
    radial-gradient(1.6px 1.6px at 88% 58%, rgba(255,255,255,.45), transparent),
    radial-gradient(1px 1px at 10% 78%, rgba(255,255,255,.3), transparent),
    radial-gradient(1.2px 1.2px at 62% 88%, rgba(255,255,255,.34), transparent),
    radial-gradient(760px 460px at 50% -8%, rgba(126,110,214,.26), transparent 70%),
    radial-gradient(560px 380px at 88% 34%, rgba(200,150,90,.09), transparent 70%),
    var(--bg);
}

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 16px; }

/* ── 헤더 ─────────────────────────────── */
.topbar {
  border-bottom: 1px solid var(--line-soft);
  background: rgba(9,11,20,.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  position: sticky; top: 0; z-index: 10;
}
.topbar .wrap {
  display: flex; align-items: center; justify-content: space-between;
  height: 56px;
}
.logo {
  font-weight: 700; font-size: 15px; letter-spacing: -.02em;
  background: linear-gradient(100deg, var(--gold-hi), var(--gold-dim));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.asof { font-size: 11.5px; color: var(--faint); letter-spacing: -.01em; }

/* ── 카드 ─────────────────────────────── */
.card {
  position: relative;
  background: linear-gradient(168deg, var(--card-1), var(--card-2));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 20px;
  margin: 16px 0;
  box-shadow: 0 18px 40px -28px rgba(0,0,0,.9);
}
/* 카드 윗변에 얇은 빛줄기. 입체감을 주되 요란하지 않게. */
.card::before {
  content: ''; position: absolute; inset: 0 0 auto; height: 1px;
  border-radius: var(--radius) var(--radius) 0 0;
  background: linear-gradient(90deg, transparent, rgba(242,205,130,.34), transparent);
}

h1 { font-size: 24px; margin: 0 0 10px; letter-spacing: -.035em; line-height: 1.4; }
h2 {
  font-size: 13px; margin: 0 0 16px;
  color: var(--gold); letter-spacing: .06em; font-weight: 700;
}
.sub { color: var(--muted); font-size: 13.5px; margin: 0 0 18px; }
.note { color: var(--faint); font-size: 11.5px; margin: 14px 0 0; line-height: 1.7; }

/* ── 입력 ─────────────────────────────── */
.intro { text-align: center; margin-top: 32px; padding: 34px 20px; }
.intro h1 { font-size: 26px; }
#birth-form { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; }

input[type=date] {
  width: 100%;
  padding: 15px;
  font-size: 17px;
  color: var(--text);
  background: rgba(0,0,0,.28);
  border: 1px solid var(--line);
  border-radius: 13px;
  font-family: inherit;
  text-align: center;
  letter-spacing: .02em;
  transition: border-color .18s, background .18s;
}
input[type=date]:focus {
  outline: none;
  border-color: var(--gold-dim);
  background: rgba(0,0,0,.4);
}

button {
  font-family: inherit; font-size: 16px; font-weight: 700;
  border-radius: 13px; cursor: pointer; padding: 15px;
  border: 1px solid transparent; letter-spacing: -.01em;
  transition: filter .16s, opacity .16s, transform .12s var(--ease);
}
button:active:not(:disabled) { transform: scale(.985); filter: brightness(.92); }
button:disabled { opacity: .4; cursor: default; }
.primary {
  background: linear-gradient(170deg, var(--gold-hi), var(--gold-dim));
  color: #24190a;
  box-shadow: 0 10px 26px -14px rgba(242,205,130,.8);
}
.ghost {
  background: rgba(255,255,255,.03);
  border-color: var(--line); color: var(--text-2); flex: 1; font-weight: 600;
}

.actions { display: flex; gap: 10px; margin: 18px 0; }

/* ── 별자리 / 띠 ──────────────────────── */
.signs { display: flex; align-items: center; justify-content: center; gap: 18px; }
.sign { display: flex; flex-direction: column; align-items: center; min-width: 92px; }
.sign-emoji {
  font-size: 32px; line-height: 1;
  width: 66px; height: 66px; margin-bottom: 10px;
  display: grid; place-content: center;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 34%, rgba(242,205,130,.16), rgba(255,255,255,.02));
  border: 1px solid var(--line);
  /* 여기에 별자리·띠 일러스트가 들어갈 자리다. 이미지가 오면 배경으로 교체한다. */
}
.sign-name { font-weight: 700; font-size: 15px; letter-spacing: -.02em; }
.sign-el { font-size: 11px; color: var(--faint); margin-top: 1px; }
.times { color: var(--faint); font-size: 15px; align-self: flex-start; margin-top: 24px; }

/* ── 점수 게이지 ──────────────────────── */
.score-wrap { text-align: center; margin: 26px 0 6px; }
.gauge {
  --pct: 0%;
  width: 146px; height: 146px; margin: 0 auto 18px;
  border-radius: 50%;
  display: grid; place-content: center;
  position: relative;
  background: conic-gradient(var(--ring) var(--pct), rgba(255,255,255,.055) 0);
  transition: --pct 1.1s var(--ease);
}
/* 게이지 바깥의 은은한 후광. 등급에 따라 색이 바뀐다. */
.gauge::before {
  content: ''; position: absolute; inset: -14px;
  border-radius: 50%; z-index: -1;
  background: radial-gradient(circle, var(--glow), transparent 68%);
  opacity: .5;
}
.gauge::after {
  content: ''; position: absolute; inset: 10px;
  background: linear-gradient(168deg, var(--card-1), var(--card-2));
  border-radius: 50%;
}
.gauge > * { position: relative; z-index: 1; }
#score-num {
  font-size: 46px; font-weight: 800; letter-spacing: -.045em;
  font-variant-numeric: tabular-nums;
}
.gauge small { font-size: 12.5px; color: var(--muted); margin-left: 3px; }

.gauge { --ring: var(--gold); --glow: rgba(242,205,130,.18); }
.gauge[data-band=low]  { --ring: #7c88c2; --glow: rgba(124,136,194,.2); }
.gauge[data-band=mid]  { --ring: var(--gold); --glow: rgba(242,205,130,.18); }
.gauge[data-band=high] { --ring: var(--gold-hi); --glow: rgba(255,223,158,.28); }

.headline {
  font-size: 18px; font-weight: 700; margin: 0;
  letter-spacing: -.035em; line-height: 1.5;
}

/* ── 세부 운 ──────────────────────────── */
.detail-grid { display: grid; gap: 13px; margin: 26px 0 6px; }
.detail-grid > div {
  display: grid;
  grid-template-columns: 86px 1fr 32px;
  align-items: center; gap: 12px;
}
.dt-label { font-size: 12.5px; color: var(--muted); letter-spacing: -.02em; }
.dt-num {
  font-size: 12.5px; text-align: right; color: var(--gold);
  font-weight: 700; font-variant-numeric: tabular-nums;
}

.bar { height: 6px; background: rgba(255,255,255,.06); border-radius: 99px; overflow: hidden; }
.bar > i {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--gold-dim), var(--gold-hi));
  border-radius: 99px;
  transition: width .9s var(--ease);
}

.advice {
  margin: 22px 0 0; padding: 15px 16px;
  background: rgba(242,205,130,.055);
  border-left: 2px solid var(--gold-dim);
  border-radius: 4px 11px 11px 4px;
  font-size: 14px; color: var(--text-2); line-height: 1.72;
}

.lucky { display: flex; gap: 8px; margin-top: 20px; }
.lucky > div {
  flex: 1; text-align: center; padding: 13px 6px;
  background: rgba(0,0,0,.22); border: 1px solid var(--line-soft); border-radius: 13px;
}
.lucky small { display: block; font-size: 10.5px; color: var(--faint); margin-bottom: 4px; }
/* 시간대가 "진시 (07시~09시)"처럼 길어질 수 있어 줄바꿈을 허용한다. */
.lucky b {
  font-size: 13.5px; color: var(--gold); line-height: 1.4;
  display: block; word-break: keep-all; font-weight: 700;
}

/* ── 오늘 닿은 것 (괘·날·하늘) ─────────── */
.lead { font-size: 13px; line-height: 1.85; margin-bottom: 6px; color: var(--muted); }

.basis-row { padding: 20px 0; border-top: 1px solid var(--line-soft); }
.basis-row:first-of-type { padding-top: 6px; border-top: 0; }

.br-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.br-tag {
  font-size: 11px; font-weight: 800; letter-spacing: .1em;
  color: var(--gold); background: rgba(242,205,130,.09);
  border: 1px solid rgba(242,205,130,.22);
  border-radius: 7px; padding: 4px 11px;
}
.br-verdict { font-size: 13px; font-weight: 700; letter-spacing: -.02em; }
.br-verdict.plus  { color: var(--gold-hi); }
.br-verdict.minus { color: #94a8de; }
.br-verdict.zero  { color: var(--faint); font-weight: 600; }

.br-title { margin: 0 0 8px; font-size: 14.5px; font-weight: 700; letter-spacing: -.025em; }
.br-text { margin: 0; font-size: 14px; color: var(--text-2); line-height: 1.75; }
.br-sub { margin: 8px 0 0; font-size: 12px; color: var(--faint); }

.hexagram { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; }

/* 여섯 효를 막대로 그린다. 양(⚊)은 이어진 한 줄, 음(⚋)은 가운데가 끊긴 두 줄.
   유니코드 괘 기호(U+4DC0~)는 기기별 폰트 지원이 고르지 않아 쓰지 않는다. */
.hx-glyph { display: grid; gap: 5px; width: 54px; flex: 0 0 54px; }
.yao { display: flex; gap: 6px; height: 6px; }
.yao > i { display: block; height: 100%; background: var(--gold-dim); border-radius: 2px; }
.yao.yang > i { flex: 1; }
.yao.yang > i:last-child { display: none; }      /* 양효는 한 줄로 이어진다 */
.yao.yang > i:first-child { flex: 1 0 100%; }
.yao.yin > i { flex: 1; }
/* 동효 — 지금 움직이는 자리라 밝게 표시한다. */
.yao.moving > i {
  background: linear-gradient(90deg, var(--gold), var(--gold-hi));
  box-shadow: 0 0 9px rgba(242,205,130,.6);
}

.hx-id b { display: block; font-size: 16.5px; letter-spacing: -.025em; }
.hx-id span { display: block; font-size: 11.5px; color: var(--faint); margin-top: 3px; }

/* 접어 둔 셈법 — 궁금한 사람만 펴 보게 한다. */
.method { margin-top: 20px; border-top: 1px solid var(--line-soft); padding-top: 14px; }
.method > summary {
  cursor: pointer; list-style: none;
  font-size: 12px; color: var(--faint);
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 0; transition: color .16s;
}
.method > summary::-webkit-details-marker { display: none; }
.method > summary::before {
  content: '⌄'; font-size: 15px; line-height: 1; transition: transform .2s var(--ease);
}
.method[open] > summary::before { transform: rotate(180deg); }
.method > summary:hover { color: var(--text-2); }

.method-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 9px; }
.method-list li {
  display: grid; grid-template-columns: 36px 1fr auto;
  align-items: baseline; gap: 10px; font-size: 12px;
}
.ml-tag { color: var(--gold); font-weight: 700; }
.ml-desc { color: var(--muted); }
.ml-score { font-variant-numeric: tabular-nums; font-weight: 700; }
.ml-score.plus  { color: var(--gold-hi); }
.ml-score.minus { color: #94a8de; }
.ml-score.zero  { color: var(--faint); font-weight: 600; }
.ml-total { border-top: 1px solid var(--line-soft); padding-top: 9px; margin-top: 3px; }
.ml-total .ml-score { color: var(--text); }

/* ── 시장 ─────────────────────────────── */
.fg { display: flex; align-items: center; gap: 16px; }
.fg-dial {
  flex: 0 0 96px; text-align: center; padding: 14px 6px;
  border-radius: 15px; background: rgba(0,0,0,.24); border: 1px solid var(--line-soft);
}
.fg-num { font-size: 29px; font-weight: 800; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.fg-label { font-size: 11.5px; color: var(--faint); margin-top: 1px; }
.fg-dial[data-tone=extreme-fear]  .fg-num { color: #5aa9f0; }
.fg-dial[data-tone=fear]          .fg-num { color: #7dc0f5; }
.fg-dial[data-tone=neutral]       .fg-num { color: var(--gold); }
.fg-dial[data-tone=greed]         .fg-num { color: #ff9d9d; }
.fg-dial[data-tone=extreme-greed] .fg-num { color: #ff6b6b; }
.fg-mood { margin: 0; font-size: 14px; color: var(--text-2); line-height: 1.72; }

.fg-parts { display: grid; gap: 14px; margin-top: 22px; }
.fg-part small { color: var(--faint); font-size: 11px; }
.fp-head { display: flex; justify-content: space-between; font-size: 12.5px; margin-bottom: 6px; }
.fp-head b { color: var(--gold); font-weight: 700; font-variant-numeric: tabular-nums; }

/* ── 종목 ─────────────────────────────── */
.tickers { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ticker {
  background: rgba(0,0,0,.22); border: 1px solid var(--line-soft);
  border-radius: 15px; padding: 16px;
  transition: border-color .18s;
}
.ticker:hover { border-color: var(--line); }
.tk-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.tk-id b { font-size: 17px; letter-spacing: .01em; }
.tk-id span { display: block; font-size: 11.5px; color: var(--faint); margin-top: 1px; }
.tk-price { text-align: right; white-space: nowrap; }
.tk-price b { font-size: 15px; display: block; font-variant-numeric: tabular-nums; }
.tk-price span { font-size: 12px; font-variant-numeric: tabular-nums; }
.tk-price .up { color: var(--up); }
.tk-price .down { color: var(--down); }
.tk-omen { margin: 12px 0 10px; font-size: 13.5px; color: var(--text-2); line-height: 1.72; }
/* 종목 궁합 — 상장일로 세운 종목의 사주와 사용자 띠를 견준 결과 */
.tk-compat {
  --tc: var(--gold);
  margin: 14px 0 12px; padding: 13px 14px;
  background: rgba(255,255,255,.028);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
}
.tk-compat[data-tone=best]    { --tc: #ffd98a; border-color: rgba(255,217,138,.3); }
.tk-compat[data-tone=good]    { --tc: var(--gold); }
.tk-compat[data-tone=neutral] { --tc: var(--muted); }
.tk-compat[data-tone=bad]     { --tc: #94a8de; }
.tk-compat[data-tone=worst]   { --tc: #7f8cc4; border-color: rgba(127,140,196,.28); }

.tc-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.tc-title { font-size: 11px; font-weight: 800; letter-spacing: .12em; color: var(--faint); }
.tc-verdict { font-size: 12.5px; color: var(--tc); font-weight: 600; }
.tc-verdict b { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }

.tc-bar { height: 4px; }
.tc-bar > i { background: linear-gradient(90deg, rgba(255,255,255,.12), var(--tc)); }

.tc-line { margin: 10px 0 0; font-size: 12.5px; color: var(--text-2); line-height: 1.68; }
.tc-elem { margin: 5px 0 0; font-size: 12px; color: var(--faint); line-height: 1.68; }

.tk-meta { display: flex; gap: 7px; flex-wrap: wrap; }
.tk-meta span {
  font-size: 10.5px; color: var(--faint);
  background: rgba(255,255,255,.045); border-radius: 7px; padding: 3px 8px;
  font-variant-numeric: tabular-nums;
}

/* ── 내 종목 궁합 검색 ────────────────────── */
#lookup-form { display: flex; gap: 8px; margin-bottom: 4px; }
#lookup {
  flex: 1; min-width: 0;
  padding: 13px 14px; font-size: 15px; font-family: inherit;
  color: var(--text); background: rgba(0,0,0,.28);
  border: 1px solid var(--line); border-radius: 12px;
  transition: border-color .18s, background .18s;
}
#lookup::placeholder { color: var(--faint); }
#lookup:focus { outline: none; border-color: var(--gold-dim); background: rgba(0,0,0,.4); }
#lookup-form .primary { flex: 0 0 auto; padding: 13px 18px; font-size: 14px; }

.lookup-msg {
  margin: 14px 0 0; font-size: 12.5px; color: var(--muted);
  padding: 12px 14px; border: 1px dashed var(--line); border-radius: 11px;
}
#lookup-result:not(:empty) { margin-top: 16px; }

.warn {
  margin: 18px 0 0; font-size: 11.5px; color: var(--faint); line-height: 1.75;
  padding: 13px 14px; border: 1px dashed var(--line); border-radius: 11px;
}
.warn strong { color: var(--gold-dim); }

/* ── 광고 슬롯 ────────────────────────── */
.ad-slot { min-height: 90px; margin: 16px 0; display: grid; place-content: center; }
.ad-slot:empty::after {
  content: '광고 영역';
  font-size: 11px; color: #3d4468;
  border: 1px dashed var(--line-soft); border-radius: 12px;
  padding: 30px 62px;
}

/* ── 푸터 ─────────────────────────────── */
.site-footer { padding: 28px 16px 48px; border-top: 1px solid var(--line-soft); margin-top: 28px; }
.disclaimer { font-size: 11.5px; color: var(--faint); margin: 0 0 10px; line-height: 1.8; }
.disclaimer strong { color: var(--muted); }
.credit { font-size: 10.5px; color: #454c72; margin: 0; }

.err { color: #ff8787; font-size: 13px; margin-top: 14px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── 등장 연출 ────────────────────────── */
/* app.js 가 결과를 그린 뒤 카드마다 시차를 두고 .in 을 붙인다. */
.reveal { opacity: 0; transform: translateY(14px); }
.reveal.in {
  opacity: 1; transform: none;
  transition: opacity .55s var(--ease), transform .55s var(--ease);
}

@media (min-width: 520px) {
  h1 { font-size: 28px; }
  .intro h1 { font-size: 30px; }
  .card { padding: 28px 26px; }
  .headline { font-size: 19px; }
}

@media (prefers-reduced-motion: reduce) {
  .bar > i, .gauge, .reveal.in { transition: none; }
  .reveal { opacity: 1; transform: none; }
  * { scroll-behavior: auto !important; }
}