/* ── 탁탁사주 랜딩 — 한 화면 앱 프레임 (v20260813C) ───────────────── */
:root {
  --ink:#10271f; --ink-soft:#1b3b30; --paper:#f7f4eb; --sand:#e7deca;
  --coral:#df5c3f; --muted:#6e746c; --line:rgba(16,39,31,.16);
  --serif:'Noto Serif KR', serif; --sans:'Noto Sans KR', sans-serif;
  --app-max:640px; --app-pad:16px; /* cmd-103: 앱 셸 폭·여백 통일 — 이전 --app-w:430px */
}
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html, body { height:100%; }
body {
  margin:0; color:var(--ink); background:var(--paper);
  font-family:var(--sans); line-height:1.6;
  display:flex; align-items:center; justify-content:center;
  /* 앱(style.css)과 동일한 1.2배 확대 — 홈만 작아 보이던 문제(2026-08-14).
     zoom을 쓰면 dvh 기준도 1.2배로 늘어나므로 아래 높이를 1/1.2로 환산한다. */
  zoom: 1.2;
}
a { color:inherit; text-decoration:none; }
h1, h2, p { margin-top:0; }
button { font-family:inherit; }

/* ── 앱 프레임 ──────────────────────────────────────────────── */
.app-frame {
  position:relative; width:100%; max-width:var(--app-max);
  min-height:83.3333dvh; height:83.3333dvh; overflow:hidden; /* = 100dvh / 1.2 */
  display:flex; flex-direction:column;
  padding:env(safe-area-inset-top) var(--app-pad) calc(74px + env(safe-area-inset-bottom));
  background:var(--paper);
}
#main { flex:1; display:flex; flex-direction:column; justify-content:center; gap:18px; min-height:0; overflow-y:auto; overscroll-behavior:contain; }

/* 데스크톱: 가운데 앱 화면(cmd-103 — 다크 프레임 대신 페이지 배경+그림자만) */
@media (min-width:640px) {
  /* 앱(#general-ui)과 동일하게 화면을 꽉 채운다 — 카드형 축소를 쓰면
     하단 탭바 위치가 앱과 어긋나 탭 이동 시 바가 튄다(2026-08-14). */
  .app-frame { box-shadow:0 0 40px rgba(0,0,0,.08); }
}

