.ohaeng { display: flex; align-items: center; gap: 16px; }
.ohaeng > svg { flex: 0 0 132px; }
.legend { flex: 1; display: grid; gap: 8px; }
.legend div { display: flex; align-items: center; gap: 8px; font-size: 16px; min-height: 28px; }
.legend i { width: 14px; height: 14px; border-radius: 4px; flex: none; }
.legend b { margin-left: auto; }
.legend .hi { font-weight: 800; }
.tip { margin: 16px 0 0; padding: 12px 16px; border-radius: 12px; background: #f3eedf; font-size: 16px; line-height: 1.65; }
.tip b { color: var(--pine2); }
.daeun { display: flex; gap: 8px; overflow-x: auto; margin: 0 -20px; padding: 4px 20px 8px; scrollbar-width: none; }
.daeun::-webkit-scrollbar { display: none; }
.d { flex: 0 0 70px; border-radius: 16px; background: #fff; text-align: center; padding: 12px 0; border: 1px solid var(--line); line-height: 1.35; }
.d small { display: block; font-size: 14px; color: var(--ink2); }
.d b { display: block; font-family: var(--hanja); font-weight: 400; font-size: 24px; margin: 3px 0 1px; line-height: 1.1; }
.d span { font-size: 14px; color: var(--ink3); }
.d.now { background: var(--pine); border-color: var(--pine); color: #fff; }
.d.now small, .d.now span { color: #d6e6dd; }
.d.now b { color: var(--gold2); }
.d.now em { display: block; font-style: normal; font-size: 14px; font-weight: 800; color: var(--pine); background: var(--gold2); border-radius: 999px; margin: 4px 8px 0; }
.daeun .d small .yr { display: block; font-size: 14px; color: var(--ink2); font-weight: 400; }
@property --fun-p { syntax: '<percentage>'; inherits: false; initial-value: 100%; }
@keyframes fun-sweep { from { --fun-p: 0%; } to { --fun-p: 100%; } }
@keyframes fun-rise { from { opacity: 0.4; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.fun-sweep > svg { -webkit-mask: conic-gradient(#000 var(--fun-p), transparent 0); mask: conic-gradient(#000 var(--fun-p), transparent 0); animation: fun-sweep var(--t-reveal) var(--e-brush) both; }
.el-donut { flex: 0 0 132px; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 50%; }
.legend .el-row { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 0 8px; margin: 0 -8px; border: 0; border-radius: 12px; background: none; font: inherit; font-size: 16px; color: inherit; text-align: left; cursor: pointer; }
.legend .el-row.hi { font-weight: 800; }
.legend .el-row::after { content: "\203A"; color: var(--ink2); margin-left: 8px; }
.legend .el-row:active, .el-donut:active { background: var(--line2); }
.legend { gap: 0; }
.habit-list { margin: 12px 0 0; padding-left: 24px; display: grid; gap: 8px; font-size: 16px; line-height: 1.65; }
.fsheet { width: min(100%, var(--app, 480px)); max-width: 100%; max-height: 82vh; margin: auto auto 0; padding: 8px 20px 24px; border: 0; border-radius: 12px 12px 0 0; background: var(--paper); color: var(--ink); box-sizing: border-box; overflow-y: auto; overflow-x: hidden; }
.fsheet[open] { animation: fun-rise var(--t-fast) var(--e-brush); }
.fsheet::backdrop { background: rgba(18, 26, 22, 0.45); }
.fs-grip { width: 100%; height: 28px; touch-action: none; cursor: grab; position: relative; }
.fs-grip::before { content: ""; position: absolute; left: 50%; top: 10px; width: 44px; height: 5px; margin-left: -24px; border-radius: 4px; background: #cfc6b2; }
.fs-x { position: absolute; right: 10px; top: 6px; min-height: 44px; min-width: 44px; padding: 0 12px; border: 0; background: none; font: inherit; font-size: 16px; color: var(--ink2); cursor: pointer; }
.fs-h { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-size: 22px; font-family: var(--sans); }
.fs-h i { width: 16px; height: 16px; border-radius: 4px; }
.fs-mean { margin: 0; font-size: 17px; color: var(--ink3); }
.fs-k { margin: 16px 0 8px; font-size: 16px; font-weight: 700; }
.fs-pill { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.fs-p { display: grid; justify-items: center; gap: 2px; padding: 8px 0; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.fs-p small { font-size: 14px; color: var(--ink2); }
.fs-p b { font-family: var(--hanja); font-weight: 400; font-size: 24px; line-height: 1.2; color: var(--ink2); padding: 0 4px; border-radius: 8px; }
.fs-p b.on { color: #fff; background: var(--c); }
.fs-p .fs-none { font-size: 14px; color: var(--ink2); padding: 8px 0; }
.fs-say { margin: 12px 0 0; font-size: 16px; line-height: 1.7; }
.daeun .d-li { flex: 0 0 70px; display: flex; }
.daeun button.d { flex: 1; font: inherit; color: inherit; cursor: pointer; min-height: 44px; }
.daeun button.d.open:not(.now) { border-color: var(--pine); box-shadow: inset 0 0 0 1px var(--pine); }
.du-more { display: grid; gap: 4px; margin: 8px 0 0; padding: 12px 16px; border-radius: 16px; background: #f3eedf; font-size: 16px; line-height: 1.65; }
.du-more[hidden] { display: none; }
.du-more .du-t { font-weight: 800; color: var(--pine2); }
.du-more:not([hidden]) { animation: fun-rise var(--t-fast) var(--e-brush); }
.quiz { margin: 0 0 16px; }
.quiz-q { margin: 0; font: 800 18px/1.4 var(--sans); }
.quiz-chips { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.quiz-chip { min-height: 48px; border: 1.5px solid #d8d0bd; border-radius: 12px; background: #fffdf8; font: 800 16px var(--sans); color: var(--ink); cursor: pointer; transition: transform var(--t-press, 100ms) var(--e-brush); }
.quiz-chip:active { transform: scale(0.97); }
.quiz-chip[aria-pressed="true"] { border-color: var(--pine); box-shadow: inset 0 0 0 2px var(--pine); }
.quiz-a { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 12px 12px; border-radius: 12px; background: #f3ecdb; }
.quiz-a[hidden] { display: none; }
.quiz-t { flex: 1; margin: 0; font: 700 16px/1.55 var(--sans); }
.quiz-gg:empty { display: none; }
.quiz-in .quiz-t { animation: p1-fade var(--t-base) ease-out 400ms both; }
.quiz-share { margin-top: 12px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.quiz-share[hidden] { display: none; }
.quiz-sh { margin: 0; font: 700 16px var(--sans); }
.quiz-sub { margin: 2px 0 8px; font-size: 16px; color: var(--ink2); }
@keyframes p1-fade { from { opacity: 0.2; } to { opacity: 1; } }
.legend .el-row { white-space: nowrap; }
.ohaeng .el-donut { flex: 0 0 clamp(72px, calc(100% - 152px), 132px); }
.ohaeng .legend { min-width: 0; }
.ohaeng .el-donut > svg { display: block; width: 100%; height: auto; }
.ohaeng:has(.el-donut) { gap: 12px; }
.legend .el-none { padding: 2px 12px; border: 1.5px dashed #b9b2a0; border-radius: 999px; font-size: 14px; font-weight: 700; color: var(--ink2); }
#elements.el-in .el-none { animation: mo-pop 320ms var(--e-seal) 420ms both; }
@keyframes mo-pop { from { opacity: 0; transform: scale(.6); } }
.replay-btn { display: block; min-height: 44px; margin: 4px auto 0; padding: 0 16px; border: 0; background: none; font: 700 16px var(--sans); color: var(--pine2); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.replay-btn[hidden] { display: none; }
.map-banner { display: grid; grid-template-columns: 124px 1fr; gap: 12px; align-items: center; margin: 16px 20px 0; padding: 8px 16px 8px 8px; border-radius: 20px; background: #fff; border: 2px solid var(--gold); box-shadow: var(--shadow-s); text-decoration: none; color: var(--ink); }
.mb-map { display: block; border-radius: 16px; background: #fffdf6; overflow: hidden; }
.mb-map .saju-map .nl, .mb-map .saju-map .zl, .mb-map .saju-map .ll, .mb-map .saju-map .chip { display: none; }
.mb-text { display: grid; gap: 3px; }
.mb-text b { font-size: 19px; font-family: var(--sans); }
.mb-text > span { font-size: 16px; color: var(--ink3); line-height: 1.5; }
.mb-text em { font-style: normal; font-size: 16px; font-weight: 800; color: var(--seal2); }
@keyframes fun-fade { from { opacity: 0; } to { opacity: 1; } }
.habit { margin-top: 16px; }
.habit-h { margin: 0; font-size: 18px; font-weight: 800; color: var(--ink); }
.habit-sub { margin: 4px 0 0; font-size: 16px; color: var(--ink2); }
.habit-more { margin-top: 12px; }
.habit-today { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 12px; padding: 12px 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.habit-today .ht-k { font-size: 16px; color: var(--ink2); }
.habit-today .ht-v { font-size: 17px; flex: 1 1 auto; }
.habit-today .ht-do { margin-left: auto; }
.habit-today .ht-do[aria-pressed="true"] { background: #fff; color: var(--pine); box-shadow: inset 0 0 0 2px var(--pine); } 
.habit-note { margin: 8px 0 0; font-size: 15px; color: var(--ink2); }
.habit-home { min-height: 58px; margin-top: 8px; }
.habit-home .habit-today { margin-top: 0; padding: 4px 8px 4px 12px; flex-wrap: nowrap; }
.habit-home .ht-v { min-width: 0; }
.habit-home .ht-do { min-height: 46px; padding: 8px 16px; }
@keyframes mo-seal { 0%, 38% { opacity: 0; transform: rotate(4deg) scale(1.16); } 60% { opacity: 1; transform: rotate(4deg) scale(.98); } 100% { opacity: 1; transform: rotate(4deg); } }
@keyframes mo-brush { from { opacity: .15; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
@keyframes mo-write { from { opacity: 0; transform: translateY(-6px) scaleY(.6); } to { opacity: 1; transform: none; } }
.habit-today > .gk { position: absolute; right: 10px; top: -26px; width: 30px; height: 30px; z-index: 1; }
.habit-today > .gk .gk-mark { font: 800 16px/1 var(--serif); }
.gk.mo-still .gk-mark { animation: none; }
.gk.mo-still .gk-tool { display: none; }
.habit-home + .habit-note { margin-top: 8px; }
.gk-toast.mo-calm { animation: none; font-weight: 600; }
.travel-row { display: grid; gap: 2px; width: 100%; min-height: 56px; margin-top: 16px; padding: 12px 40px 12px 16px; border: 1px solid var(--line); border-radius: 12px; background: #fff; font: inherit; color: var(--ink); text-align: left; cursor: pointer; position: relative; }
.travel-row[hidden] { display: none; }
.travel-row b { font-size: 17px; }
.travel-row span { font-size: 16px; color: var(--ink2); }
.travel-row::after { content: "\203A"; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 22px; color: var(--ink2); }
.travel-list { margin: 12px 0 0; padding-left: 24px; display: grid; gap: 12px; }
.travel-list b { font-size: 17px; }
.travel-list small { margin-left: 8px; font-size: 16px; color: var(--ink2); }
.travel-list p { margin: 2px 0 0; font-size: 16px; line-height: 1.6; }
.travel-foot { margin: 12px 0 0; font-size: 16px; color: var(--ink2); }
.mb-map { aspect-ratio: 420 / 440; }
.map-banner { box-shadow: none; }
.saju-map, .site-map { display: block; width: 100%; height: auto; user-select: none; -webkit-user-select: none; }
.saju-map .zl { font-size: 16px; font-weight: 700; fill: var(--ink3); }
.saju-map .zh { font-family: var(--hanja); font-size: 22px; font-weight: 400; }
.saju-map .ll { font-size: 15px; font-weight: 800; }
.saju-map .nh { font-family: var(--hanja); font-size: 24px; fill: #fff; pointer-events: none; }
.saju-map .nl { font-size: 16px; font-weight: 800; fill: var(--ink); paint-order: stroke; stroke: #fffdf6; stroke-width: 4px; pointer-events: none; }
.saju-map .nd, .site-map .sn { cursor: pointer; }
.saju-map.is-live .nd, .saju-map.is-live .lk, .saju-map.is-live .zn { cursor: pointer; outline: none; }
.saju-map .nd-in { transform-box: fill-box; transform-origin: center; transition: transform 0.18s ease; }
.saju-map .nd:hover .nd-in, .saju-map .nd:focus-visible .nd-in, .saju-map .nd.hot .nd-in { transform: scale(1.14); }
.saju-map .glow { opacity: 0.25; transform-box: fill-box; transform-origin: center; animation: dd-breathe 2.6s ease-in-out infinite; }
.saju-map .nd.me .glow { animation-duration: 2s; }
.saju-map .nd.hl .glow { opacity: 0.85; animation: none; }
.saju-map.coach-on .nd.me .glow { stroke-width: 6; animation-duration: 1.4s; }
.saju-map .fr { opacity: 0; }
.saju-map .nd:focus-visible .fr { opacity: 1; }
@keyframes dd-breathe { 0%, 100% { opacity: 0.15; transform: scale(0.92); } 50% { opacity: 0.65; transform: scale(1.1); } }
.saju-map .chip { transition: fill 0.15s ease; }
.saju-map .lk:hover .chip, .saju-map .lk:focus-visible .chip { fill: #fff1cf; stroke-width: 3; }
.saju-map .lk:focus-visible .chip { stroke: #1d1a14; }
.saju-map .lq { font-size: 15px; font-weight: 900; fill: #fff; pointer-events: none; }
.saju-map .zn-hit { fill: transparent; }
.saju-map .zn-ring { fill: none; stroke-width: 2.5; stroke-dasharray: 5 6; opacity: 0; transition: opacity 0.15s ease; }
.saju-map .zn:hover .zn-ring, .saju-map .zn:focus-visible .zn-ring, .saju-map .zn.hl .zn-ring { opacity: 0.85; }
.saju-map .lkl, .saju-map .sma { cursor: pointer; }
.saju-map .lkl.hot, .saju-map .sma.hot { opacity: 1; }
.saju-map.is-live .sm, .saju-map.is-live .lmore { cursor: pointer; outline: none; }
.saju-map .sm:hover .chip, .saju-map .sm:focus-visible .chip, .saju-map .lmore:hover .chip, .saju-map .lmore:focus-visible .chip { fill: #fff1cf; stroke-width: 3; }
.saju-map .sm:focus-visible .chip, .saju-map .lmore:focus-visible .chip { stroke: #1d1a14; }
.saju-map .lead { pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .saju-map .glow { animation: none; opacity: 0.4; } .saju-map .nd-in, .saju-map .chip, .saju-map .zn-ring { transition: none; } }
.saju-map .nd-in { transform-box: fill-box; transform-origin: center; }
.mf-bump .nd-in { animation: mf-bump 420ms var(--e-seal) both; }
@keyframes mf-bump { 40% { transform: scale(1.22); } }
.mf-stage { position: relative; }
.mf-stage .saju-map :is(.nd, .lk, .lkl, .sm, .sma) { transition: opacity var(--t-slow) var(--e-brush); }
.mf-focusing .saju-map :is(.nd, .lk, .lkl, .sm, .sma):not(.mf-on) { opacity: .16 !important; }
.mf-focusing .saju-map > g[filter] { opacity: .45; transition: opacity var(--t-slow) var(--e-brush); }
.mf-cap { min-height: 52px; margin: 12px 0 0; padding: 12px 14px; border-radius: 12px; background: #f3ecdb; font-size: 16px; font-weight: 700; line-height: 1.5; }
.mf-cap[hidden] { display: none; }
.mf-cap small { font-weight: 600; color: var(--ink2); }
.mf-k { display: inline-block; min-width: 1.4em; margin-right: 4px; font: 400 20px/1 var(--hanja); }
.mf-row { display: flex; gap: 8px; margin-top: 10px; }
.mf-row .btn { flex: 1; margin: 0; }
.mf-hint { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); padding: 6px 12px; border-radius: 999px; background: rgba(29, 26, 20, .78); color: #fff; font-size: 14px; font-weight: 700; white-space: nowrap; pointer-events: none; transition: opacity var(--t-slow); }
.mf-focusing .mf-hint { opacity: 0; }
.mf-card { margin-top: 12px; padding: 14px 16px 12px; border-radius: 16px; background: #fff; border: 1px solid var(--line); }
.mf-card[hidden] { display: none; }
.mf-card.mf-in { animation: fun-rise var(--t-base) var(--e-brush) both; }
.mf-card h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; font-size: 18px; }
.mf-hz { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: #fff; font: 400 24px var(--hanja); }
.mf-card ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.mf-card li { font-size: 16px; line-height: 1.55; }
.mf-card li b { color: var(--pine2); }
.mf-reach { display: flex; gap: 6px; margin-top: 10px; }
.mf-reach button { flex: 1; min-height: 44px; border: 1.5px solid var(--line); border-radius: 10px; background: #fffdf8; font: 700 15px var(--sans); color: var(--ink); cursor: pointer; transition: transform var(--t-press) ease-out; }
.mf-reach button:active { transform: scale(.97); }
.mf-reach button[aria-pressed="true"] { border-color: var(--pine); box-shadow: inset 0 0 0 1px var(--pine); }
.mf-tip { margin: 10px 0 0; font-size: 14px; color: var(--ink2); }
.mf-mean { margin-top: 10px; padding: 12px 14px; border-radius: 12px; background: #f3ecdb; animation: fun-rise var(--t-base) var(--e-brush) both; }
.mf-mean p { margin: 0; font-size: 16px; line-height: 1.6; }
.mf-mean p + p { margin-top: 4px; }
.mf-cta { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding: 12px 14px; border-radius: 12px; border: 1.5px solid #e2c98f; background: #fffaf0; }
.mf-cta p { flex: 1; margin: 0; font-size: 15px; font-weight: 700; line-height: 1.5; color: var(--seal2, #8f2c22); }
.mf-cta .btn { flex: none; margin: 0; }
@media (prefers-reduced-motion: reduce) { .mf-bump .nd-in, .mf-card.mf-in, .mf-mean { animation: none !important; } .mf-stage .saju-map :is(.nd, .lk, .lkl, .sm, .sma), .mf-reach button { transition: none; } }
.ms-ink .phead h1 { animation: mo-brush var(--t-slow) var(--e-brush) .18s both; }
.ms-ink .pillars .ch { transform-origin: 50% 0; animation: mo-write 260ms var(--e-brush) calc(.4s + var(--mo-i, 0) * 40ms) both; }
.ms-ink .pillars .p:nth-child(2) { --mo-i: 1; } .ms-ink .pillars .p:nth-child(3) { --mo-i: 2; } .ms-ink .pillars .p:nth-child(4) { --mo-i: 3; }
.sec .map-big { display: block; border-radius: 16px; background: #fffdf6; border: 1px solid var(--line); overflow: hidden; }
.sec .map-big svg { display: block; width: 100%; height: auto; }
@media (prefers-reduced-motion: reduce) {
  .ms-ink .phead h1, .ms-ink .pillars .ch { animation: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .fun-sweep > svg, .fsheet[open], .du-more:not([hidden]), .quiz-in .quiz-t, #elements.el-in .el-none { animation: none !important; }
  .fun-sweep > svg { -webkit-mask: none; mask: none; }
  .quiz-chip { transition: none; }
}
.daeun button.d { transition: transform var(--t-press) ease-out; }
.daeun button.d:active { transform: scale(.95); }
.travel-row { transition: transform var(--t-press) ease-out; }
.travel-row:active { transform: scale(.98); }
.replay-btn { transition: opacity var(--t-fast) ease-out; }
.replay-btn:active { opacity: .6; }
a.map-banner { transition: transform var(--t-press) ease-out; }
a.map-banner:active { transform: scale(.98); }
@media (prefers-reduced-motion: reduce) { .daeun button.d, .travel-row, a.map-banner { transition: none; } .daeun button.d:active, .travel-row:active, a.map-banner:active { transform: none; } }
.habit-today, .habit-home .habit-today { display: grid; grid-template-columns: 1fr auto; column-gap: 12px; row-gap: 0; align-items: center; }
.habit-today .ht-k { grid-column: 1; grid-row: 1; font-size: 14px; white-space: nowrap; }
.habit-today .ht-v { grid-column: 1; grid-row: 2; line-height: 1.4; }
.habit-today .ht-do { grid-column: 2; grid-row: 1 / span 2; margin-left: 0; }
.habit-home .habit-today { padding: 8px 8px 8px 16px; }