:root {
    --bg: #f6f1e7;
    --card: #fffdf8;
    --ink: #2a2420;
    --muted: #776c62;
    --line: #e4d9c8;
    --accent: #9b2c2c;
    --accent-ink: #ffffff;
    --wood: #2f7d4f;
    --fire: #c2412d;
    --earth: #a77a1f;
    --metal: #6b7280;
    --water: #2b5a9e;
    --notice: #fff4dc;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #1a1714;
        --card: #24201c;
        --ink: #efe8dd;
        --muted: #a99d90;
        --line: #3a332c;
        --accent: #d0605a;
        --accent-ink: #1a1714;
        --wood: #5fb985;
        --fire: #ec7a64;
        --earth: #d6a94a;
        --metal: #aab1bd;
        --water: #79a6e6;
        --notice: #3a2f1c;
    }
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
    line-height: 1.65;
    word-break: keep-all;
}

a { color: inherit; }

.site-header {
    max-width: 720px;
    margin: 0 auto;
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    text-decoration: none;
}

.seal {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 6px;
    background: var(--accent);
    color: var(--accent-ink);
    font-family: "Noto Serif KR", serif;
}

.header-link { color: var(--muted); font-size: 14px; }

.page {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 16px 40px;
}

.intro h1 { margin: 12px 0 4px; font-size: 26px; }
.intro p { margin: 0 0 20px; color: var(--muted); }

h2 { font-size: 20px; margin: 32px 0 12px; }
h3 { font-size: 16px; margin: 20px 0 6px; }

.card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 20px;
}

.form { display: grid; gap: 16px; }