/* ── 상단 바 ────────────────────────────────────────────────── */
.app-bar { flex:0 0 auto; height:60px; display:flex; align-items:center; justify-content:space-between; }
.brand { display:flex; align-items:center; gap:9px; font:600 16px var(--serif); letter-spacing:-.04em; }
.brand-mark { display:grid; place-items:center; width:28px; height:28px; border:1px solid currentColor; font:600 15px var(--serif); }
.bar-cta { padding:7px 13px; border:1px solid var(--ink); font-size:13px; transition:.2s ease; }
.bar-cta:hover, .bar-cta:focus-visible { background:var(--ink); color:#fff; }

/* ── 히어로 ────────────────────────────────────────────────── */
.hero { display:flex; flex-direction:column; }
.eyebrow { margin:0 0 10px; color:var(--coral); font-size:10px; font-weight:700; letter-spacing:.16em; }
h1 { margin:0 0 14px; font-family:var(--serif); font-weight:600; font-size:clamp(28px, 8.2vw, 34px); line-height:1.3; letter-spacing:-.06em; }
h1 em { color:var(--coral); font-style:normal; }
.hero-description { margin:0 0 18px; color:#44564d; font-size:13.5px; word-break:keep-all; }

.pillars-card { position:relative; overflow:hidden; padding:16px 16px 14px; margin:0 9px 18px 0; background:#fcfaf4; border:1px solid var(--line); box-shadow:9px 9px 0 var(--sand); }
.pillars-card::before { content:'命'; position:absolute; right:-18px; top:-40px; color:rgba(16,39,31,.05); font:300 130px var(--serif); }
.card-topline { position:relative; display:flex; justify-content:space-between; padding-bottom:11px; border-bottom:1px solid var(--line); color:var(--muted); font-size:10px; letter-spacing:.08em; }
.pillars { position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:6px; padding-top:14px; text-align:center; }
.pillars article { display:grid; justify-items:center; gap:4px; }
.pillar-label { color:var(--muted); font-size:10px; }
.pillars strong, .pillars b { font:600 clamp(26px,7.5vw,32px)/1.1 var(--serif); }
.pillars b { font-weight:500; }
.wood{color:#327351}.fire{color:#cb4b37}.metal{color:#647d89}.water{color:#315d81}

/* ── 버튼 ──────────────────────────────────────────────────── */
.button { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:50px; padding:0 20px; border:1px solid var(--ink); background:none; font-size:14px; font-weight:600; cursor:pointer; transition:background .2s ease, color .2s ease, border-color .2s ease; }
.button-block { width:100%; }
.button-primary { background:var(--ink); color:#fff; }
.button-primary:hover, .button-primary:focus-visible { background:var(--coral); border-color:var(--coral); }
.button-primary:disabled { opacity:.55; cursor:default; }
.linkish { padding:0; border:0; background:none; color:#3a5046; font-size:12.5px; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.linkish:hover { color:var(--coral); }

/* ── 회원가입 ──────────────────────────────────────────────── */
.join { padding-top:18px; border-top:1px solid var(--line); }
.join-title { margin:0 0 12px; color:#42544b; font:500 12.5px var(--sans); letter-spacing:-.02em; }
.social-buttons { display:grid; gap:8px; }
.social-btn { display:flex; align-items:center; justify-content:center; gap:9px; min-height:46px; padding:0 16px; border:1px solid var(--line); background:#fff; font-size:13.5px; font-weight:600; cursor:pointer; transition:filter .2s ease; }
.social-btn:hover, .social-btn:focus-visible { filter:brightness(.97); }
.social-btn .social-ico { display:flex; }
.social-btn.kakao { background:#FEE500; border-color:#FEE500; color:#3C1E1E; }

#authForm { display:grid; gap:8px; }
.field { display:block; }
.field input { width:100%; min-height:46px; padding:0 14px; border:1px solid var(--line); background:#fff; font:400 14px var(--sans); color:var(--ink); }
.field input:focus { outline:none; border-color:var(--ink); }
.field input::placeholder { color:#9aa39d; }

.auth-msg { margin:8px 0 0; min-height:16px; color:var(--muted); font-size:12px; word-break:keep-all; }
.auth-msg.is-error { color:var(--coral); }
.auth-msg.is-ok { color:#2f6b4f; }
.auth-switch { display:flex; align-items:center; gap:8px; margin:10px 0 0; color:var(--line); font-size:12px; }
.auth-state { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px; border:1px solid var(--line); background:#fcfaf4; }
.auth-state p { margin:0; font-size:13px; }

/* ── 하단 고지 ─────────────────────────────────────────────── */
.mini-legal { flex:0 0 auto; display:flex; flex-wrap:wrap; gap:10px; margin:14px 0 0; color:var(--muted); font-size:10.5px; }
.mini-legal a { margin-left:auto; }
.mini-legal a + a { margin-left:0; }
.mini-legal a:hover { color:var(--coral); }

/* ── 세로 여유가 적은 화면 ─────────────────────────────────── */
@media (max-height:720px) {
  #main { gap:12px; }
  .hero-description { display:none; }
  .pillars-card { padding:12px; margin-bottom:12px; }
  .pillars strong, .pillars b { font-size:26px; }
  .join { padding-top:12px; }
}
@media (max-height:600px) {
  .app-frame { height:auto; min-height:83.3333dvh; overflow:visible; }
  .pillars-card { display:none; }
}

/* ── 하단 탭바 (2026-08-14) — 앱 프레임 하단 고정 ──────────────── */
.app-tabbar {
  /* 앱 #mobile-bottom-nav 와 동일 규격 — 화면 하단 고정 */
  position:fixed; left:0; right:0; bottom:0; z-index:6000;
  width:min(var(--app-max), 100%); margin:0 auto;
  display:grid; grid-template-columns:repeat(6,1fr); gap:2px;
  min-height:calc(64px + env(safe-area-inset-bottom));
  padding:6px 6px calc(4px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line); background:var(--paper); border-radius:0;
}
.app-tabbar a {
  min-width:0; height:30px; align-self:center;
  display:flex; align-items:center; justify-content:center;
  padding:0 3px; border-radius:9px; color:var(--muted);
  font-size:10px; font-weight:500; line-height:1.25; transition:color .15s;
  -webkit-tap-highlight-color:transparent;
}
.app-tabbar a span { font-size:10.5px; letter-spacing:-.05em; white-space:nowrap; }
.app-tabbar a.is-active {
  color:#fff; font-weight:600;
  background:var(--coral); border-radius:9px;
}
.app-tabbar a:hover, .app-tabbar a:focus-visible { color:var(--ink); }



/* ══════════════════════════════════════════════════════════════════════
   홈 시안 1c — 인장 · 만세력 먹판 (2026-08-14)
   시안 팔레트를 앱 기존 톤(종이 #f7f4eb / 잉크 #10271f / 코랄 #df5c3f)에 맞춰 조정
   ══════════════════════════════════════════════════════════════════════ */
:root {
  --hm-card:   #F1ECDF;   /* 보조 카드 */
  --hm-card2:  #EFE9DA;
  --hm-rule:   #D2D3CA;   /* 괘선 */
  --hm-rule-s: #E2DED2;   /* 옅은 괘선 */
  --hm-slab:   #14211C;   /* 먹판 */
  --hm-slab-c: #1D2E26;   /* 먹판 강조칸 */
  --hm-ink2:   #44564D;   /* 보조 본문 */
  --hm-faint:  #8E938C;   /* 흐린 글씨 */
  --hm-onslab: #F2EFE4;
  --hm-onslab-mute: #8D857A;
  --hm-onslab-label: #E8AFA2;
  /* 오행 — 종이 / 먹판 */
  --e-mok: #4E6B44;  --e-hwa: #C0503C;  --e-to: #A6801F;  --e-geum: #6B6558;  --e-su: #33506B;
  --e-mok-d: #8FAE7F; --e-hwa-d: #E0745F; --e-to-d: #D4AB57; --e-geum-d: #E6DFD2; --e-su-d: #8AA9C6;
}

#main { justify-content:flex-start; gap:5px; padding-top:10px; }
.hm-label { color:var(--coral); font-size:9.5px; font-weight:700; letter-spacing:.22em; white-space:nowrap; }

/* ── 로고 / 소개 / 일진정보 ───────────────────────────────────── */
.hm-top {
  display:grid; gap:7px;
  grid-template-columns:minmax(0,1fr) 108px;
  grid-template-areas:"logo iljin" "intro iljin";
  align-items:start;
}
.hm-logobox {
  grid-area:logo; display:flex; align-items:center; gap:7px;
  padding:8px 2px; border:0; border-radius:0; background:transparent;
}
.hm-logo { flex:0 0 auto; display:block; border-radius:9px; }
.hm-wordmark { font:600 19px var(--serif); letter-spacing:-.03em; color:var(--ink); }

.hm-introbox {
  grid-area:intro; padding:8px 2px;
  border:0; border-radius:0; background:transparent;
}
.hm-title { margin:0 0 4px; font:600 15px/1.32 var(--serif); letter-spacing:-.04em; color:var(--ink); }
.hm-desc { margin:0 0 1px; color:var(--hm-ink2); font-size:10.5px; line-height:1.55; word-break:keep-all; }
.hm-faint { color:var(--hm-faint); }

.hm-iljinbox {
  grid-area:iljin; height:100%;
  display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:8px 4px 9px; border:0; border-radius:0; background:transparent;
}
.hm-seal {
  width:60px; height:60px; border-radius:6px; background:var(--hm-slab);
  box-shadow:0 3px 0 rgba(0,0,0,.22);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
}
.hm-seal b { font:600 22px/1.02 var(--serif); color:var(--hm-onslab); }
/* 인장 글자 — 천간·지지 각각 제 오행색(먹판용 밝은 톤) */
.hm-seal b.e-mok { color:var(--e-mok-d); }
.hm-seal b.e-hwa { color:var(--e-hwa-d); }
.hm-seal b.e-to  { color:var(--e-to-d); }
.hm-seal b.e-geum{ color:var(--e-geum-d); }
.hm-seal b.e-su  { color:var(--e-su-d); }
.hm-iljintxt { color:var(--hm-ink2); font-size:10.5px; text-align:center; white-space:nowrap; }
/* 인장 아래 글줄 — 종이 배경이라 종이톤 오행색을 쓴다 */
.hm-iljintxt .e-mok, .hm-sum dd .e-mok { color:var(--e-mok); font-weight:600; }
.hm-iljintxt .e-hwa, .hm-sum dd .e-hwa { color:var(--e-hwa); font-weight:600; }
.hm-iljintxt .e-to,  .hm-sum dd .e-to  { color:var(--e-to);  font-weight:600; }
.hm-iljintxt .e-geum,.hm-sum dd .e-geum{ color:var(--e-geum);font-weight:600; }
.hm-iljintxt .e-su,  .hm-sum dd .e-su  { color:var(--e-su);  font-weight:600; }
.hm-sum { margin:1px 0 0; width:100%; display:grid; gap:2px; }
.hm-sum > div { display:flex; align-items:baseline; justify-content:space-between; gap:5px; }
.hm-sum dt { margin:0; color:var(--hm-faint); font-size:9px; }
.hm-sum dd { margin:0; color:var(--hm-ink2); font-size:9px; text-align:right; white-space:nowrap; }

/* 섹션 라벨 줄 (오늘의 기운 등) */
.hm-ruleline { display:flex; align-items:center; gap:10px; }
.hm-ruleline--gi { padding:0 0 5px; }
.hm-rulefill { flex:1 1 auto; height:1px; background:var(--hm-rule-s); }

/* ── 2-3 만세력 먹판 ──────────────────────────────────────────── */
.hm-slab { padding:7px 12px 8px; border-radius:14px; background:var(--hm-slab); }
.slab-head { display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin-bottom:8px; }
.slab-title { color:var(--hm-onslab-label); font-size:9.5px; font-weight:700; letter-spacing:.22em; }
.slab-stamp { color:var(--hm-onslab-mute); font-size:10px; white-space:nowrap; }
.slab-cols { display:grid; grid-template-columns:repeat(4,1fr); }
.slab-col {
  display:grid; justify-items:center; gap:2px; padding:6px 2px 7px;
  border-left:1px solid rgba(246,242,234,.14); border-radius:6px;
}
.slab-col:first-child { border-left:0; }
.slab-col.is-day { background:var(--hm-slab-c); }
.slab-col.is-day .slab-label { color:var(--hm-onslab); }
/* 일주 강조칸도 오행색을 그대로 쓴다 — 흰색 덮어쓰기 제거(2026-08-22) */
.slab-label { color:var(--hm-onslab-mute); font-size:9px; }
.slab-col strong, .slab-col b { font:500 21px/1.05 var(--serif); color:var(--hm-onslab); }
.slab-cols .e-mok{color:var(--e-mok-d);} .slab-cols .e-hwa{color:var(--e-hwa-d);}
.slab-cols .e-to{color:var(--e-to-d);}   .slab-cols .e-geum{color:var(--e-geum-d);}
.slab-cols .e-su{color:var(--e-su-d);}

.slab-bar { display:flex; align-items:center; gap:8px; margin-top:8px; }
.ebar { flex:1 1 auto; display:flex; height:6px; border-radius:3px; overflow:hidden; background:rgba(246,242,234,.10); }
.ebar-seg.e-mok{background:var(--e-mok-d);} .ebar-seg.e-hwa{background:var(--e-hwa-d);}
.ebar-seg.e-to{background:var(--e-to-d);}   .ebar-seg.e-geum{background:var(--e-geum-d);}
.ebar-seg.e-su{background:var(--e-su-d);}
.ebar-top { flex:0 0 auto; color:var(--hm-onslab-mute); font:500 10px var(--serif); letter-spacing:.06em; }
.slab-error { margin:0; padding:10px 0; color:var(--hm-onslab-mute); font-size:11.5px; text-align:center; }
.slab-retry { background:none; border:0; color:var(--hm-onslab-label); font-size:11.5px; text-decoration:underline; cursor:pointer; }

/* ── 2-4 오늘의 기운 ──────────────────────────────────────────── */
.hm-gi { padding:8px 12px 9px; border-radius:14px; background:var(--hm-card); }
.gi-title { margin:0 0 3px; font:600 15px var(--serif); letter-spacing:-.03em; color:var(--ink); }
.hm-gi p { margin:0 0 1px; color:var(--hm-ink2); font-size:10.5px; line-height:1.55; word-break:keep-all; }
/* 본문은 한 문단 — 계절줄까지 이어 붙인다(2026-08-22) */
.gi-body { font-size:11.5px; line-height:1.65; }
.gi-title .e-mok { color:var(--e-mok); }
.gi-title .e-hwa { color:var(--e-hwa); }
.gi-title .e-to  { color:var(--e-to); }
.gi-title .e-geum{ color:var(--e-geum); }
.gi-title .e-su  { color:var(--e-su); }

/* ── 2-5 가입란 ───────────────────────────────────────────────── */
.hm-join { padding:7px 12px; border-radius:14px; background:var(--hm-card); border:0; }
.join-head { display:flex; align-items:center; gap:7px; margin-bottom:7px; }
.join-mark { font:600 14px var(--serif); color:var(--coral); }
.hm-join h2 { margin:0; font:400 11.5px var(--sans); color:var(--hm-ink2); letter-spacing:-.01em; }
.hm-join .social-buttons { display:flex; flex-direction:row; gap:8px; }
.hm-join .social-btn { min-height:42px; border-radius:10px; font-size:12px; white-space:nowrap; padding:0 10px; }
.hm-join .social-btn.google { flex:1 1 0; background:#fff; border:1px solid var(--hm-rule); }
.hm-join .social-btn.kakao  { flex:1.6 1 0; }
.hm-join .auth-switch { margin-top:5px; }
.hm-join .linkish { font-size:11px; color:#8B8478; }

/* ── 반응형 — 좁은 화면 ───────────────────────────────────────── */
@media (max-width:400px) {
  .hm-title { font-size:19px; }
  .hm-sealcol, .hm-seal { flex-basis:74px; width:74px; }
  .hm-seal { height:74px; }
  .hm-seal b { font-size:26px; }
  .slab-col strong, .slab-col b { font-size:21px; }
}

/* 소형 화면(≤380px 상당) — 한 화면 유지용 추가 압축 */
@media (max-height:760px), (max-width:370px) {
  .hm-title { font-size:18px; }
  .hm-desc { font-size:11px; }
  .slab-col strong, .slab-col b { font-size:19px; }
  .gi-title { font-size:14.5px; }
  .hm-gi p { font-size:11px; }
  .hm-seal { width:70px; height:70px; }
  .hm-sealcol { flex-basis:70px; width:70px; }
  .hm-seal b { font-size:25px; }
}