@font-face { font-family: Pretendard; src: url('/fonts/PretendardVariable.woff2') format('woff2'); font-style: normal; font-weight: 100 900; font-display: swap; }
:root { font-family: Pretendard, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif; color: #393c30; --olive: #49573c; --paper: #f6f2e9; --ink: #343c2d; }
#stage, .context-bar { background: var(--paper); }
.masthead { background: #fdfaf4; }
.wordmark { font-weight: 750; letter-spacing: -.7px; }
.conversation, #review-body, #dialog-body { scrollbar-width: thin; scrollbar-color: #b9baa7 transparent; }
.conversation::-webkit-scrollbar, #review-body::-webkit-scrollbar, #dialog-body::-webkit-scrollbar { width: 5px; }
.conversation::-webkit-scrollbar-thumb, #review-body::-webkit-scrollbar-thumb, #dialog-body::-webkit-scrollbar-thumb { border-radius: 9px; background: #b9baa7; }
.conversation-body { padding-top: 24px; }
.chat-row { gap: 9px; margin-bottom: 20px; }
.avatar { box-shadow: 0 0 0 2px #fffcf4; }
.chat-name { color: #70684e; font-weight: 600; font-size: 11px; margin-bottom: 7px; }
.bubble { background: #fffefa; padding: 12px 15px; border: 1px solid #e9e4d9; box-shadow: 0 3px 10px #4e4a2a06; border-radius: 6px 19px 19px 19px; line-height: 1.7; }
.bubble h1, .bubble p { font-size: 15px; font-weight: 700; line-height: 1.7; letter-spacing: -.3px; color: #384033; margin: 0; }
.bubble.continuation { margin-top: 6px; border-radius: 19px; }
.user .bubble { background: #dfe8d4; border-color: #d7e0cc; color: #38482e; font-size: 14px; }
.eyebrow { display: block; font-size: 9px; font-weight: 650; letter-spacing: 1.7px; color: #8a8e71; }
.menu-heading { margin: 26px 0 13px; }
.menu-heading h2 { margin: 6px 0 0; color: #3f4936; font-size: 16px; font-weight: 700; letter-spacing: -.4px; }
.fortune-cards { gap: 12px; }
.fortune-card { min-height: 106px; border: 1px solid #d8c9a4; border-radius: 19px; color: #53482e; background: linear-gradient(115deg,#f5e6be,#f0e9d5); box-shadow: 0 4px 11px #5a4f2f07; transition: border-color .15s, box-shadow .15s; }
.fortune-card:hover { border-color: #9a9f79; box-shadow: 0 4px 15px #5a4f2f17; }
.fortune-card:focus-visible { outline-offset: -4px; }
.fortune-card.next-year { color: #f6f5e9; background: linear-gradient(110deg,#63714f,#46583e); border-color: #536345; }
.card-art, .next-year .card-art { flex-basis: 104px; background: transparent; }
.card-art::before { content: ''; position: absolute; width: 115px; height: 115px; top: -12px; left: -26px; border: 1px solid #c4a6637a; border-radius: 50%; box-shadow: 0 0 0 9px #b6985820, 0 0 0 18px #b6985810; }
.next-year .card-art::before { border-color: #e1e8c570; box-shadow: 0 0 0 9px #e1e8c510, 0 0 0 18px #e1e8c508; }
.card-art img { width: 182%; top: -45%; left: -22%; }
.card-copy small { font-size: 9px; font-weight: 600; letter-spacing: .6px; color: #8f7851; }
.card-copy strong { font-size: 18px; font-weight: 750; margin-block: 6px; }
.card-copy em { font-size: 11px; color: #776747; }
.next-year .card-copy small, .next-year .card-copy em { color: #d6dfbe; }
.card-arrow { display: grid; place-items: center; border: 1px solid #8c764c3d; border-radius: 50%; width: 26px; height: 26px; font-size: 15px; }
.next-year .card-arrow { border-color: #d6dfbe45; }
.preview-note { margin-top: 22px; border-top: 1px solid #deded0; padding-top: 14px; display: flex; gap: 12px; font-size: 11px; line-height: 1.8; color: #8b8c7b; }
.preview-note > span { white-space: nowrap; color: #777c66; font-weight: 650; }
.preview-note p { margin: 0; }
.primary { background: var(--olive); border-color: var(--olive); font-weight: 650; }
.bottom-nav { position: relative; }
.bottom-nav button { position: relative; gap: 3px; font-weight: 500; color: #929582; }
.bottom-nav button svg { position: relative; z-index: 1; }
.bottom-nav [aria-current='page'] { color: #465a37; }
.bottom-nav [aria-current='page']::before { content: ''; position: absolute; width: 42px; height: 25px; border-radius: 12px; background: #e5ebdc; top: 4px; }
.action-dock { background: #fdfbf5; border-color: #deded2; }
.choice { border-color: #dce0d0; color: #4c5741; background: #fffefa; }
.choice:hover { border-color: #94a37e; }
.form-card, .summary-list { background: #fffef9; border-color: #e1e3d7; }
.result-tabs [aria-selected='true'] { color: #435837; border-color: #566b43; }
/* Modals reserve fixed title/actions; only their contents scroll. */
#info-dialog, #review-dialog { width: min(440px,calc(100vw - 28px)); max-width: 440px; max-height: calc(100dvh - 32px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px)); padding: 0; border: 1px solid #e2ddcf; border-radius: 24px; background: #fffdf7; color: #4b4b39; overflow: hidden; box-shadow: 0 18px 80px #2b301e40; }
#info-dialog[open], #review-dialog[open] { display: flex; flex-direction: column; }
#review-dialog::backdrop, #info-dialog::backdrop { background: #23291e66; }
.dialog-heading { flex-shrink: 0; padding: 22px 22px 16px; border-bottom: 1px solid #eeebdf; }
.dialog-heading h2 { font-size: 18px; font-weight: 700; margin-top: 6px; }
#review-body, #dialog-body { padding: 0 22px 20px; margin: 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; font-size: 14px; line-height: 1.8; }
#review-body .summary-list { border: 0; padding: 0; background: none; }
.review-lead { font-size: 14px; line-height: 1.8; margin: 18px 0 6px; }
.dialog-footer { display: flex; gap: 8px; flex-shrink: 0; padding: 14px 22px calc(16px + env(safe-area-inset-bottom,0px)); border-top: 1px solid #e8e8db; background: #f7f8ef; }
.dialog-footer .primary { justify-content: center; }
.dialog-footer button { border-radius: 12px; min-height: 44px; }
#dialog-body { padding-top: 18px; }
html[data-keyboard-open="true"] #info-dialog,
html[data-keyboard-open="true"] #review-dialog { top: calc(var(--visual-top, 0px) + 8px); bottom: auto; margin-block: 0; max-height: calc(var(--visible-height, 100dvh) - 16px); }
html[data-keyboard-open="true"] .dialog-heading { padding-block: 10px; }
#dialog-actions:not(:empty) { flex-shrink: 0; padding: 14px 22px; border-top: 1px solid #e8e8db; }
/* All five elements retain labels as well as color. */
[data-element='목'] { --element: #4e805e; --element-soft: #e2efdf; --element-ink: #305d3d; }
[data-element='화'] { --element: #ca6976; --element-soft: #f9e0e5; --element-ink: #943f50; }
[data-element='토'] { --element: #bd943a; --element-soft: #f7edc7; --element-ink: #806019; }
[data-element='금'] { --element: #897db2; --element-soft: #eae5f4; --element-ink: #61518d; }
[data-element='수'] { --element: #508bb9; --element-soft: #dcebf7; --element-ink: #336e9c; }
.basis-hero { margin-bottom: 18px; }
.basis-hero h1 { color: #37462e; margin: 7px 0; font-size: 22px; font-weight: 750; letter-spacing: -.6px; }
.basis-hero p { font-size: 12px; color: #858774; margin: 0; }
.natal-card, .basis-card { border: 1px solid #e1e3d6; border-radius: 19px; background: #fffef9; margin-bottom: 14px; box-shadow: 0 3px 12px #4b503008; }
.natal-card { padding: 18px 12px 12px; }
.basis-card-title { display: flex; justify-content: space-between; gap: 8px; align-items: center; margin: 0 5px 18px; }
.basis-card h2, .basis-card-title h2 { font-size: 16px; color: #3b4931; margin: 0; font-weight: 750; }
.verified-label { color: #788467; font-size: 10px; background: #edf1e4; border-radius: 6px; padding: 4px 7px; }
.natal-grid { display: grid; grid-template-columns: 32px repeat(4,minmax(0,1fr)); row-gap: 14px; column-gap: 3px; text-align: center; align-items: center; }
.pillar-heading { color: #949783; font-size: 11px; }
.pillar-heading small { display: block; font-size: 11px; margin-top: 4px; color: #646d56; }
.pillar-heading.me { color: #4c6a37; font-weight: 750; }
.pillar-cell { min-width: 0; }
.element-tile { display: inline-grid; place-items: center; border-radius: 12px; width: 48px; height: 52px; color: var(--element-ink,#9a9c8e); background: var(--element-soft,#f0f0e9); font-family: Pretendard, sans-serif; font-size: 29px; font-weight: 650; box-shadow: inset 0 0 0 1px #ffffff55; }
.element-tile.mini { width: 27px; height: 30px; border-radius: 7px; font-size: 19px; }
.pillar-cell > small { display: block; font-size: 10px; min-height: 20px; margin-top: 5px; color: #8e947e; }
.term { border: 0; padding: 3px 0; background: none; color: #6a7a58; font: inherit; font-size: 11px; cursor: pointer; text-decoration: underline dotted #9ba88b; text-underline-offset: 3px; }
.term span { font-size: 9px; opacity: .65; }
.table-label .term { font-size: 9px; }
.table-label .term span, .pillar-cell .term span { display: none; }
.day-master { display: flex; gap: 9px; align-items: center; background: var(--element-soft); padding: 12px; border-radius: 12px; margin-top: 17px; }
.day-master > div { flex: 1; }
.day-master span:not(.element-tile) { display: block; font-size: 10px; color: var(--element-ink); }
.day-master strong { font-size: 13px; font-weight: 650; color: var(--element-ink); }
.day-master .term { color: var(--element-ink); white-space: nowrap; }
.unknown-note { font-size: 10px; color: #96927c; text-align: center; margin: 12px 0 0; }
.relations { margin-top: 14px; }
.relation-row { padding: 7px 5px; border-bottom: 1px dashed #e5e5d8; font-size: 11px; display: flex; justify-content: space-between; gap: 6px; align-items: center; color: #7b806a; }
.natal-card > .helper { padding-inline: 5px; font-size: 10px; }
.basis-card > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding: 18px; font-size: 16px; font-weight: 750; color: #3d4c31; }
.basis-card > summary::-webkit-details-marker { display: none; }
.basis-card summary small { display: block; margin-top: 5px; font-size: 10px; font-weight: 400; color: #93977e; }
.fold-mark { flex-shrink: 0; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #eff2e7; color: #81936e; }
.fold-mark::after { content: '+'; font-weight: 400; }
.basis-card[open] > summary .fold-mark::after { content: '−'; }
.basis-card-body { padding: 0 18px 18px; }
.basis-card-body > .helper { font-size: 11px; }
.element-row { display: grid; grid-template-columns: 53px minmax(0,1fr) 30px; gap: 10px; align-items: center; margin: 12px 0; color: var(--element-ink); }
.element-name { font-weight: 750; font-size: 14px; }
.element-name small { font-size: 10px; font-weight: 400; margin-left: 5px; opacity: .7; }
.element-row strong { font-size: 14px; text-align: right; }
.element-row strong small { font-size: 10px; font-weight: 400; margin-left: 3px; }
meter { width: 100%; height: 13px; appearance: none; border: none; background: transparent; }
meter::-webkit-meter-bar { background: #f0f1e9; border: 0; border-radius: 6px; }
meter::-webkit-meter-optimum-value { background: var(--element,#647354); border-radius: 6px; }
meter::-moz-meter-bar { background: var(--element,#647354); border-radius: 6px; }
.yin-yang { display: flex; align-items: center; gap: 9px; font-size: 11px; color: #777d62; margin-top: 20px; }
.yin-yang span { white-space: nowrap; }
.yin-yang meter { --element: #baac75; }
.element-diagram { width: 100%; max-height: 230px; margin-top: 20px; overflow: visible; }
.generation-line { fill: none; stroke: #b6c1a6; stroke-width: 1.5; marker-end: url('#flow-arrow'); }
.control-line { fill: none; stroke: #d9dece; stroke-width: 1; stroke-dasharray: 4 5; }
.element-node { fill: var(--element-soft); stroke: var(--element); stroke-width: 1; }
.node-text { fill: var(--element-ink); font-size: 15px; font-weight: 700; text-anchor: middle; }
.diagram-center { fill: #f8f8ef; stroke: #e0e6d6; }
.diagram-label { fill: #839171; font-size: 13px; text-anchor: middle; }
.diagram-legend { display: flex; justify-content: center; gap: 12px; font-size: 9px; color: #929a84; }
.detail-grid { display: grid; grid-template-columns: 42px repeat(4,minmax(0,1fr)); gap: 15px 3px; font-size: 11px; text-align: center; align-items: start; }
.detail-heading { color: #91977e; }
.hidden-stems > span { display: flex; flex-direction: column; align-items: center; gap: 3px; margin-bottom: 10px; }
.hidden-stems .term { font-size: 10px; }
.hidden-stems .term span { display: none; }
.judgment-item { background: #f6f7ef; border: 1px solid #e5e8da; border-radius: 12px; padding: 14px; margin-bottom: 10px; }
.judgment-item h3 { font-size: 14px; margin: 0; display: flex; justify-content: space-between; }
.judgment-item h3 span { font-size: 10px; color: #8e947d; font-weight: 400; }
.judgment-item p { font-size: 12px; line-height: 1.8; color: #838873; }
.luck-intro { display: flex; gap: 8px; align-items: center; font-size: 10px; color: #8d967e; margin-bottom: 14px; }
.luck-intro strong { color: #5a7047; background: #edf1e3; border-radius: 5px; padding: 4px 6px; }
.decade-grid, .month-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; }
.decade, .month-cell { display: flex; flex-direction: column; align-items: center; padding: 12px 2px; gap: 9px; background: #fbfbf4; border: 1px solid #e7eadd; border-radius: 12px; color: #6f7c5f; }
.decade > span, .month-cell > span { font-size: 11px; }
.decade > small, .month-cell > small { font-size: 8px; color: #969d87; }
.selected-period { background: #eff5e5; border-color: #90a76a; }
.selected-period em { font-size: 8px; color: #718a49; font-style: normal; }
.pillar-pair { display: inline-flex; flex-direction: column; gap: 4px; align-items: center; }
.pillar-pair > small { font-size: 10px; color: #8a927a; }
.annual-period { display: flex; align-items: center; gap: 17px; border-bottom: 1px solid #eff0e6; padding: 14px 0; }
.annual-period > div > * { display: block; font-size: 12px; line-height: 1.8; color: #7e886f; }
.annual-period > div > strong { color: #515e42; font-weight: 600; }
.annual-period > div > small { font-size: 10px; }
.unavailable-note { padding: 16px; background: #f5f6ee; border-radius: 12px; font-size: 12px; line-height: 1.8; color: #899077; }
.unavailable-note strong { color: #62734d; font-weight: 600; }
.interval-card { display: flex; align-items: center; gap: 18px; padding: 16px 0; border-bottom: 1px solid #eceee1; font-size: 12px; }
.interval-card p { margin: 4px 0 !important; }
.interval-card small { font-size: 11px; color: #8b927e; }
@media (max-width:350px) { .card-art { flex-basis: 84px; } .card-copy strong { font-size: 16px; } .card-copy small { letter-spacing: 0; font-size: 8px; } .fortune-card { gap: 9px; padding-right: 10px; } .element-tile { width: 42px; height: 48px; font-size: 27px; } .natal-card { padding-inline: 8px; } .basis-card-body { padding-inline: 12px; } .natal-grid { grid-template-columns: 27px repeat(4,minmax(0,1fr)); } }
@media (prefers-reduced-motion:reduce) { .fortune-card { transition: none; } }
/* 3.27.0 · front door: logo and who to talk with. The room, menus and login wait inside. */
#stage[data-lobby="true"] .room, #stage[data-lobby="true"] .bottom-nav, #stage[data-lobby="true"] #login, #stage[data-lobby="true"] .wordmark { display: none; }
#stage[data-lobby="true"] .masthead { justify-content: flex-end; }
.lobby { padding: 18px 2px 24px; }
.lobby-logo { text-align: center; margin: 18px 0 30px; }
.lobby-logo h1 { margin: 8px 0 10px; font-size: 38px; letter-spacing: -1.5px; color: #3f4936; font-weight: 800; }
.lobby-logo p { margin: 0; color: #7b6d55; font-size: 14px; }
.friend-list { display: grid; gap: 14px; }
.friend-card { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; padding: 14px 16px 14px 14px; border: 1px solid #d8c9a4; border-radius: 20px; background: linear-gradient(115deg,#f5e6be,#f0e9d5); color: #53482e; }
.friend-card:first-child { color: #f6f5e9; background: linear-gradient(110deg,#63714f,#46583e); border-color: #536345; }
.friend-art { flex: 0 0 72px; height: 72px; border-radius: 18px; overflow: hidden; background: #efe3c3; display: grid; place-items: center; }
.friend-art img { width: 100%; height: 100%; object-fit: cover; }
.friend-art.cat { font-size: 30px; filter: grayscale(.4); }
.friend-copy { display: grid; gap: 5px; }
.friend-copy strong { font-size: 17px; letter-spacing: -.4px; }
.friend-copy em { font-style: normal; font-size: 12.5px; line-height: 1.55; opacity: .85; }
.friend-card.locked { opacity: .78; }
.soon-badge { display: inline-block; margin-left: 4px; padding: 2px 7px; border-radius: 99px; background: #fffaf0; color: #8a6d3b; border: 1px solid #dcc79d; font-size: 10.5px; font-weight: 700; vertical-align: 2px; }
.lobby-note { margin-top: 14px; text-align: center; }
/* 3.27.0 · the whole talk is chat: answers are chips or short inline boxes under 곰복이. */
.chip-row { display: flex; gap: 8px; padding: 2px 2px 6px; }
.chip-row.scroll-row { overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin-right: -14px; padding-right: 14px; }
.chip-row.scroll-row::-webkit-scrollbar { display: none; }
.chip-row.wrap-row { flex-wrap: wrap; }
.chip { flex: 0 0 auto; scroll-snap-align: start; display: inline-flex; align-items: center; gap: 5px; border: 1px solid #d4dbc4; background: #fffefa; color: #4c5741; border-radius: 99px; padding: 9px 15px; font-size: 14px; line-height: 1.3; white-space: nowrap; cursor: pointer; }
.chip[aria-pressed="true"], label.chip:has(input:checked) { background: #e3ead4; border-color: #75815a; color: #3f4a2f; font-weight: 700; }
label.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
label.chip:has(input:focus-visible) { outline: 2px solid #75815a; outline-offset: 2px; }
.birth-form .date-line, .birth-form .place-line { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
.inline-field { display: inline-flex; align-items: center; gap: 5px; font-size: 15px; color: #4c5741; }
.inline-field input { width: 3.4em; padding: 9px 8px; text-align: center; font-size: 16px; border-radius: 12px; }
.inline-field input[name="year"] { width: 4.6em; }
.place-line select { font-size: 16px; padding: 9px 10px; border-radius: 12px; max-width: 46vw; }
.answer-card input[name="custom"] { width: 100%; margin-top: 6px; padding: 10px 13px; font-size: 16px; border-radius: 14px; }
.summary-bubble { padding: 4px 14px; }
.summary-bubble .summary-list { border: 0; padding: 0; background: none; }
.summary-bubble .summary-list > div { padding: 8px 0; display: grid; grid-template-columns: 74px 1fr; gap: 8px; align-items: baseline; }
.summary-bubble .summary-list dd { margin: 0; font-size: 13.5px; line-height: 1.6; }
.context-line .text-button[data-action="restart"] { color: #7a6a4d; }
/* 3.28.0 · chips flow on to the next line instead of sliding sideways. */
.chip-row.wrap-row { flex-wrap: wrap; }
/* 3.28.0 · product cards two to a row: picture on top, name below. */
.fortune-cards { grid-template-columns: 1fr 1fr; gap: 10px; }
.fortune-card, .fortune-card.next-year { flex-direction: column; align-items: stretch; gap: 0; min-height: 0; padding: 0; text-align: left; }
.fortune-card .card-art { flex: 0 0 auto; height: 96px; }
.fortune-card .card-art::before { display: none; }
.fortune-card .card-art img { width: 86%; left: 7%; top: -4%; }
.fortune-card .card-copy { padding: 10px 12px 13px; }
.fortune-card .card-copy small { font-size: 10px; letter-spacing: .2px; }
.fortune-card .card-copy strong { font-size: 17px; margin-block: 3px 2px; }
.fortune-card .card-copy em { font-size: 11px; line-height: 1.4; }
/* 3.28.0 · entering the room. */
#stage[data-intro] .consultation-panel { pointer-events: none; }
#stage[data-intro="video"] .consultation-panel, #stage[data-intro="rise"] .consultation-panel { visibility: hidden; }
#stage[data-intro="video"] .presence { position: relative; z-index: 3; transform: translateY(var(--intro-shift, 0)); }
#stage[data-intro="video"] .masthead { opacity: 0; }
#stage[data-intro="rise"] .presence { position: relative; z-index: 3; transform: translateY(0); transition: transform 1.2s cubic-bezier(.16,1,.3,1); }
#stage[data-intro="rise"] .masthead { opacity: 1; transition: opacity .8s ease-out; }
#stage[data-intro="talk"] .chat-row:not(.intro-seen) { visibility: hidden; }
#stage[data-intro] .intro-wait { visibility: hidden; }
#stage[data-intro] .intro-pop { animation: intro-pop .4s cubic-bezier(.3,1.4,.5,1) both; }
@keyframes intro-pop { from { opacity: 0; transform: scale(.88) translateY(8px); } to { opacity: 1; transform: none; } }
/* 3.29.0 · '몰라' and '넘어갈게' as chips next to the answer. */
.answer-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; }
.answer-foot .character-count { margin: 0; }
.birth-form .chip[data-action] { margin-left: 2px; }
/* The room stays out of sight until the arrival actually starts, so 곰복이 never sits there first. */
#stage[data-intro="video"] .room { opacity: 0; transition: opacity .35s ease-out; }
#stage[data-intro="video"][data-motion-role="arrival"] .room { opacity: 1; }