.segmented {
    border: 0;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.segmented legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.segmented input { position: absolute; opacity: 0; }
.segmented span {
    display: block;
    text-align: center;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 10px;
    cursor: pointer;
}
.segmented input:checked + span { background: var(--ink); color: var(--card); border-color: var(--ink); }
.segmented input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

.date-row { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 8px; }
.time-row { display: flex; align-items: end; gap: 12px; flex-wrap: wrap; }
.time-row > label:first-child { flex: 1; min-width: 160px; }

.form label > span { display: block; font-size: 13px; color: var(--muted); margin-bottom: 4px; }

.form input[type="number"],
.form input[type="time"],
.form select {
    width: 100%;
    padding: 10px 12px;
    font-size: 16px;
    color: var(--ink);
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 10px;
}
.form input:disabled { opacity: .45; }

.check { display: inline-flex; align-items: center; gap: 6px; padding: 10px 0; cursor: pointer; }
.check[hidden] { display: none; }

.submit {
    padding: 14px;
    font-size: 17px;
    font-weight: 700;
    color: var(--accent-ink);
    background: var(--accent);
    border: 0;
    border-radius: 12px;
    cursor: pointer;
}

.error { margin: 0; color: var(--fire); font-weight: 600; }

.result { scroll-margin-top: 16px; margin-top: 28px; }

.summary dl { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.summary dt { font-size: 13px; color: var(--muted); }
.summary dd { margin: 0; font-weight: 600; }
.summary small { color: var(--muted); font-weight: 400; }

.notice {
    margin: 14px 0 0;
    padding: 10px 12px;
    background: var(--notice);
    border-radius: 8px;
    font-size: 14px;
}

.pillars { padding: 16px 12px; }
.pillars table { width: 100%; border-collapse: separate; border-spacing: 6px; table-layout: fixed; }
.pillars th { font-size: 13px; color: var(--muted); font-weight: 600; }
.pillars td {
    text-align: center;
    padding: 10px 2px;
    border: 1px solid var(--line);
    border-radius: 10px;
}
.pillars td.me { border: 2px solid var(--accent); }

.char { display: block; }
.char b { display: block; font-family: "Noto Serif KR", "Batang", serif; font-size: 34px; line-height: 1.2; }
.char small { font-size: 12px; color: var(--muted); }
.char.unknown b { color: var(--muted); }

.el-wood b, .el-wood .bar-label { color: var(--wood); }
.el-fire b, .el-fire .bar-label { color: var(--fire); }
.el-earth b, .el-earth .bar-label { color: var(--earth); }
.el-metal b, .el-metal .bar-label { color: var(--metal); }
.el-water b, .el-water .bar-label { color: var(--water); }

.caption { margin: 8px 4px 0; font-size: 13px; color: var(--muted); }

.bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.bars li { display: grid; grid-template-columns: 56px 1fr 24px; align-items: center; gap: 10px; }
.bar-label { font-weight: 700; }
.bar-track { height: 12px; background: var(--bg); border-radius: 6px; overflow: hidden; }
.bar-fill { display: block; height: 100%; border-radius: 6px; }
.el-wood .bar-fill { background: var(--wood); }
.el-fire .bar-fill { background: var(--fire); }
.el-earth .bar-fill { background: var(--earth); }
.el-metal .bar-fill { background: var(--metal); }
.el-water .bar-fill { background: var(--water); }
.bar-count { text-align: right; font-weight: 700; }

.notes { margin: 16px 0 0; padding-left: 18px; }
.notes li + li { margin-top: 6px; }

.reading-head { display: flex; align-items: center; gap: 16px; }
.reading-head img { width: 96px; height: 96px; object-fit: contain; border-radius: 12px; background: var(--bg); }
.ganji { margin: 0; font-size: 20px; font-weight: 700; }
.gtitle { margin: 2px 0 0; color: var(--muted); }
.reading p { margin: 0; }

.section-nav {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    gap: 6px;
    overflow-x: auto;
    margin: 16px -16px 0;
    padding: 10px 16px;
    background: var(--bg);
    scrollbar-width: none;
}
.section-nav::-webkit-scrollbar { display: none; }
.section-nav a {
    flex: 0 0 auto;
    padding: 6px 12px;
    font-size: 14px;
    text-decoration: none;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--card);
}
.result h2 { scroll-margin-top: 64px; }

.pillars th[scope="row"] { font-size: 12px; text-align: left; width: 48px; }
.pillars thead th:first-child { width: 48px; }
.pillars .meta-row td { padding: 6px 2px; font-size: 13px; border-style: dashed; }
.me-tag { color: var(--accent); }
.tag {
    display: inline-block;
    margin: 2px;
    padding: 1px 6px;
    font-size: 12px;
    border-radius: 6px;
    background: var(--bg);
    border: 1px solid var(--line);
}
.tag-good { color: var(--wood); border-color: currentColor; }
.tag-warn { color: var(--fire); border-color: currentColor; }

.ten-bars .bar-fill { background: var(--accent); }
.ten-bars .bar-label { color: var(--ink); }

.explain { margin: 16px 0 0; display: grid; gap: 12px; }
.explain dt { font-weight: 700; }
.explain dt small { color: var(--muted); font-weight: 400; }
.explain dd { margin: 2px 0 0; }

.relations { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.relations li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.relations small { color: var(--muted); }

.gongmang { margin: 0; }
.lead { margin: 0 0 12px; }

.luck-scroll { overflow-x: auto; margin: 0 -8px; padding: 0 8px 4px; }
.luck-row { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; width: max-content; }
.luck {
    width: 64px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 4px;
    border: 1px solid var(--line);
    border-radius: 10px;
    text-align: center;
}
.luck.is-current { border: 2px solid var(--accent); background: var(--bg); }
.luck-age { font-size: 13px; font-weight: 700; }
.luck-ten, .luck-stage, .luck-year, .luck-name { font-size: 11px; color: var(--muted); }
.luck-char b { font-family: "Noto Serif KR", "Batang", serif; font-size: 24px; line-height: 1.25; }
.luck-name { color: var(--ink); }
.luck-now { margin: 14px 0 0; }

.year-notes { margin: 14px 0 0; padding-left: 18px; display: grid; gap: 8px; }

.ad { margin: 24px 0; min-height: 100px; }
.ad:has(.adsbygoogle[data-ad-status="unfilled"]) { display: none; }

.guide { margin-top: 32px; }
.guide h2 { margin-top: 0; font-size: 17px; }
.guide ul { margin: 0; padding-left: 18px; font-size: 14px; color: var(--muted); }
.guide li + li { margin-top: 6px; }

.site-footer {
    max-width: 720px;
    margin: 0 auto;
    padding: 24px 16px 40px;
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 14px;
    color: var(--muted);
}

@media (max-width: 420px) {
    .card { padding: 16px; }
    .char b { font-size: 28px; }
    .pillars table { border-spacing: 4px; }
    .summary dl { grid-template-columns: 1fr; }
}

.pillars th[scope="row"] small { display: block; font-size: 10px; color: var(--muted); font-weight: 400; }
.twelve-row td { font-size: 12px; }
.explain .place { color: var(--muted); }

.time-block { display: grid; gap: 8px; }
.time-head { display: flex; align-items: center; justify-content: space-between; }
.time-head > span { font-size: 13px; color: var(--muted); }
.time-head .check { padding: 0; }
.hm-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.hm-row label { display: flex; align-items: center; gap: 6px; }
.hm-row label > span { margin: 0; font-size: 15px; color: var(--ink); }
.time-field.is-off { opacity: .45; }

.ss-card { border-top: 1px solid var(--line); padding: 14px 0; }
.ss-card:first-child { border-top: 0; padding-top: 0; }
.ss-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.ss-head small { color: var(--muted); }
.ss-why { margin: 8px 0; display: grid; gap: 8px; }
.ss-why > div { display: grid; grid-template-columns: 76px 1fr; gap: 2px 8px; padding: 8px 10px; background: var(--bg); border-radius: 8px; font-size: 14px; }
.ss-why dt { color: var(--muted); }
.ss-why dd { margin: 0; }
.ss-card p { margin: 6px 0 0; }
.ss-card details, .card > details { margin-top: 8px; font-size: 14px; }
.ss-card summary, .card > details summary { cursor: pointer; color: var(--muted); }
.luck-shinsal { display: block; margin-top: 4px; font-size: 13px; color: var(--muted); }

/* 운 탐색 */
.luck-explorer { margin-top: 32px; scroll-margin-top: 64px; }
.luck-explorer[aria-busy="true"] { opacity: .6; }
.lx-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.lx-crumb { font-size: 13px; color: var(--muted); }
.lx-level { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 16px; margin-bottom: 16px; }
.lx-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.lx-head h3 { margin: 0; }
.lx-nav { display: flex; gap: 6px; }
.lx-row { display: flex; gap: 6px; overflow-x: auto; padding: 10px 2px 6px; scrollbar-width: thin; }
.lx-btn {
    flex: 0 0 auto;
    min-width: 64px;
    min-height: 44px;
    padding: 6px 8px;
    font: inherit;
    font-size: 13px;
    color: var(--ink);
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 10px;
    cursor: pointer;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1.3;
}
.lx-btn b { font-weight: 700; }
.lx-btn small { font-size: 11px; color: var(--muted); }
.lx-btn.is-now { border-style: dashed; border-color: var(--accent); }
.lx-btn.is-selected { background: var(--ink); color: var(--card); border: 1px solid var(--ink); }
.lx-btn.is-selected small { color: var(--card); opacity: .8; }
.lx-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lx-btn:disabled { opacity: .35; cursor: not-allowed; }
.lx-btn.lx-step, .lx-btn.lx-today, .lx-btn.lx-link { min-height: 36px; flex-direction: row; font-size: 13px; }
.lx-btn.is-term { box-shadow: inset 0 -3px 0 var(--earth); }
.lx-mark { font-style: normal; color: var(--accent); }
.lx-panel { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 12px; }
.lx-panel h4 { margin: 0 0 8px; font-size: 17px; }
.lx-panel h4 small { font-weight: 400; color: var(--muted); font-size: 13px; }
.lx-panel h5 { margin: 14px 0 6px; font-size: 15px; }
.lx-evidence, .lx-points { margin: 0; padding-left: 18px; font-size: 14px; display: grid; gap: 4px; }
.lx-basis { margin: 10px 0; }
.lx-basis summary { cursor: pointer; color: var(--muted); font-size: 14px; }
.lx-fields { display: grid; gap: 12px; margin-top: 12px; }
.lx-field { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: var(--bg); }
.lx-field h5 { margin: 0 0 6px; }
.lx-summary { margin: 0 0 8px; font-weight: 600; }
.lx-field dl { margin: 0; font-size: 14px; }
.lx-field dt { margin-top: 8px; color: var(--muted); font-size: 13px; }
.lx-field dd { margin: 2px 0 0; }
.lx-field dd ul { margin: 0; padding-left: 18px; }
.lx-field dd p { margin: 0 0 4px; }
.lx-links { display: flex; flex-wrap: wrap; gap: 6px; }
.lx-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; padding-top: 10px; }
.lx-cal .lx-btn { min-width: 0; width: 100%; padding: 4px 2px; }
.lx-wd { text-align: center; font-size: 12px; color: var(--muted); }
@media (max-width: 420px) {
    .lx-level { padding: 12px; }
    .lx-cal .lx-btn small { font-size: 10px; }
}

/* 운 표 칸 (기존 만세력 표 형태) */
.lx-crumb { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; font-size: 13px; color: var(--muted); }
.lx-crumb li + li::before { content: '›'; margin-right: 4px; }
.lx-head h3 small { font-size: 13px; font-weight: 400; color: var(--muted); }
.lx-row { padding-bottom: 18px; }
.lx-cell {
    position: relative;
    flex: 0 0 auto;
    width: 66px;
    padding: 6px 2px;
    font: inherit;
    color: var(--ink);
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    text-align: center;
}
.lx-cell span { display: block; line-height: 1.25; }
.lx-cell .c-top { font-size: 12px; font-weight: 700; }
.lx-cell .c-ten, .lx-cell .c-stage, .lx-cell .c-bottom { font-size: 11px; color: var(--muted); }
.lx-cell .c-char b { display: block; font-family: "Noto Serif KR", "Batang", serif; font-size: 22px; line-height: 1.15; }
.lx-cell .c-char small { display: block; font-size: 10px; color: var(--muted); }
.lx-cell .c-name { font-size: 12px; font-weight: 700; }
.lx-cell-pre { justify-content: center; min-height: 120px; }
.lx-cell.is-now { border-style: dashed; border-color: var(--accent); }
.lx-cell.is-selected { border: 2px solid var(--accent); background: var(--bg); box-shadow: 0 2px 0 var(--accent); }
.lx-cell.is-selected .c-top { color: var(--accent); }
.lx-cell.is-selected::after {
    content: '▼';
    position: absolute;
    bottom: -16px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 11px;
    color: var(--accent);
}
.lx-cell:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lx-cell:disabled { opacity: .35; cursor: not-allowed; }
.lx-cal .lx-btn small + small { font-size: 10px; }
.tag-none { font-size: 12px; color: var(--muted); }
.tag small { font-size: 10px; color: var(--muted); }
.tag-more { font-size: 12px; }
.tag-more summary { cursor: pointer; color: var(--accent); }

.nw { white-space: nowrap; }

/* 읽기 중심 UI: 원국 → 기간 선택 → 분야별 요약 */
:root { --bg:#f4f6f8; --card:#ffffff; --ink:#202d39; --muted:#566575; --line:#dce3ea; --accent:#216458; --notice:#fff5df; }
body { font-size:16px; line-height:1.8; overflow-wrap:anywhere; }
.page,.site-header,.site-footer { max-width:960px; }
.page { padding-bottom:48px; }
.intro { padding:24px 0 12px; }
.intro h1 { font-size:clamp(25px,4vw,34px); letter-spacing:-.04em; }
h2 { margin-top:38px; letter-spacing:-.03em; }
.card,.lx-level { border-radius:18px; box-shadow:0 4px 20px #20304005; padding:24px; }
.section-nav { display:flex; gap:8px; overflow-x:auto; flex-wrap:nowrap; padding:12px 0; }
.section-nav a { white-space:nowrap; padding:8px 14px; border:1px solid var(--line); border-radius:24px; background:var(--card); text-decoration:none; }
.section-nav a:hover { border-color:var(--accent); color:var(--accent); }
.pillars { overflow-x:auto; }
.pillars table { width:100%; min-width:540px; }
.pillars td { vertical-align:top; }
.pillars th[scope="row"] { min-width:62px; }
.pillars .char b { font-size:38px; }
.pillars .char small { font-size:15px; font-weight:600; }
.shinsal-row .tag { display:block; width:fit-content; margin:5px auto; font-size:13px; line-height:1.6; }
.twelve-row td { font-size:14px; padding:10px 4px; }
.caption { font-size:13px; color:var(--muted); line-height:1.7; }
.lx-toolbar { padding:14px; background:var(--bg); border-radius:12px; }
.lx-row { gap:10px; padding:14px 3px 24px; }
.lx-cell { width:96px; padding:12px 6px; gap:5px; border-radius:12px; }
.lx-cell .c-top,.lx-cell .c-name { font-size:15px; }
.lx-cell .c-char b { font-size:30px; }
.lx-cell .c-char small,.lx-cell .c-ten,.lx-cell .c-stage { font-size:13px; }
.lx-cell .c-bottom { font-size:12px; }
.lx-cell.is-selected { background:#eaf5f0; border-color:var(--accent); box-shadow:0 0 0 2px var(--accent); }
.lx-cell .c-sinsal { width:100%; border-top:1px solid var(--line); padding-top:4px; font-size:12px; }
.c-sinsal small { color:var(--muted); font-size:10px; }
.lx-panel { padding-top:22px; margin-top:16px; }
.lx-panel h4 { font-size:20px; line-height:1.7; }
.lx-fields { gap:16px; }
.lx-field { padding:22px; background:var(--card); border-left:4px solid var(--accent); }
.lx-field h5 { font-size:19px; margin-bottom:12px; }
.lx-summary { font-size:16px; font-weight:500; line-height:1.9; }
.lx-reading { margin-top:14px; border-top:1px solid var(--line); }
.lx-reading summary { padding:12px 0; cursor:pointer; color:var(--accent); font-weight:600; }
.lx-field dl { font-size:15px; }
.lx-field dt { font-size:14px; font-weight:700; color:var(--ink); margin-top:20px; }
.lx-field dd p,.lx-field dd li { margin-bottom:10px; line-height:1.9; }
.lx-btn.lx-step,.lx-btn.lx-today,.lx-btn.lx-link { min-height:44px; }
.lx-cal .lx-btn { min-height:76px; }
.ss-card { padding:22px 0; }
.ss-head b { font-size:18px; }
.ss-why > div { background:transparent; padding:2px 0; }
summary:focus-visible,a:focus-visible,button:focus-visible { outline:3px solid var(--accent); outline-offset:4px; }
@media(max-width:600px) {
 .card,.lx-level { padding:16px; border-radius:14px; }
 .lx-field { padding:16px; }
 .lx-head { align-items:flex-start; flex-wrap:wrap; }
 .lx-crumb { font-size:14px; }
 .lx-cell { width:88px; }
 .pillars { padding:10px; }
 .lx-cal { gap:3px; }
 .lx-cal .lx-btn { min-height:70px; font-size:13px; }
}
@media(prefers-color-scheme:dark) {
 :root { --bg:#151e24; --card:#1d2932; --ink:#e7edf2; --muted:#b2c0cc; --line:#394852; --accent:#8bd4bb; }
 .lx-cell.is-selected { background:#25443d; }
}

@media (max-width: 600px) {
 .pillars { padding: 10px 4px; overflow-x: visible; }
 .pillars table { min-width: 0; width: 100%; table-layout: fixed; border-spacing: 3px; }
 .pillars thead th:first-child, .pillars th[scope="row"] { width: 42px; min-width: 0; font-size: 11px; }
 .pillars th, .pillars .meta-row td { font-size: 12px; }
 .pillars td { padding: 7px 2px; overflow-wrap: anywhere; }
 .pillars .char b { font-size: clamp(25px, 7vw, 34px); }
 .pillars .char small { font-size: 12px; }
 .pillars .tag { max-width: 100%; box-sizing: border-box; white-space: normal; padding: 3px 2px; font-size: 11px; line-height: 1.5; }
 .pillars .hidden-stem { white-space: normal; }
}

.tag-gongmang { color: #65517e; background: #f1edf7; border-color: #cfc2df; font-weight: 600; }
@media (prefers-color-scheme: dark) {
 .tag-gongmang { color: #dfd0f0; background: #393047; border-color: #7c6894; }
}

/* SEO 안내, 자주 묻는 질문 */
.seo-guide { margin-top: 32px; }
.seo-guide p, .seo-guide li { font-size: 14px; color: var(--muted); }
.seo-guide h3 { margin: 18px 0 8px; font-size: 16px; }
.faq { border-top: 1px solid var(--line); padding: 10px 0; }
.faq summary { cursor: pointer; font-weight: 600; color: var(--ink); }
.faq p { margin: 6px 0 0; }