/* StylaDay 톤: 따뜻한 그레이지 바탕, 흰 카드, 스티커(다이컷) 오브젝트, 알약 칩, 작은 파스텔 포인트. 부드러운 모션. */
:root {
  --bg: #f5f1ea; --bg2: #ebe5db; --card: #fffdf8; --text: #17161a; --muted: #8a8378; --line: #e3dcd1; --ink: #17161a;
  --cobalt: #2b47c9; --cobalt-s: #e4e8f8; --tangerine: #ef8a2c; --tangerine-s: #fdebd8;
  --lav: #c9d1f3; --lav-s: #e9ecf9; --pink: #f1c6c0; --pink-s: #fbe9e5; --mint: #cfe3d3; --mint-s: #eaf3ec; --butter: #f7cf93; --butter-s: #fdebd8; --sky: #cdd7f1; --sky-s: #e9edf9; --peach: #f6c9a8; --peach-s: #fdeee3;
  --el0: #4fa877; --el1: #e2697a; --el2: #d6a23b; --el3: #9a9aa6; --el4: #5b86d8;
  --shadow: 0 10px 30px rgba(40,32,24,.08), 0 2px 6px rgba(40,32,24,.05); --shadow-s: 0 4px 12px rgba(40,32,24,.08);
  --r: 20px; --r-s: 14px;
  --font: 'Pretendard Variable', 'Pretendard', -apple-system, 'Apple SD Gothic Neo', sans-serif; --display: 'Syne', 'Pretendard Variable', sans-serif;
  --checker: repeating-conic-gradient(var(--cobalt) 0 25%, var(--tangerine) 0 50%) 0 0 / 10px 10px;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 15px; line-height: 1.6; letter-spacing: -.01em; -webkit-font-smoothing: antialiased; }
#bg { position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%; }
.crt, svg.defs { display: none; }
.top, main, .toast, .mascot { position: relative; z-index: 2; }
::selection { background: var(--lav); }

/* ---------- 헤더 ---------- */
.top { display: flex; align-items: center; gap: 24px; padding: 14px 28px; position: sticky; top: 0; z-index: 5; background: rgba(245,241,234,.85); backdrop-filter: blur(10px); }
.logo { text-decoration: none; display: flex; align-items: center; gap: 10px; color: var(--text); }
.logo-dot, .logo .blink { display: none; }
.logo canvas { image-rendering: pixelated; border-radius: 8px; }
nav { display: flex; gap: 2px; background: var(--card); padding: 4px; border-radius: 999px; box-shadow: var(--shadow-s); }
nav a { color: var(--muted); text-decoration: none; padding: 6px 14px; font-size: 13px; font-weight: 600; border-radius: 999px; transition: all .25s cubic-bezier(.2,.9,.2,1); }
nav a.on { background: var(--text); color: #fff; } nav a:hover:not(.on) { background: var(--bg2); color: var(--text); }
.status { margin-left: auto; font-size: 11px; color: var(--muted); display: flex; gap: 10px; }
.status b { color: #3aa36c; font-weight: 600; } .status b.off { color: #d95b5b; }

main { max-width: 1040px; margin: 0 auto; padding: 28px 24px 100px; }
.view { display: none; } .view.on { display: block; animation: pagein .5s cubic-bezier(.2,.9,.2,1) both; }
@keyframes pagein { from { opacity: 0; transform: translateY(12px) } to { opacity: 1; transform: none } }

.h1 { font-size: 30px; font-weight: 800; letter-spacing: -.03em; line-height: 1.25; margin: 0 0 6px; }
.h2 { font-size: 20px; font-weight: 800; letter-spacing: -.02em; margin: 34px 0 12px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .h2 .muted { font-size: 12px; font-weight: 500; }
.muted { color: var(--muted); } .small { font-size: 12px; } .mt { margin-top: 18px; } .right { text-align: right; }
code { background: var(--bg2); padding: 1px 6px; border-radius: 6px; font-size: 12px; }
.reveal { animation: pagein .6s cubic-bezier(.2,.9,.2,1) both; }

/* ---------- 카드 ---------- */
.panel { background: var(--card); border-radius: var(--r); padding: 22px 24px; margin-bottom: 18px; position: relative; box-shadow: var(--shadow); opacity: 0; transform: translateY(14px); transition: opacity .6s cubic-bezier(.2,.9,.2,1), transform .6s cubic-bezier(.2,.9,.2,1); }
.panel.in { opacity: 1; transform: none; }
.panel::before { content: ''; position: absolute; right: 18px; top: -8px; width: 42px; height: 16px; background: var(--lav); border-radius: 4px; transform: rotate(-4deg); opacity: .9; }
.panel.pink::before { background: var(--pink) } .panel.mint::before { background: var(--mint) } .panel.lav::before { background: var(--lav) } .panel.sky::before { background: var(--sky) } .panel.butter::before { background: var(--butter) }
.panel-title { font-size: 15px; font-weight: 800; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; letter-spacing: -.01em; }
.panel-title .muted { font-size: 12px; font-weight: 500; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .span2 { grid-column: 1 / -1; }
@media (max-width: 760px) { .grid2 { grid-template-columns: 1fr } }

/* ---------- 폼 ---------- */
label { display: block; font-size: 12px; color: var(--muted); position: relative; font-weight: 600; }
input, select, textarea { width: 100%; margin-top: 6px; background: var(--bg); color: var(--text); border: 1.5px solid transparent; border-radius: 14px; padding: 11px 14px; font: inherit; font-size: 15px; outline: none; transition: all .2s; }
input:focus, select:focus { background: #fff; border-color: var(--text); }
.row { display: flex; gap: 8px; align-items: flex-end; } .row input { min-width: 0; }
.chk { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; padding-bottom: 12px; } .chk input { width: 18px; height: 18px; margin: 0; accent-color: var(--text); }
.chk.right { margin-left: auto; padding: 0; font-size: 12px; color: var(--muted); font-weight: 500; }
.seg { display: flex; margin-top: 6px; gap: 6px; background: var(--bg); padding: 4px; border-radius: 999px; } .seg button { flex: 1; background: transparent; color: var(--muted); border: 0; border-radius: 999px; padding: 9px; font: inherit; font-weight: 600; cursor: pointer; transition: all .2s; }
.seg button.on { background: var(--text); color: #fff; }
.dropdown { position: absolute; z-index: 4; left: 0; right: 0; background: #fff; border-radius: 14px; box-shadow: var(--shadow); display: none; max-height: 200px; overflow: auto; margin-top: 4px; }
.dropdown div { padding: 10px 14px; cursor: pointer; } .dropdown div:hover { background: var(--bg); }
.pill { margin-top: 8px; color: var(--text); min-height: 20px; font-weight: 600; }

.btn { background: var(--cobalt); color: #fff; border: 0; border-radius: 999px; padding: 10px 20px; font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; transition: transform .2s cubic-bezier(.2,.9,.2,1), box-shadow .2s, background .2s; box-shadow: var(--shadow-s); }
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow); } .btn:active { transform: scale(.97); }
.btn.big { font-size: 16px; padding: 14px 28px; } .btn.sm { padding: 6px 14px; font-size: 12px; }
.btn.ghost { background: var(--card); color: var(--text); } .btn:disabled { opacity: .5; cursor: wait; }

.photos { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.photo-box { background: var(--bg); border-radius: var(--r); padding: 14px; }
.ph-title { font-size: 14px; font-weight: 700; margin-bottom: 8px; } .ph-title small { color: var(--muted); margin-left: 6px; font-weight: 500; }
.ph-frame { position: relative; aspect-ratio: 4/3; background: #fff; border-radius: 16px; overflow: hidden; display: grid; place-items: center; border: 1.5px dashed var(--line); }
.ph-frame img { width: 100%; height: 100%; object-fit: cover; display: none; } .ph-frame.has img { display: block; } .ph-frame.has .ph-empty { display: none; }
.ph-empty { color: var(--muted); font-size: 14px; font-weight: 600; }
.ph-actions { display: flex; gap: 8px; margin-top: 10px; }
.ph-read { margin-top: 10px; font-size: 13px; color: var(--muted); white-space: pre-line; } .ph-read b { color: var(--text); }

/* ---------- 오늘 ---------- */
.today-head { display: flex; justify-content: space-between; gap: 20px; align-items: flex-end; margin-bottom: 22px; flex-wrap: wrap; }
.hero { display: flex; gap: 18px; align-items: flex-end; }
.hero canvas { image-rendering: pixelated; border: 4px solid #fff; border-radius: 16px; box-shadow: var(--shadow); background: var(--lav-s); transform: rotate(-4deg); animation: float 3s ease-in-out infinite; }
@keyframes float { 0%,100% { transform: rotate(-4deg) translateY(0) } 50% { transform: rotate(-3deg) translateY(-6px) } }
.date { font-size: 12px; color: var(--muted); margin-bottom: 8px; font-weight: 600; }
.weather { background: var(--card); border-radius: var(--r); box-shadow: var(--shadow); padding: 14px 18px; display: flex; gap: 14px; align-items: center; min-width: 280px; }
.weather .wx-icon { width: 44px; height: 44px; image-rendering: pixelated; background: var(--sky-s); border-radius: 12px; padding: 6px; }
.weather .temp { font-size: 26px; font-weight: 800; letter-spacing: -.03em; line-height: 1; } .weather .wx-sub { font-size: 12px; color: var(--muted); margin-top: 4px; }

.pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 6px 0 18px; }
.pillar { background: var(--bg); border-radius: 18px; padding: 14px 8px; text-align: center; opacity: 0; animation: rise .6s cubic-bezier(.2,.9,.2,1) forwards; }
.pillar:nth-child(1) { animation-delay: .1s } .pillar:nth-child(2) { animation-delay: .22s } .pillar:nth-child(3) { animation-delay: .34s } .pillar:nth-child(4) { animation-delay: .46s }
@keyframes rise { from { opacity: 0; transform: translateY(16px) } to { opacity: 1; transform: none } }
.pillar .pos { font-size: 11px; color: var(--muted); font-weight: 600; } .pillar .hanja { font-size: 36px; line-height: 1.1; margin: 4px 0; letter-spacing: 3px; font-weight: 700; }
.pillar .ko { font-size: 13px; font-weight: 600; } .pillar .ss { font-size: 11px; color: var(--muted); margin-top: 3px; }
.pillar.me { background: var(--text); color: #fff; box-shadow: var(--shadow); } .pillar.me .pos, .pillar.me .ss { color: rgba(255,255,255,.65); } .pillar.me .hanja span { color: #fff !important; }
.el0 { color: var(--el0) } .el1 { color: var(--el1) } .el2 { color: var(--el2) } .el3 { color: var(--el3) } .el4 { color: var(--el4) }
.bg0 { background: var(--el0) } .bg1 { background: var(--el1) } .bg2 { background: var(--el2) } .bg3 { background: var(--el3) } .bg4 { background: var(--el4) }
.elements { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.el { font-size: 12px; } .el .nm { display: flex; justify-content: space-between; margin-bottom: 6px; font-weight: 600; }
.el .blocks { display: flex; gap: 3px; height: 10px; }
.el .blocks i { flex: 1; display: block; border-radius: 3px; } .el .blocks i:not(.on) { background: var(--bg2); } .el .blocks i.on { animation: pop .3s cubic-bezier(.2,.9,.2,1) both; }
@keyframes pop { from { transform: scaleY(0) } to { transform: none } }
.ilgan { margin-top: 16px; font-size: 14px; line-height: 1.9; } .ilgan b { font-weight: 700; background: var(--butter-s); padding: 2px 7px; border-radius: 8px; }
.readings .panel { margin: 0; } .readings { margin-bottom: 18px; }
.readings li { font-size: 13px; margin: 4px 0; } .readings .adv { color: var(--text); margin-top: 10px; font-size: 13px; font-weight: 600; background: var(--mint-s); padding: 8px 12px; border-radius: 12px; }
#iljin { font-size: 14px; line-height: 1.9; } #iljin b { background: var(--bg); padding: 2px 7px; border-radius: 8px; font-weight: 700; } #iljin .tagline { display: inline-block; margin-top: 6px; color: var(--text); font-weight: 600; background: var(--lav-s); padding: 8px 12px; border-radius: 12px; }

/* ---------- 태그 ---------- */
.tags { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 760px) { .tags { grid-template-columns: repeat(2, 1fr) } }
.tag { background: var(--card); border: 0; border-radius: var(--r); padding: 18px 18px 20px; cursor: pointer; text-align: left; font: inherit; color: var(--text); position: relative; opacity: 0; animation: rise .55s cubic-bezier(.2,.9,.2,1) both; animation-delay: calc(var(--i) * 80ms); box-shadow: var(--shadow); transition: transform .25s cubic-bezier(.2,.9,.2,1), box-shadow .25s; overflow: hidden; }
.tag::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--c, var(--lav)); }
.tag:hover { transform: translateY(-4px) rotate(-.4deg); box-shadow: 0 18px 40px rgba(50,40,30,.14); } .tag:active { transform: scale(.98); }
.tag .ic { position: absolute; right: 14px; bottom: 14px; background: var(--cs, var(--lav-s)); border-radius: 12px; padding: 6px; border: 3px solid #fff; box-shadow: var(--shadow-s); transform: rotate(8deg); transition: transform .3s cubic-bezier(.2,.9,.2,1); }
.tag:hover .ic { transform: rotate(-4deg) scale(1.08); }
.tag .lbl { display: flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 800; letter-spacing: -.02em; } .tag .lbl canvas { display: none; }
.tag .lv { position: absolute; right: 14px; top: 16px; font-size: 11px; font-weight: 700; background: var(--bg); padding: 4px 9px; border-radius: 999px; }
.tag .lv.상 { background: var(--text); color: #fff; }
.tag .desc { font-size: 12px; color: var(--muted); margin: 3px 0 12px; }
.tag .meter { height: 8px; background: var(--bg2); border-radius: 4px; overflow: hidden; width: 70%; }
.tag .meter i { display: block; height: 100%; width: 0; animation: grow 1.1s cubic-bezier(.2,.9,.2,1) .3s forwards; background: var(--c, var(--text)) !important; border-radius: 4px; }
@keyframes grow { to { width: var(--w) } }
.tag .elm { font-size: 11px; margin-top: 10px; color: var(--muted); padding-right: 64px; line-height: 1.5; } .tag .elm b { font-weight: 700; }
.c-pink { --c: var(--pink); --cs: var(--pink-s) } .c-aqua { --c: var(--sky); --cs: var(--sky-s) } .c-sun { --c: var(--butter); --cs: var(--butter-s) } .c-coral { --c: var(--peach); --cs: var(--peach-s) } .c-lime { --c: var(--mint); --cs: var(--mint-s) } .c-violet { --c: var(--lav); --cs: var(--lav-s) } .c-peach { --c: var(--peach); --cs: var(--peach-s) }
.cat { margin-bottom: 12px; padding: 16px 18px; background: var(--card); border-radius: var(--r); box-shadow: var(--shadow); }
.cat-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 14px; font-weight: 800; } .cat-head .muted { font-size: 11px; margin-left: auto; font-weight: 500; }
.cat-ic { display: inline-flex; background: var(--cs, var(--lav-s)); border-radius: 9px; padding: 4px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 16px; } .tagchips { margin: 0; gap: 8px; }
.tchip, .chip { background: var(--bg); border: 1.5px solid transparent; border-radius: 999px; padding: 6px 12px 6px 14px; font: inherit; font-size: 13px; font-weight: 600; color: var(--text); cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: all .2s cubic-bezier(.2,.9,.2,1); }
.tchip em { font-style: normal; font-size: 11px; color: var(--muted); font-weight: 700; }
.tchip.high { background: var(--text); color: #fff; } .tchip.high em { color: rgba(255,255,255,.75); }
.tchip.low { color: var(--muted); background: transparent; border-color: var(--line); font-weight: 500; } .tchip.low em { color: var(--muted); }
.tchip.low span::after { content: ' · 비추'; font-size: 10px; }
.tchip:hover, .chip:hover { transform: translateY(-2px); box-shadow: var(--shadow-s); background: #fff; } .tchip.high:hover { background: var(--text); }
.chip { background: var(--card); box-shadow: var(--shadow-s); } .chip.on { background: var(--text); color: #fff; }

/* ---------- 추천 ---------- */
.back { color: var(--muted); text-decoration: none; display: inline-block; margin-bottom: 12px; font-size: 13px; font-weight: 600; } .back:hover { color: var(--text); }
.rec-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.rec-tag { font-size: 30px; font-weight: 800; letter-spacing: -.03em; display: flex; align-items: center; gap: 12px; line-height: 1; } .rec-tag canvas { background: var(--lav-s); border-radius: 12px; padding: 6px; border: 3px solid #fff; box-shadow: var(--shadow-s); transform: rotate(-6deg); } .rec-tag small { font-size: 12px; margin-left: 4px; color: var(--muted); font-weight: 600; }
.rec-intent { color: var(--muted); font-size: 13px; }
.palette { display: flex; gap: 12px; margin: 12px 0 22px; flex-wrap: wrap; }
.sw { flex: 1; min-width: 120px; min-height: 84px; padding: 10px 12px; font-size: 12px; font-weight: 600; color: #000; display: flex; flex-direction: column; justify-content: flex-end; position: relative; border-radius: 18px; border: 4px solid #fff; box-shadow: var(--shadow); opacity: 0; animation: rise .5s cubic-bezier(.2,.9,.2,1) both; transition: transform .25s cubic-bezier(.2,.9,.2,1); }
.sw:hover { transform: translateY(-4px) rotate(-1.5deg); }
.sw.dark { color: #fff; } .sw .hex { font-size: 10px; opacity: .75; font-weight: 500; }
.sw.accent::before { content: 'POINT'; position: absolute; top: -12px; left: 10px; font-size: 10px; font-weight: 800; letter-spacing: .08em; color: var(--text); background: var(--butter); padding: 2px 8px; border-radius: 999px; transform: rotate(-3deg); }
.sw.avoid { opacity: .45; text-decoration: line-through; border-style: dashed; border-color: var(--line); box-shadow: none; }
ul.why, ul.plain { margin: 0; padding-left: 0; list-style: none; } ul.why li, ul.plain li { font-size: 14px; margin: 8px 0; padding-left: 18px; position: relative; line-height: 1.65; }
ul.why li::before, ul.plain li::before { content: ''; position: absolute; left: 0; top: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--lav); }
ul.plain li::before { background: var(--mint); }
li .src { font-size: 11px; padding: 2px 8px; margin-left: 6px; border-radius: 999px; background: var(--bg); color: var(--muted); font-weight: 600; } li .src.closet { color: #2e7d55; background: var(--mint-s); }
li img.thumb { width: 36px; height: 36px; object-fit: cover; vertical-align: middle; margin-right: 8px; border: 3px solid #fff; border-radius: 10px; box-shadow: var(--shadow-s); background: #fff; }
#rec-acc { font-size: 14px; line-height: 1.9; } #rec-acc b { font-weight: 700; background: var(--bg); padding: 2px 7px; border-radius: 8px; }
.images .frame { aspect-ratio: 1/1; display: grid; place-items: center; overflow: hidden; margin-bottom: 12px; position: relative; border-radius: 18px; background: var(--bg); }
.img-panel:first-child .frame { aspect-ratio: 2/3; }
.frame img { width: 100%; height: 100%; object-fit: contain; animation: develop 1s cubic-bezier(.2,.9,.2,1) both; } @keyframes develop { from { opacity: 0; transform: scale(.96); filter: blur(6px) } to { opacity: 1; transform: none; filter: none } }
.loader { width: 70%; text-align: center; } .loader .bar { height: 8px; background: var(--bg2); border-radius: 4px; overflow: hidden; }
.loader .bar i { display: block; height: 100%; width: 30%; background: var(--text); border-radius: 4px; animation: slide 1.4s cubic-bezier(.4,0,.6,1) infinite; } @keyframes slide { from { margin-left: -30% } to { margin-left: 100% } }
.loader .step { font-size: 12px; color: var(--muted); margin-top: 10px; min-height: 18px; } .frame.err .loader .bar i { background: #d95b5b; animation: none; width: 100%; margin: 0; }
.loader canvas { image-rendering: pixelated; display: block; margin: 0 auto 12px; border: 4px solid #fff; border-radius: 14px; box-shadow: var(--shadow-s); background: var(--butter-s); animation: float 2.4s ease-in-out infinite; }

/* ---------- 기록 달력 ---------- */
.cal-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; } .cal-head .m { font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.cal .dow { font-size: 11px; color: var(--muted); text-align: center; font-weight: 600; padding-bottom: 2px; }
.cal .day { aspect-ratio: 3/4; position: relative; overflow: hidden; opacity: 0; animation: rise .4s cubic-bezier(.2,.9,.2,1) both; border-radius: 14px; background: var(--bg); }
.cal .day.blank { visibility: hidden; } .cal .day.today { background: var(--lav-s); box-shadow: inset 0 0 0 2px var(--lav); }
.cal .day .n { position: absolute; left: 7px; top: 5px; font-size: 11px; font-weight: 700; color: var(--muted); z-index: 1; }
.cal .day img { width: 100%; height: 100%; object-fit: cover; } .cal .day.has { cursor: pointer; background: #fff; box-shadow: var(--shadow-s); transition: transform .25s; } .cal .day.has:hover { transform: translateY(-3px) rotate(-1deg); }
.cal .day .t { position: absolute; left: 6px; right: 6px; bottom: 6px; font-size: 10px; font-weight: 700; text-align: center; background: rgba(255,255,255,.9); border-radius: 999px; padding: 2px 0; }
.cal .day .fig { position: absolute; inset: 0; display: grid; place-items: center; color: var(--line); font-size: 20px; }

/* ---------- 토스트·마스코트 ---------- */
.toast { position: fixed; left: 50%; bottom: 30px; transform: translateX(-50%) translateY(20px); background: var(--text); color: #fff; border-radius: 999px; padding: 10px 20px; opacity: 0; pointer-events: none; transition: all .25s cubic-bezier(.2,.9,.2,1); z-index: 9; max-width: 90vw; font-size: 13px; font-weight: 600; box-shadow: var(--shadow); }
.toast.on { opacity: 1; transform: translateX(-50%); } .toast.err { background: #d95b5b; }
.empty { color: var(--muted); text-align: center; padding: 40px 0; border: 1.5px dashed var(--line); border-radius: var(--r); grid-column: 1 / -1; font-size: 13px; font-weight: 600; }
.mascot { position: fixed; left: 20px; bottom: 18px; z-index: 6; display: flex; align-items: flex-end; gap: 10px; }
.mascot canvas { image-rendering: pixelated; cursor: pointer; border: 4px solid #fff; border-radius: 16px; box-shadow: var(--shadow); background: var(--butter-s); transform: rotate(-4deg); transition: transform .25s cubic-bezier(.2,.9,.2,1); }
.mascot canvas:hover { transform: rotate(2deg) translateY(-5px); }
.bubble { position: relative; background: var(--card); border-radius: 18px; padding: 10px 16px; font-size: 13px; font-weight: 600; max-width: 300px; margin-bottom: 44px; line-height: 1.5; box-shadow: var(--shadow); animation: rise .3s cubic-bezier(.2,.9,.2,1) both; }
.bubble::after { content: ''; position: absolute; left: -8px; bottom: 14px; width: 14px; height: 14px; background: var(--card); transform: rotate(45deg); border-radius: 3px; }
.bubble.hide { display: none; } .bubble b { background: var(--butter-s); padding: 1px 5px; border-radius: 6px; }
.px-icon { image-rendering: pixelated; vertical-align: middle; }

/* ---------- 모바일 ---------- */
@media (max-width: 760px) {
  .top { padding: 10px 14px; gap: 10px; backdrop-filter: none; } .status { display: none; } nav { position: fixed; left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 7; background: rgba(255,255,255,.92); backdrop-filter: blur(10px); padding: 5px; box-shadow: var(--shadow); }
  nav a { flex: 1; text-align: center; padding: 10px 4px; font-size: 13px; }
  main { padding: 14px 14px 130px; }
  .h1 { font-size: 23px; } .h2 { font-size: 17px; margin-top: 26px; } .h2 .muted { flex-basis: 100%; }
  .panel { padding: 16px 16px; border-radius: 18px; } .panel::before { width: 34px; height: 12px; right: 12px; }
  .today-head { gap: 12px; } .hero { gap: 12px; align-items: center; } .weather { min-width: 0; width: 100%; } .weather .temp { font-size: 22px; }
  .pillars { gap: 8px; } .pillar { padding: 10px 2px; border-radius: 14px; } .pillar .hanja { font-size: 24px; letter-spacing: 2px; margin: 3px 0; } .pillar .ko { font-size: 11px; } .pillar .ss { font-size: 9px; } .pillar .pos { font-size: 10px; }
  .elements { gap: 6px; } .el { font-size: 10px; } .el .blocks { height: 8px; gap: 2px; }
  .ilgan, #iljin { font-size: 13px; }
  .tags { gap: 10px; } .tag { padding: 14px 14px 16px; border-radius: 18px; } .tag .lbl { font-size: 15px; } .tag .desc { font-size: 11px; margin: 2px 0 10px; } .tag .elm { display: none; } .tag .lv { right: 10px; top: 12px; font-size: 10px; } .tag .ic { right: 8px; bottom: 8px; padding: 4px; } .tag .meter { width: 80%; }
  .cat { padding: 12px 14px; border-radius: 18px; } .tchip { font-size: 12px; padding: 5px 10px 5px 12px; gap: 6px; }
  .rec-tag { font-size: 24px; } .palette .sw { min-width: 80px; min-height: 64px; font-size: 11px; padding: 8px; border-radius: 14px; }
  ul.why li, ul.plain li { font-size: 13px; }
  .images .frame, .img-panel:first-child .frame { aspect-ratio: 1/1; }
  .photos { grid-template-columns: 1fr; } .row { flex-wrap: wrap; } .row input { flex: 1 1 30%; }
  .cal { gap: 5px; } .cal .day { border-radius: 10px; } .cal .day .n { font-size: 9px; } .cal .day .t { font-size: 9px; left: 3px; right: 3px; bottom: 3px; }
  .mascot { left: auto; right: 10px; bottom: 84px; gap: 6px; flex-direction: row-reverse; } .bubble { max-width: 210px; font-size: 12px; padding: 8px 12px; margin-bottom: 22px; }
  .bubble::after { left: auto; right: -6px; }
  .toast { bottom: 90px; }
  .btn.big { font-size: 15px; padding: 12px 20px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }

/* ---------- 연결 ---------- */
.conn { display: flex; flex-direction: column; gap: 10px; }
.conn-row { display: flex; align-items: center; gap: 14px; background: var(--bg); border-radius: 16px; padding: 12px 16px; }
.conn-dot { width: 12px; height: 12px; border-radius: 50%; background: #d8d2c9; flex: none; box-shadow: 0 0 0 4px rgba(0,0,0,.04); transition: background .3s; }
.conn-row.ok .conn-dot { background: #3aa36c; box-shadow: 0 0 0 4px rgba(58,163,108,.18); animation: pulse 2s infinite; } .conn-row.bad .conn-dot { background: #d95b5b; }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 4px rgba(58,163,108,.18) } 50% { box-shadow: 0 0 0 8px rgba(58,163,108,.06) } }
.conn-body { flex: 1; min-width: 0; } .conn-body b { font-size: 14px; } .conn-msg { font-size: 12px; margin-top: 2px; }
.conn-act { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.conn-help { margin: 12px 0 0; }
.status { cursor: pointer; } .status:hover b { text-decoration: underline; }
@media (max-width: 760px) { .conn-row { flex-wrap: wrap; } .conn-act { width: 100%; justify-content: flex-start; } }

/* ---------- 결과 카드 ---------- */
.img-panel:first-child .frame { aspect-ratio: 3/4; }
.card-wrap { display: grid; grid-template-columns: 300px 1fr; gap: 24px; align-items: start; }
#card { width: 100%; height: auto; border-radius: 18px; box-shadow: var(--shadow); background: var(--bg2); transform: rotate(-1.5deg); transition: transform .3s cubic-bezier(.2,.9,.2,1); }
#card:hover { transform: rotate(0) scale(1.02); }
.card-actions { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; padding-top: 10px; }
@media (max-width: 760px) { .card-wrap { grid-template-columns: 1fr; } #card { max-width: 320px; margin: 0 auto; display: block; } .card-actions { align-items: stretch; } }

/* ---------- 간결 레이아웃 ---------- */
.hero-card { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; padding: 26px 28px; }
.hero-left { display: flex; flex-direction: column; gap: 6px; } .hero-left canvas { image-rendering: pixelated; border: 4px solid #fff; border-radius: 14px; box-shadow: var(--shadow-s); background: var(--lav-s); transform: rotate(-4deg); align-self: flex-start; margin-bottom: 10px; animation: float 3s ease-in-out infinite; }
.hero-card .h1 { font-size: 30px; } .hero-card .h1 b { background: linear-gradient(transparent 60%, var(--butter) 60%); padding: 0 2px; }
.hero-sub { margin: 0; font-size: 13px; color: var(--muted); } .mb { display: none; }
.lucky { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; } .lk { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; background: var(--bg); padding: 6px 12px; border-radius: 999px; } .lk i { width: 12px; height: 12px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--line); }
.hero-right { display: flex; flex-direction: column; gap: 14px; align-items: center; }
.ring { position: relative; width: 150px; height: 150px; } .ring svg { width: 100%; height: 100%; transform: rotate(-90deg); } .ring circle { fill: none; stroke: var(--bg2); stroke-width: 10; } .ring circle.val { stroke-linecap: round; transition: stroke-dashoffset 1.4s cubic-bezier(.2,.9,.2,1); }
.ring-num { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; } .ring-num b { font-size: 44px; font-weight: 800; letter-spacing: -.04em; line-height: 1; } .ring-num span { font-size: 11px; color: var(--muted); font-weight: 600; margin-top: 4px; }
.hero-right .weather { min-width: 0; padding: 10px 14px; box-shadow: none; background: var(--bg); } .hero-right .weather .temp { font-size: 20px; } .hero-right .weather .wx-icon { width: 36px; height: 36px; padding: 4px; }
.compact { padding: 16px 20px; } .compact-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.pillars-mini { display: flex; gap: 6px; } .pm { display: flex; flex-direction: column; align-items: center; background: var(--bg); border-radius: 10px; padding: 6px 8px; font-size: 18px; font-weight: 700; line-height: 1.15; } .pm.me { background: var(--text); } .pm.me span { color: #fff !important; }
.chips.mini { margin: 0; gap: 6px; } .chips.mini .chip { font-size: 12px; padding: 5px 10px; box-shadow: none; cursor: default; }
.more { margin-left: auto; background: transparent; border: 0; color: var(--muted); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; padding: 6px 10px; border-radius: 999px; } .more:hover { background: var(--bg); color: var(--text); }
.detail { display: none; margin-top: 16px; padding-top: 16px; border-top: 1.5px dashed var(--line); animation: pagein .4s both; } .detail.open { display: block; }
.detail .readings { margin-top: 16px; }
.tag .score { display: flex; align-items: baseline; gap: 4px; } .tag .score b { font-size: 34px; font-weight: 800; letter-spacing: -.04em; line-height: 1; } .tag .score span { font-size: 11px; color: var(--muted); font-weight: 700; }
.tag .lbl { margin-top: 6px; } .tag .desc { margin: 2px 0 10px; } .tag .meter { width: 60%; }
.tag.big { padding: 20px 20px 22px; } .tag.big .score b { font-size: 42px; } .tag.big .lbl { font-size: 20px; }
.cat .cat-head { cursor: pointer; margin-bottom: 8px; } .cat .caret { margin-left: 6px; color: var(--muted); transition: transform .25s; } .cat.open .caret { transform: rotate(180deg); }
.cat .full { display: none; } .cat.open .full { display: flex; } .cat.open .preview { display: none; }
.tchip.ghost { background: transparent; color: var(--muted); border: 1.5px dashed var(--line); }
.keys .keyrows { list-style: none; margin: 0; padding: 0; } .keyrows li { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; padding: 10px 0; border-bottom: 1px solid var(--line); line-height: 1.55; } .keyrows li:last-child { border: 0; } .keyrows li::before { display: none; } .keyrows .ki { font-size: 18px; line-height: 1.2; width: 24px; text-align: center; flex: none; } .keyrows b { font-weight: 800; }
.frame-mini { width: 120px; aspect-ratio: 3/4; border-radius: 12px; background: var(--bg); overflow: hidden; display: grid; place-items: center; position: relative; margin-top: 6px; } .frame-mini img { width: 100%; height: 100%; object-fit: cover; } .frame-mini .loader { width: 90%; } .frame-mini .loader canvas { display: none; } .frame-mini .loader .step { font-size: 10px; }
.rec-top .card-wrap { grid-template-columns: 260px 1fr; }
#makeup-chips .chip { cursor: default; box-shadow: none; background: var(--bg); } #makeup-chips .chip b { font-weight: 800; margin-right: 4px; }
.outfit li { font-size: 13px; }
@media (max-width: 760px) {
  .hero-card { grid-template-columns: 1fr; padding: 18px 16px; } .hero-right { flex-direction: row; justify-content: space-between; width: 100%; } .ring { width: 110px; height: 110px; } .ring-num b { font-size: 32px; }
  .hero-card .h1 { font-size: 22px; } .mb { display: block; } .hero-left canvas { margin-bottom: 4px; }
  .tag .score b { font-size: 28px; } .tag.big .score b { font-size: 32px; } .tag.big .lbl { font-size: 17px; } .tag .meter { width: 70%; }
  .rec-top .card-wrap { grid-template-columns: 1fr; }
  .pm { font-size: 15px; padding: 5px 6px; } .compact-head .more { margin-left: auto; }
}

.images, .rec-top { align-items: start; }

/* ---------- 친구·초대·쇼핑 ---------- */
.subtabs { display: inline-flex; background: var(--card); padding: 4px; border-radius: 999px; box-shadow: var(--shadow-s); margin-bottom: 16px; } .subtabs button { border: 0; background: transparent; font: inherit; font-weight: 700; font-size: 13px; padding: 8px 16px; border-radius: 999px; color: var(--muted); cursor: pointer; } .subtabs button.on { background: var(--text); color: #fff; }
.friend-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.invite-box { display: flex; gap: 8px; align-items: center; margin-bottom: 14px; } .invite-box input { margin: 0; flex: 1; font-size: 13px; }
.friend-form { margin-bottom: 16px; }
.friends-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; }
.fcard { background: var(--card); border-radius: 18px; padding: 12px; box-shadow: var(--shadow); text-align: center; position: relative; opacity: 0; animation: rise .5s both; }
.fcard .face { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; border: 4px solid #fff; box-shadow: var(--shadow-s); background: var(--bg2); margin: 4px auto 8px; display: block; }
.fcard .face.ph { display: grid; place-items: center; font-size: 28px; }
.fcard b { font-size: 15px; } .fcard .rel { font-size: 11px; color: var(--muted); } .fcard .day { font-size: 11px; margin-top: 4px; background: var(--bg); border-radius: 999px; padding: 2px 8px; display: inline-block; }
.fcard .via { position: absolute; left: 10px; top: 10px; font-size: 10px; background: var(--lav-s); border-radius: 999px; padding: 2px 7px; font-weight: 700; }
.fcard .del { position: absolute; right: 8px; top: 8px; background: #fff; border: 0; border-radius: 50%; width: 22px; height: 22px; font-size: 11px; cursor: pointer; box-shadow: var(--shadow-s); color: var(--muted); } .fcard .del:hover { background: #d95b5b; color: #fff; }
.fcard .elem { font-size: 11px; color: var(--muted); margin-top: 4px; }
.friend-row { display: flex; gap: 14px; flex-wrap: wrap; }
.frec { display: flex; gap: 12px; align-items: center; background: var(--bg); border-radius: 16px; padding: 10px 14px 10px 10px; flex: 1 1 280px; }
.frec .face { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: 3px solid #fff; box-shadow: var(--shadow-s); background: var(--bg2); flex: none; }
.frec.top .face { border-color: var(--butter); }
.frec .nm { font-weight: 800; font-size: 15px; display: flex; gap: 8px; align-items: center; } .frec .nm em { font-style: normal; font-size: 10px; background: var(--text); color: #fff; padding: 2px 7px; border-radius: 999px; } .frec.top .nm em { background: #e0a21b; }
.frec .why { font-size: 12px; color: var(--muted); margin-top: 2px; line-height: 1.45; }
.frec .sc { margin-left: auto; font-size: 24px; font-weight: 800; letter-spacing: -.03em; }
.friend-empty { font-size: 13px; color: var(--muted); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.shop { margin: 8px 0 14px; display: flex; flex-direction: column; gap: 8px; }
.shop-row { background: var(--bg); border-radius: 14px; padding: 10px 12px; }
.shop-row .q { font-size: 12px; font-weight: 700; display: flex; align-items: center; gap: 8px; } .shop-row .q .btn { margin-left: auto; }
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; }
.tier { background: #fff; border-radius: 12px; padding: 10px; font-size: 12px; text-decoration: none; color: var(--text); box-shadow: var(--shadow-s); display: flex; flex-direction: column; gap: 3px; transition: transform .2s; } .tier:hover { transform: translateY(-2px); }
.tier .t { font-size: 10px; font-weight: 800; color: var(--muted); letter-spacing: .04em; } .tier .n { font-weight: 700; line-height: 1.35; } .tier .p { font-weight: 800; } .tier .s { color: var(--muted); font-size: 11px; } .tier .w { color: var(--muted); font-size: 11px; }
.tier.저가 .t { color: #3aa36c } .tier.중가 .t { color: #d6a23b } .tier.고가 .t { color: #7c5cff }
.frame.square { aspect-ratio: 1/1; }
.join-panel { max-width: 640px; margin: 20px auto; } .join-panel canvas { image-rendering: pixelated; display: block; margin: 0 auto 10px; border: 4px solid #fff; border-radius: 16px; box-shadow: var(--shadow); background: var(--lav-s); }
@media (max-width: 760px) { .tiers { grid-template-columns: 1fr; } .frec { flex: 1 1 100%; } }

/* ---------- 풀이 ---------- */
.reading .rd-head { display: flex; gap: 14px; align-items: center; margin-bottom: 10px; }
.rd-dm { width: 64px; height: 64px; border-radius: 18px; background: var(--text); color: #fff; display: grid; place-items: center; font-size: 26px; font-weight: 800; flex: none; }
.rd-title { font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.rd-text { font-size: 14px; line-height: 1.75; margin: 0 0 14px; }
.rd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rd-item { background: var(--bg); border-radius: 14px; padding: 12px 14px; font-size: 13px; line-height: 1.7; } .rd-item b { font-weight: 800; } .rd-item .k { font-size: 11px; font-weight: 800; color: var(--muted); letter-spacing: .04em; display: block; margin-bottom: 4px; }
.rd-item.wide { grid-column: 1 / -1; }
.rd-photo-row { display: flex; gap: 14px; align-items: flex-start; }
.rd-photo { width: 96px; height: 96px; border-radius: 16px; background: var(--bg); flex: none; overflow: hidden; display: grid; place-items: center; font-size: 26px; cursor: pointer; border: 3px solid #fff; box-shadow: var(--shadow-s); } .rd-photo img { width: 100%; height: 100%; object-fit: cover; }
.rd-body { flex: 1; min-width: 0; font-size: 13px; line-height: 1.65; } .rd-body .sum { font-weight: 700; font-size: 14px; margin-bottom: 6px; } .rd-body ul { margin: 6px 0; padding-left: 0; list-style: none; } .rd-body li { padding-left: 14px; position: relative; margin: 3px 0; } .rd-body li::before { content: ''; position: absolute; left: 0; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--lav); }
.rd-body .tip { background: var(--butter-s); border-radius: 10px; padding: 6px 10px; font-weight: 600; margin-top: 8px; display: inline-block; }
.rd-body .cta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.rd-body .pend { color: var(--muted); }
.fitbox { background: var(--bg); border-radius: 14px; padding: 10px 14px; margin-bottom: 10px; font-size: 13px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } .fitbox b { font-weight: 800; } .fitbox .sz { background: var(--text); color: #fff; padding: 3px 9px; border-radius: 999px; font-weight: 700; font-size: 12px; } .fitbox .tp { color: var(--muted); flex-basis: 100%; }
.tier .z { font-size: 11px; } .tier .z.ok { color: #3aa36c; font-weight: 700; } .tier .z.no { color: #d95b5b; font-weight: 700; }
@media (max-width: 760px) { .rd-grid { grid-template-columns: 1fr; } }

/* ---------- FFFF 브랜드 ---------- */
.logo .slogan { font-size: 11px; font-weight: 700; color: var(--muted); margin-left: 10px; letter-spacing: .02em; }
.brandmark { display: inline-flex; align-items: center; gap: 6px; font-size: 22px; font-weight: 900; letter-spacing: -.02em; margin-bottom: 10px; } .brandmark b { background: var(--card); padding: 2px 10px; border-radius: 10px; box-shadow: var(--shadow-s); } .brandmark span { color: var(--muted); }
.brandmark.center { justify-content: center; display: flex; margin-bottom: 14px; }
.mascot { display: none !important; }
@media (max-width: 760px) { .logo .slogan { display: none; } }

/* ---------- 친구 알림(노트) ---------- */
.note-wrap { max-width: 860px; margin: 10px auto; }
.note-head { display: flex; gap: 16px; align-items: center; } .note-head .face { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 4px solid #fff; box-shadow: var(--shadow-s); background: var(--bg2); flex: none; }
.note-head h1 { font-size: 22px; font-weight: 800; margin: 0 0 4px; letter-spacing: -.02em; } .note-head h1 b { background: var(--butter-s); padding: 0 6px; border-radius: 8px; }
.note-head .msg { background: var(--bg); border-radius: 12px; padding: 8px 12px; font-size: 13px; margin-top: 8px; display: inline-block; }
.pairline { display: flex; gap: 12px; align-items: center; } .pairline .sc { font-size: 32px; font-weight: 800; letter-spacing: -.04em; } .pairline ul { margin: 4px 0 0; padding: 0; list-style: none; font-size: 13px; color: var(--muted); } .pairline li { padding-left: 14px; position: relative; } .pairline li::before { content: ''; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--lav); }
.note-cta { text-align: center; } .note-cta b { font-size: 18px; display: block; margin-bottom: 4px; }
.frec .act { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; margin-left: 8px; } .frec .act .btn { white-space: nowrap; }
.sent { font-size: 11px; color: #3aa36c; font-weight: 700; }

/* ---------- 약속 ---------- */
.plan-form { margin-bottom: 14px; } .plan-row { display: grid; grid-template-columns: 1.2fr 1fr 1.6fr 1.2fr; gap: 12px; align-items: end; }
.purposes { gap: 4px; padding: 3px; } .purposes button { padding: 7px 6px; font-size: 12px; }
.plans-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.pcard { background: var(--card); border-radius: 16px; padding: 12px 14px; box-shadow: var(--shadow); display: flex; gap: 10px; align-items: center; cursor: pointer; transition: transform .2s; text-decoration: none; color: var(--text); } .pcard:hover { transform: translateY(-3px); }
.pcard .face { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: var(--bg2); border: 3px solid #fff; box-shadow: var(--shadow-s); flex: none; } .pcard b { display: block; font-size: 14px; } .pcard .d { font-size: 12px; color: var(--muted); } .pcard .el { margin-left: auto; font-weight: 800; font-size: 13px; padding: 4px 9px; border-radius: 999px; }
.plan-head { display: flex; gap: 16px; align-items: center; } .plan-head .faces { display: flex; } .plan-head .faces .face { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: 3px solid #fff; box-shadow: var(--shadow-s); background: var(--bg2); } .plan-head .faces .face + .face { margin-left: -14px; }
.plan-head h1 { font-size: 22px; font-weight: 800; margin: 0; letter-spacing: -.02em; } .plan-head .sub { font-size: 13px; color: var(--muted); margin-top: 2px; }
.jrow { display: flex; gap: 10px; flex-wrap: wrap; } .jbox { background: var(--bg); border-radius: 14px; padding: 10px 14px; min-width: 120px; flex: 1; } .jbox .k { font-size: 11px; color: var(--muted); font-weight: 700; display: block; } .jbox .v { font-size: 15px; font-weight: 800; margin-top: 2px; } .jbox .v i { display: inline-block; width: 12px; height: 12px; border-radius: 50%; vertical-align: -1px; margin-right: 4px; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--line); }
.ideas { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; } .ideas span { background: var(--bg); border-radius: 999px; padding: 6px 12px; font-size: 13px; font-weight: 600; }
.person { background: var(--card); border-radius: var(--r); padding: 18px 20px; box-shadow: var(--shadow); } .person .ph { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; } .person .ph img, .person .ph .face { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: var(--bg2); border: 3px solid #fff; box-shadow: var(--shadow-s); } .person .ph b { font-size: 15px; } .person .ph .muted { font-size: 12px; }
.person .pal { display: flex; gap: 6px; margin-bottom: 10px; } .person .pal i { flex: 1; height: 26px; border-radius: 8px; border: 2px solid #fff; box-shadow: var(--shadow-s); }
.person ul { margin: 0; padding: 0; list-style: none; font-size: 13px; } .person li { padding: 4px 0; border-bottom: 1px solid var(--line); } .person li:last-child { border: 0; } .person li b { font-weight: 800; margin-right: 6px; }
.share-row { display: flex; gap: 12px; align-items: center; justify-content: space-between; font-size: 13px; }
@media (max-width: 760px) { .plan-row { grid-template-columns: 1fr 1fr; } }

li .wear { margin-left: 8px; font-size: 11px; padding: 2px 8px; border-radius: 999px; border: 1.5px solid var(--line); background: #fff; cursor: pointer; font-weight: 600; } li .wear.on { background: var(--text); color: #fff; border-color: var(--text); }
li .mwhy { display: block; font-size: 11px; color: var(--muted); margin-top: 2px; }
#geo-btn { align-self: stretch; }


.c-sky { --c: var(--sky); --cs: var(--sky-s) } .c-mint { --c: var(--mint); --cs: var(--mint-s) }

/* ---------- 통합 풀이 카드 ---------- */
.merge .mg-head { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; } .merge .mg-head .panel-title { margin-bottom: 6px; }
.mg-badge { margin-left: auto; font-size: 11px; font-weight: 800; background: var(--butter); color: var(--text); padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.mg-headline { font-size: 18px; font-weight: 800; letter-spacing: -.02em; line-height: 1.4; margin: 2px 0 14px; text-wrap: balance; }
.mg-map { display: grid; gap: 6px; background: var(--bg); border-radius: 14px; padding: 12px 14px; }
.mg-row { display: grid; grid-template-columns: 56px 40px 1fr auto; gap: 8px; align-items: center; font-size: 12.5px; }
.mg-row .nm { font-weight: 800; } .mg-row .nm small { font-weight: 500; color: var(--muted); margin-left: 3px; }
.mg-row .pct { font-size: 11.5px; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.mg-row .bar { height: 10px; border-radius: 5px; background: var(--card); overflow: hidden; } .mg-row .bar i { display: block; height: 100%; width: var(--w, 0%); border-radius: 5px; transition: width .8s cubic-bezier(.2,.9,.2,1); }
.mg-row .marks { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; min-width: 0; }
.mg-row .mk { font-style: normal; font-size: 10.5px; font-weight: 800; padding: 2px 7px; border-radius: 999px; background: var(--card); white-space: nowrap; }
.mg-row .mk.yongsin { background: var(--mint-s); color: #2f8a5a; } .mg-row .mk.gisin { background: var(--pink-s); color: #c04a5c; } .mg-row .mk.face { background: var(--lav-s); } .mg-row .mk.palm { background: var(--butter-s); }
.mg-rel { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
.mg-rel li { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.6; background: var(--bg); border-radius: 12px; padding: 8px 12px; border-left: 4px solid var(--line); }
.mg-rel li em { font-style: normal; font-weight: 800; flex: none; width: 16px; text-align: center; }
.mg-rel li.boost, .mg-rel li.support { border-left-color: var(--mint); } .mg-rel li.excess, .mg-rel li.feed, .mg-rel li.clash { border-left-color: var(--pink); }
.mg-rel li.none { align-items: center; flex-wrap: wrap; gap: 8px; color: var(--muted); }
.mg-today { margin-top: 14px; }
.mg-tag { display: inline-flex; align-items: center; gap: 8px; margin: 6px 0 8px; background: var(--text); color: #fff; border: 0; border-radius: 999px; padding: 9px 16px; font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; transition: transform .2s; } .mg-tag:hover { transform: translateY(-2px); }
.mg-tag b { font-size: 15px; } .mg-tag span { font-size: 11px; opacity: .8; }
.mg-why { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; } .mg-why li { display: flex; gap: 8px; font-size: 12.5px; line-height: 1.55; align-items: flex-start; }
.mg-why .src { font-style: normal; flex: none; font-size: 10.5px; font-weight: 800; padding: 2px 7px; border-radius: 6px; margin-top: 2px; background: var(--bg); } .mg-why .src.face { background: var(--lav-s); } .mg-why .src.palm { background: var(--butter-s); }
.mg-rx { margin-top: 14px; display: grid; gap: 6px; }
.mg-rxrow { display: grid; grid-template-columns: 64px 1fr; gap: 10px; font-size: 13px; line-height: 1.55; background: var(--bg); border-radius: 12px; padding: 8px 12px; align-items: baseline; }
.mg-rxrow .k { font-size: 11px; font-weight: 800; color: var(--muted); letter-spacing: .04em; } .mg-rxrow .btn { margin-left: 6px; vertical-align: middle; }
.mg-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; }
.reading-detail { margin-bottom: 18px; } .reading-detail .readings2 { margin-top: 18px; }
@media (max-width: 760px) { .mg-headline { font-size: 16px; } .mg-row { grid-template-columns: 46px 36px 1fr; } .mg-row .marks { grid-column: 1 / -1; justify-content: flex-start; } .mg-rxrow { grid-template-columns: 1fr; gap: 2px; } .mg-badge { margin-left: 0; } }

/* ---------- 착용 통계 · 룩 달력 상세 · 친구 그래프 · 내보내기 ---------- */
.wear-stats { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 14px; } .wear-stats .ws { font-size: 12px; background: var(--card); box-shadow: var(--shadow-s); border-radius: 999px; padding: 5px 11px; } .wear-stats .ws b { font-weight: 800; }
.cal .day .wthumbs { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; } .cal .day .wthumbs img { width: 100%; height: 100%; object-fit: cover; }
.cal-detail { margin-top: 12px; } .dd-sec { margin-top: 10px; font-size: 13px; } .dd-sec > b { display: block; font-size: 11px; color: var(--muted); letter-spacing: .04em; margin-bottom: 6px; }
.dd-match { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0; } .dd-match .chip { cursor: default; } .dd-match .pal { display: inline-flex; gap: 3px; } .dd-match .pal i { width: 14px; height: 14px; border-radius: 4px; display: inline-block; border: 1px solid var(--line); }
.dd-worn { display: flex; flex-wrap: wrap; gap: 8px; } .dd-worn span { display: inline-flex; align-items: center; gap: 6px; background: var(--bg); border-radius: 999px; padding: 4px 10px 4px 4px; font-size: 12px; } .dd-worn img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.dd-looks { display: flex; gap: 8px; flex-wrap: wrap; } .dd-looks img { width: 88px; height: 88px; object-fit: cover; border-radius: 12px; }
.fgraph-panel { margin-bottom: 18px; } .fgraph-wrap { display: grid; grid-template-columns: 360px 1fr; gap: 14px; align-items: start; } @media (max-width: 760px) { .fgraph-wrap { grid-template-columns: 1fr; } }
#fgraph { width: 100%; max-width: 360px; height: auto; display: block; } .fg-node { cursor: pointer; } .fg-node:focus-visible { outline: 2px solid var(--lav); border-radius: 50%; } .fg-name { font-size: 11px; font-weight: 700; fill: var(--text); } .fg-init { font-size: 14px; font-weight: 800; fill: var(--text); } .fg-metxt { font-size: 12px; font-weight: 800; }
.fg-detail { font-size: 13px; line-height: 1.6; } .fgd-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 4px; } .fgd-row .chip { cursor: default; box-shadow: none; background: var(--bg); font-size: 12px; padding: 5px 10px; }
.export-panel .row { align-items: center; } .export-panel .btn { text-decoration: none; display: inline-block; }

/* ===================== 리디자인: StylaDay 레일 + 코발트·탠저린 ===================== */
/* 브랜드: 윤곽선 워드마크 + 체커 */
.logo .wm { display: inline-flex; align-items: center; gap: 5px; font-family: var(--display); font-weight: 800; font-size: 17px; letter-spacing: .22em; color: var(--text); line-height: 1; }
.logo .wm span { -webkit-text-stroke: 1.3px var(--text); color: transparent; }
.logo .slogan { font-family: var(--display); letter-spacing: .06em; font-size: 10px; }
.panel::before, .panel.pink::before, .panel.mint::before, .panel.lav::before, .panel.sky::before, .panel.butter::before { background: var(--checker); width: 40px; height: 12px; border-radius: 3px; opacity: 1; transform: rotate(-3deg); }
.h2::before { content: ''; width: 8px; height: 8px; border-radius: 2px; background: var(--checker); align-self: center; }
.ring-num b, .tag .score b, .frec .sc, .pairline .sc, .plan-head .sc, .cal .day .n { font-family: var(--display); }
.sw.accent::before { background: var(--tangerine); color: #fff; }
nav a.on, .chip.on, .tchip.high, .subtabs button.on, .seg button.on, .mg-tag, .pillar.me, .pm.me, .rd-dm, .toast { background: var(--text); }
.lk i, .jbox .v i { box-shadow: 0 0 0 1px var(--line); }

/* 보관함: 옷걸이 레일 */
.closet-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 4px 0 10px; }
.closet-bar .chips { margin: 0; gap: 6px; } .closet-bar .chips .chip { background: var(--card); box-shadow: none; border: 1.5px solid var(--line); padding: 7px 14px; font-size: 13px; gap: 5px; } .closet-bar .chips .chip.on { background: var(--text); border-color: var(--text); color: #fff; } .closet-bar .chips .chip .muted { font-size: 11px; } .closet-bar .chips .chip.on .muted { color: rgba(255,255,255,.7); }
.dots { display: flex; gap: 6px; margin-left: auto; align-items: center; }
.dots .dot { width: 26px; height: 26px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1.5px var(--line); background: var(--c, var(--bg2)); cursor: pointer; font: inherit; font-size: 11px; font-weight: 800; color: var(--muted); padding: 0; transition: transform .2s cubic-bezier(.2,.9,.2,1); }
.dots .dot:hover { transform: scale(1.1); } .dots .dot.on { box-shadow: 0 0 0 2px var(--text); } .dots .dot[data-el="-1"] { width: auto; border-radius: 999px; padding: 0 10px; background: var(--card); } .dots .dot[data-el="-1"].on { background: var(--text); color: #fff; }
.closet-grid.rail { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 34px 14px; padding: 18px 6px 10px; }
.item { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 26px 0 0; border: 0; background: transparent; font: inherit; color: var(--text); cursor: pointer; text-align: center; opacity: 0; animation: rise .5s cubic-bezier(.2,.9,.2,1) both; }
.item::before { content: ''; position: absolute; left: -10px; right: -10px; top: 7px; height: 4px; border-radius: 2px; background: linear-gradient(#d9d1c4, #bfb5a6); box-shadow: 0 1px 0 rgba(255,255,255,.6); }
.item .hanger { position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: 44px; height: 26px; color: #6b6259; z-index: 1; }
.item .pic { position: relative; width: 100%; aspect-ratio: 4/5; display: grid; place-items: center; transform: rotate(var(--tilt, 0deg)); transition: transform .35s cubic-bezier(.2,.9,.2,1); }
.item .pic img { width: 100%; height: 100%; object-fit: cover; border-radius: 14px; border: 4px solid #fff; box-shadow: var(--shadow); background: #fff; }
.item.cut .pic img { object-fit: contain; object-position: top center; border: 0; border-radius: 0; background: transparent; box-shadow: none; filter: drop-shadow(0 10px 14px rgba(40,32,24,.18)) drop-shadow(0 0 1px #fff); }
.item:hover .pic { transform: rotate(calc(var(--tilt, 0deg) * -1)) translateY(2px); }
.item:focus-visible { outline: 0; } .item:focus-visible .pic img { box-shadow: 0 0 0 3px var(--cobalt); }
.item .pic .el { position: absolute; right: 8px; bottom: 8px; width: 14px; height: 14px; border-radius: 50%; border: 2px solid #fff; box-shadow: var(--shadow-s); }
.item .pic .ask-dot { position: absolute; left: 8px; top: 8px; width: 10px; height: 10px; border-radius: 50%; background: var(--tangerine); border: 2px solid #fff; box-shadow: var(--shadow-s); }
.item .nm { font-size: 13px; font-weight: 700; line-height: 1.3; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item .sub { font-size: 11px; color: var(--muted); }
.closet-grid .empty { grid-column: 1 / -1; background: var(--card); }
@media (max-width: 760px) { .closet-grid.rail { grid-template-columns: repeat(3, 1fr); gap: 28px 10px; } .item .nm { font-size: 12px; } .dots { margin-left: 0; } }
@media (max-width: 420px) { .closet-grid.rail { grid-template-columns: repeat(2, 1fr); } }

/* 아이템 시트 */
.sheet { border: 0; padding: 0; background: var(--card); color: var(--text); border-radius: 24px; width: min(520px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow: auto; box-shadow: 0 30px 80px rgba(20,16,12,.25); }
.sheet::backdrop { background: rgba(23,22,26,.45); backdrop-filter: blur(4px); }
.sh-head { position: sticky; top: 0; display: flex; justify-content: flex-end; padding: 10px 10px 0; z-index: 1; }
.sh-close { border: 0; background: var(--bg); width: 32px; height: 32px; border-radius: 50%; cursor: pointer; font: inherit; color: var(--muted); } .sh-close:hover { background: var(--text); color: #fff; }
.sh-pic { margin: -32px 24px 0; height: 300px; display: flex; align-items: center; justify-content: center; } .sh-pic img { height: 100%; width: auto; max-width: 100%; object-fit: contain; border-radius: 16px; border: 5px solid #fff; box-shadow: var(--shadow); } .sh-pic.cut img { border: 0; box-shadow: none; filter: drop-shadow(0 14px 18px rgba(40,32,24,.2)); }
.sh-body { padding: 14px 24px 24px; }
.sh-name { font-size: 20px; font-weight: 800; letter-spacing: -.02em; border: 0; border-bottom: 1.5px solid var(--line); border-radius: 0; background: transparent; padding: 6px 0; margin: 0; } .sh-name:focus { border-color: var(--text); background: transparent; }
.sh-row { display: flex; gap: 10px; align-items: center; margin: 12px 0; flex-wrap: wrap; } .sh-row select { width: auto; margin: 0; padding: 8px 12px; }
.sh-color { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); font-weight: 600; } .sh-color input { width: 30px; height: 30px; padding: 0; border: 0; background: transparent; margin: 0; border-radius: 50%; overflow: hidden; }
.sh-el { font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; margin-left: auto; color: var(--muted); } .sh-el i { width: 12px; height: 12px; border-radius: 50%; display: inline-block; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--line); }
.sheet .ask { background: var(--tangerine-s); border-radius: 14px; padding: 10px 12px; margin: 6px 0 12px; } .sheet .askq + .askq { margin-top: 8px; } .sheet .askq span { font-size: 12px; font-weight: 700; display: block; margin-bottom: 6px; } .sheet .askopts { display: flex; flex-wrap: wrap; gap: 6px; }
.sheet .oc { border: 1.5px solid var(--line); background: #fff; border-radius: 999px; font: inherit; font-size: 12px; font-weight: 700; padding: 5px 10px; cursor: pointer; } .sheet .oc:hover { background: var(--text); color: #fff; border-color: var(--text); }
.sh-stats { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--muted); margin: 4px 0 12px; } .sh-stats b { color: var(--text); font-weight: 800; font-size: 14px; margin-right: 1px; }
.sh-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; } .sh-actions .sh-del { color: #c0392b; }
.sh-dl { margin: 0; display: grid; grid-template-columns: 72px 1fr; gap: 6px 10px; font-size: 12.5px; padding-top: 12px; border-top: 1.5px dashed var(--line); } .sh-dl dt { color: var(--muted); } .sh-dl dd { margin: 0; }
@media (max-width: 760px) { .sheet { width: 100vw; max-width: 100vw; margin: auto 0 0; border-radius: 22px 22px 0 0; max-height: 92vh; } .sh-pic { margin: -28px 16px 0; height: 240px; } .sh-body { padding: 12px 16px 28px; } }

/* 룩 다이어리 달력 */
.cal-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.cal-head .m { font-size: 26px; font-weight: 800; letter-spacing: -.03em; display: flex; align-items: baseline; gap: 8px; } .cal-head .m small { font-family: var(--display); font-size: 14px; color: var(--muted); font-weight: 700; letter-spacing: .04em; }
.cal-nav { display: flex; gap: 6px; margin-left: auto; } .btn.icon { width: 32px; padding: 6px 0; text-align: center; font-size: 18px; line-height: 1; }
.cal { gap: 6px 4px; } .cal .dow { font-size: 11px; letter-spacing: .04em; }
.cal .day { aspect-ratio: 4/5; background: transparent; border-radius: 0; box-shadow: none; overflow: visible; }
.cal .day::after { content: ''; position: absolute; left: 10%; right: 10%; bottom: 0; height: 1px; background: var(--line); }
.cal .day.has, .cal .day.today { background: transparent; box-shadow: none; } .cal .day.has:hover { transform: translateY(-4px); }
.cal .day .n { font-size: 11px; color: var(--muted); left: 5px; top: 3px; }
.cal .day.today .n { background: var(--tangerine); color: #fff; border-radius: 999px; padding: 0 6px; } .cal .day.today::after { background: var(--tangerine); height: 2px; }
.cal .day > img { position: absolute; left: 0; width: 100%; top: 16px; height: calc(100% - 18px); object-fit: contain; object-position: bottom center; filter: drop-shadow(0 6px 8px rgba(40,32,24,.22)); border-radius: 0; }
.cal .day .wthumbs { top: 18px; bottom: 4px; inset-inline: 6%; gap: 3px; } .cal .day .wthumbs img { border-radius: 6px; border: 2px solid #fff; box-shadow: var(--shadow-s); }
.cal .day .t { bottom: -3px; left: 0; right: 0; font-size: 9.5px; background: var(--card); color: var(--muted); padding: 1px 0; z-index: 1; }
.cal .day .fig { color: var(--line); font-size: 18px; }
@media (max-width: 760px) { .cal .day .t { display: none; } .cal-head .m { font-size: 22px; } }

/* ===================== 옷장 칸·재화 · 휴지통 · 내 코디 ===================== */
.hd-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.slotbar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 10px; }
.slotbar .ws { font-size: 12px; background: var(--card); box-shadow: var(--shadow-s); border-radius: 999px; padding: 5px 11px; } .slotbar .ws b { font-weight: 800; font-family: var(--display); }
.slotbar .wallet b { color: var(--cobalt); } .slotbar .btn { margin-left: 0; } .slotbar #slot-more { margin-left: auto; }
.closet-bar .chips .chip.full .muted { color: var(--tangerine); } .closet-bar .chips .chip.on.full .muted { color: #ffd2a8; }
.closet-bar .chips .chip.trash { border-style: dashed; }
.sheet.mini { width: min(440px, calc(100vw - 32px)); }
.cp-pick { padding: 0 24px 22px; } .cp-cats { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 10px; } .cp-cats .chip.full { opacity: .55; }
.trash-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }
.trash-item { background: var(--card); border-radius: 18px; padding: 12px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 4px; align-items: center; text-align: center; }
.trash-item img { width: 100%; aspect-ratio: 4/5; object-fit: contain; border-radius: 12px; background: var(--bg); filter: grayscale(.4); } .trash-item .row { gap: 6px; margin-top: 6px; }
.slot-grid { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 10px; } .slot-grid i { width: 22px; height: 28px; border-radius: 6px; border: 1.5px dashed var(--line); background: var(--bg); } .slot-grid i.used { background: var(--cobalt); border-color: var(--cobalt); }
.sheet .buy { gap: 8px; margin: 8px 0; align-items: stretch; } .sheet .buy .btn { flex: 1; } .sheet .buy small { opacity: .75; font-weight: 600; }
.sheet .topup { margin-top: 14px; padding-top: 12px; border-top: 1.5px dashed var(--line); } .sheet .topup.hl { background: var(--tangerine-s); border-radius: 14px; padding: 12px; border: 0; } .sheet .topup .row { gap: 6px; flex-wrap: wrap; }
.sh-slot { margin: -6px 0 10px; }

/* 컴포저(내 코디) */
.sheet.composer { width: min(760px, calc(100vw - 32px)); }
.cp-body { padding: 0 24px 24px; }
.cp-top { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; } .cp-top select { width: auto; margin: 0; padding: 8px 12px; font-size: 14px; font-weight: 700; }
.cp-score { text-align: right; flex: none; } .cp-luck { font-family: var(--display); font-size: 48px; font-weight: 800; line-height: 1; letter-spacing: -.02em; } .cp-delta { font-weight: 800; margin-left: 6px; font-size: 16px; font-family: var(--display); } .cp-delta.up { color: #2f8a5a; } .cp-delta.down { color: #c04a5c; } .cp-base { display: block; font-size: 11px; color: var(--muted); margin-top: 4px; }
.cp-verdict { font-weight: 800; font-size: 15px; margin: 8px 0 6px; }
.cp-meter { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.cp-bar { flex: 1 1 160px; height: 10px; background: var(--bg2); border-radius: 5px; overflow: hidden; } .cp-bar i { display: block; height: 100%; width: var(--w, 0%); background: var(--cobalt); border-radius: 5px; transition: width .6s cubic-bezier(.2,.9,.2,1); }
.cp-els { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; } .cp-els i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--line); display: inline-block; } .cp-els .muted { margin-left: 6px; }
.cp-rows { margin-top: 6px; }
.cp-row { display: grid; grid-template-columns: 52px 1fr; gap: 8px; align-items: center; padding: 6px 0; border-top: 1px solid var(--line); } .cp-row:first-child { border-top: 0; } .cp-cat { font-size: 12px; font-weight: 800; color: var(--muted); }
.cp-strip { display: flex; gap: 10px; overflow-x: auto; padding: 6px 2px 4px; scrollbar-width: none; } .cp-strip::-webkit-scrollbar { display: none; }
.cp-tile { flex: none; width: 84px; border: 0; background: transparent; font: inherit; color: var(--text); cursor: pointer; position: relative; padding: 0; text-align: center; }
.cp-tile img { width: 84px; height: 100px; object-fit: cover; border-radius: 12px; border: 3px solid #fff; box-shadow: var(--shadow-s); background: #fff; transition: transform .2s cubic-bezier(.2,.9,.2,1), outline-color .2s; outline: 3px solid transparent; outline-offset: 1px; }
.cp-tile.cut img { object-fit: contain; object-position: center; background: transparent; border: 0; box-shadow: none; filter: drop-shadow(0 6px 8px rgba(40,32,24,.18)); }
.cp-tile.on img { outline-color: var(--cobalt); transform: translateY(-3px); }
.cp-tile .el { position: absolute; right: 6px; top: 6px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid #fff; box-shadow: var(--shadow-s); }
.cp-tile span { display: block; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 3px; }
.cp-tile .sc { position: absolute; left: 4px; top: 4px; font-style: normal; font-size: 10px; font-weight: 800; background: var(--card); border-radius: 999px; padding: 1px 6px; box-shadow: var(--shadow-s); font-family: var(--display); } .cp-tile .sc.good { background: var(--mint-s); color: #2f8a5a; } .cp-tile .sc.bad { background: var(--pink-s); color: #c04a5c; }
.cp-why { list-style: none; margin: 10px 0 0; padding: 0; font-size: 13px; display: grid; gap: 4px; line-height: 1.55; } .cp-why li { padding-left: 16px; position: relative; } .cp-why li::before { content: ''; position: absolute; left: 0; top: 8px; width: 8px; height: 8px; border-radius: 2px; background: var(--checker); }
.cp-cmp { font-size: 12.5px; color: var(--muted); background: var(--bg); border-radius: 12px; padding: 8px 12px; margin-top: 10px; } .cp-cmp b { color: var(--text); font-family: var(--display); font-size: 14px; }
.cp-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 14px; } .cp-actions .sp { flex: 1; }
/* 내 코디 목록 · 추천 페이지 박스 · 달력 상세 */
.looks-panel { margin-top: 22px; }
.looks { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.look { display: flex; gap: 10px; align-items: center; background: var(--bg); border-radius: 16px; padding: 10px 12px; cursor: pointer; position: relative; transition: transform .2s; } .look:hover { transform: translateY(-2px); }
.look .thumbs { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; width: 56px; height: 56px; flex: none; } .look .thumbs img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; background: #fff; }
.look .lb { min-width: 0; flex: 1; font-size: 13px; } .look .lb b { font-weight: 800; } .look .wn { font-style: normal; font-size: 10px; background: var(--text); color: #fff; border-radius: 999px; padding: 1px 6px; margin-left: 4px; }
.look .lk { font-family: var(--display); font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
.look .del { position: absolute; right: -6px; top: -6px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: #fff; box-shadow: var(--shadow-s); font-size: 11px; cursor: pointer; color: var(--muted); } .look .del:hover { background: #d95b5b; color: #fff; }
.mine-box { margin: 6px 0 12px; } .mine { display: flex; gap: 12px; align-items: center; background: var(--bg); border-radius: 14px; padding: 10px 14px; font-size: 13px; } .mine-luck { font-family: var(--display); font-size: 30px; font-weight: 800; line-height: 1; } .mine .btn { margin-left: auto; white-space: nowrap; }
.mine-cta { width: 100%; }
.dd-mine { display: flex; gap: 10px; align-items: flex-start; margin: 6px 0; cursor: pointer; } .dd-mine .lk { font-family: var(--display); font-size: 24px; font-weight: 800; line-height: 1; flex: none; min-width: 36px; } .dd-mine .dd-worn { margin-top: 4px; }
.mg-jev { margin-top: 8px; font-size: 12px; color: var(--muted); } .mg-jev b { color: var(--text); }
@media (max-width: 760px) { .sheet.composer { width: 100vw; max-width: 100vw; margin: auto 0 0; border-radius: 22px 22px 0 0; max-height: 94vh; } .cp-body { padding: 0 16px 28px; } .cp-luck { font-size: 40px; } .cp-row { grid-template-columns: 44px 1fr; } .cp-tile { width: 72px; } .cp-tile img { width: 72px; height: 88px; } .slotbar #slot-more { margin-left: 0; } .looks { grid-template-columns: 1fr; } }

/* 결제 · 충전 */
.topup .packs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin: 8px 0; }
.btn.pk { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 10px; font-family: var(--display); font-size: 16px; letter-spacing: .01em; } .btn.pk small { font-family: var(--font); font-weight: 600; opacity: .85; font-size: 11px; letter-spacing: 0; }
.orders { font-size: 12px; color: var(--muted); margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px 12px; } .orders .st { font-style: normal; font-weight: 800; } .orders .st.paid { color: #2f8a5a; } .orders .st.pending { color: var(--tangerine); }

/* ===================== 사진 시트(크롭·동의) · 계정 · 아바타 ===================== */
.photo-sheet { width: min(560px, calc(100vw - 32px)); }
.pc-pick { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 12px; }
.face-crop { position: relative; width: min(100%, 420px); aspect-ratio: 1; margin: 0 auto; border-radius: 18px; overflow: hidden; background: #1c1f1d; }
.face-crop-canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; outline: 0; } .face-crop-canvas:active { cursor: grabbing; }
.face-crop-guides { position: absolute; inset: 0; pointer-events: none; }
.face-crop-guides b { position: absolute; left: 19%; top: 11%; right: 19%; bottom: 11%; border: 2px dashed rgba(247,207,147,.85); border-radius: 50%; }
.face-crop-guides::before, .face-crop-guides::after { content: ''; position: absolute; width: 26px; height: 26px; border: 2px solid var(--butter); }
.face-crop-guides::before { left: 12px; top: 12px; border-right: 0; border-bottom: 0; } .face-crop-guides::after { right: 12px; bottom: 12px; border-left: 0; border-top: 0; }
.pc-tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 10px 0; } .pc-tools input[type=range] { flex: 1 1 140px; margin: 0; padding: 0; background: transparent; accent-color: var(--cobalt); }
.consent { display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; color: var(--text); font-weight: 500; background: var(--bg); border-radius: 14px; padding: 10px 12px; margin: 10px 0 0; line-height: 1.55; }
.consent input { width: 18px; height: 18px; margin: 2px 0 0; flex: none; accent-color: var(--cobalt); } .consent a { color: var(--cobalt); }
.acct { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; justify-content: space-between; } .acct-actions { display: flex; gap: 6px; flex-wrap: wrap; } .btn.danger { color: #c0392b; }
.face.init, .ph.init { display: grid; place-items: center; font-family: var(--display); font-weight: 800; color: var(--text); background: var(--lav-s); }
.frec .face.init { width: 56px; height: 56px; border-radius: 50%; border: 3px solid #fff; box-shadow: var(--shadow-s); flex: none; font-size: 20px; }
.fcard .face.init { font-size: 30px; } .note-head .face.init { width: 72px; height: 72px; border-radius: 50%; font-size: 26px; flex: none; } .plan-head .faces .face.init { font-size: 20px; } .person .ph .face.init { width: 40px; height: 40px; border-radius: 50%; font-size: 16px; } .pcard .face.init { width: 44px; height: 44px; border-radius: 50%; font-size: 16px; flex: none; }
.dd-look { display: flex; flex-direction: column; gap: 6px; } .dd-look img { width: 88px; height: 88px; object-fit: cover; border-radius: 12px; margin-right: 6px; }

/* ===================== 모션 · 키네틱 타이포 (2026-10-19) =====================
   원칙: 하루 첫 방문만 타이틀 시퀀스(약 1.6초), 같은 날 다시 열면 0.4초 안팎, 모션 줄이기면 정지 화면.
   제목은 한글 가변 명조 Hahmlet, 숫자·워드마크는 Syne, 본문은 Pretendard. 움직이는 건 transform·opacity·clip-path 뿐. */
:root {
  --title: 'Hahmlet', 'Pretendard Variable', 'Apple SD Gothic Neo', serif;
  --ease-expo: cubic-bezier(.16, 1, .3, 1); --ease-back: cubic-bezier(.34, 1.56, .64, 1); --ease-io: cubic-bezier(.65, 0, .35, 1);
}

/* 제목 서체: 화면 제목·오늘 인사말·풀이 헤드라인만. 본문·버튼·숫자에는 쓰지 않는다. */
.h1, .h2, .mg-headline, .rd-title, .rec-tag, .note-head h1, .plan-head h1 { font-family: var(--title); word-break: keep-all; }
.h1 { font-weight: 800; letter-spacing: -.035em; }
.h2 { font-weight: 700; letter-spacing: -.03em; }
.mg-headline { font-weight: 700; font-size: 20px; letter-spacing: -.03em; }

/* 오늘 인사말: 잡지 표지처럼 크게 */
#today-greet { font-size: clamp(26px, 2.6vw + 12px, 42px); line-height: 1.2; font-weight: 800; letter-spacing: -.045em; margin: 4px 0 10px; text-wrap: balance; }
#today-greet b { font-weight: 900; padding: 0 .06em; background: linear-gradient(var(--butter), var(--butter)) 0 86% / 100% 34% no-repeat; }
#today-date { font-size: 12px; font-weight: 700; letter-spacing: .12em; color: var(--muted); font-variant-numeric: tabular-nums; }

/* 어절 마스크 등장 */
.kin .w { display: inline-block; overflow: hidden; vertical-align: top; padding: .08em .02em .12em; margin: -.08em -.02em -.12em; }
.kin .wi { display: inline-block; transform: translateY(108%); animation: wordup .8s var(--ease-expo) forwards; animation-delay: calc(var(--d0, 0ms) + var(--i) * 75ms); }
@keyframes wordup { to { transform: none } }
/* 강조 글자(용신): 어절이 다 올라온 뒤 가는 획에서 굵은 획으로 먹이 번지고, 밑줄 띠가 왼쪽부터 칠해진다 */
.kin b { animation: ink .9s var(--ease-expo) both, swipe .7s var(--ease-io) both; animation-delay: calc(var(--d0, 0ms) + var(--n, 6) * 75ms + 200ms); }
@keyframes ink { from { font-weight: 300 } to { font-weight: 900 } }
@keyframes swipe { from { background-size: 0% 34% } to { background-size: 100% 34% } }
.kin-short { animation: fadeup .45s var(--ease-expo) both; }
@keyframes fadeup { from { opacity: 0; transform: translateY(6px) } to { opacity: 1; transform: none } }

/* 오늘 카드: 첫 방문 시퀀스 */
#hero-card[data-motion=full] #today-date { animation: fadeup .6s var(--ease-expo) both; }
#hero-card[data-motion=full] .brandmark { animation: fadeup .6s var(--ease-expo) both; }
#hero-card[data-motion=full] #today-sub { animation: fadeup .7s var(--ease-expo) .75s both; }
#hero-card[data-motion=full] .lucky .lk { animation: chipin .55s var(--ease-back) both; }
#hero-card[data-motion=full] .lucky .lk:nth-child(1) { animation-delay: .9s } #hero-card[data-motion=full] .lucky .lk:nth-child(2) { animation-delay: .97s } #hero-card[data-motion=full] .lucky .lk:nth-child(3) { animation-delay: 1.04s } #hero-card[data-motion=full] .lucky .lk:nth-child(n+4) { animation-delay: 1.11s }
@keyframes chipin { from { opacity: 0; transform: translateY(8px) scale(.9) } to { opacity: 1; transform: none } }
#hero-card[data-motion=full] .ring { animation: ringin .9s var(--ease-expo) .1s both; }
@keyframes ringin { from { opacity: 0; transform: scale(.82) rotate(-25deg) } to { opacity: 1; transform: none } }
#hero-card[data-motion=short] .ring circle.val { transition-duration: .7s; }
#hero-card[data-motion=full] .weather, #hero-card[data-motion=full] #geo-btn { animation: fadeup .6s var(--ease-expo) 1.1s both; }

/* 점수 오도미터 */
.odo { display: inline-flex; height: 1em; overflow: hidden; line-height: 1; }
.odo-d { display: inline-block; height: 1em; overflow: hidden; }
.odo-s { display: flex; flex-direction: column; transition: transform var(--t, 1.2s) var(--ease-expo); }
.odo-s i { font-style: normal; height: 1em; line-height: 1; text-align: center; }
.ring-num .odo span { font-size: inherit; margin: 0; color: inherit; font-weight: inherit; }
.ring-num b, .tag .score b, .wallet-n, .pct { font-variant-numeric: tabular-nums; }

/* 오늘의 키워드 띠 */
.ticker { position: relative; overflow: hidden; margin: 6px -24px 22px; padding: 4px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.tk-track { display: flex; width: max-content; animation: marquee var(--dur, 40s) linear infinite; }
.ticker:hover .tk-track, .ticker.off .tk-track { animation-play-state: paused; }
.tk-run { display: flex; align-items: center; flex: none; }
.tk { font-family: var(--title); font-weight: 800; font-size: clamp(28px, 3.4vw, 44px); letter-spacing: -.04em; line-height: 1.2; white-space: nowrap; color: #d6cbbb; display: inline-flex; align-items: center; gap: .25em; }
.tk.fill { color: var(--c, var(--text)); font-weight: 900; }
.tk.hj { color: var(--text); font-weight: 600; }
.tk-dot { width: .5em; height: .5em; border-radius: 50%; display: inline-block; box-shadow: 0 0 0 2px var(--card), 0 0 0 3px var(--line); }
.tk-sep { width: 14px; height: 14px; margin: 0 .55em; border-radius: 3px; background: var(--checker); flex: none; transform: rotate(45deg); }
@keyframes marquee { to { transform: translateX(-50%) } }

/* 통합 풀이: 오행 막대가 차례로 차오른다 */
.mg-row .bar i { transform-origin: left center; animation: barx 1s var(--ease-expo) both; animation-delay: calc(var(--i, 0) * 80ms + 150ms); }
@keyframes barx { from { transform: scaleX(0) } }

/* 소제목: 처음 보일 때 왼쪽부터 드러나고 체커 표식이 돈다 */
.h2 .rv-in { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; flex: 1; min-width: 0; clip-path: inset(-20% 100% -30% 0); transition: clip-path .9s var(--ease-expo); }
.h2.rv.in .rv-in { clip-path: inset(-20% -2% -30% 0); }
.h2.rv::before { transition: transform .8s var(--ease-back) .1s; transform: rotate(-90deg) scale(.4); }
.h2.rv.in::before { transform: none; }

/* 상단 탭: 미끄러지는 검은 알약 */
@media (min-width: 761px) { nav { position: relative; } } /* 모바일은 하단 고정(fixed)이 그대로 기준 상자가 된다 */
nav .nav-ind { position: absolute; left: 0; top: 4px; bottom: 4px; width: 0; border-radius: 999px; background: var(--text); pointer-events: none; z-index: 0; opacity: 0; }
nav .nav-ind.ready { transition: transform .5s var(--ease-expo), width .5s var(--ease-expo); }
nav a { position: relative; z-index: 1; }
nav a.on { background: transparent; color: #fff; }
@media (max-width: 760px) { nav .nav-ind { top: 5px; bottom: 5px; } }

/* 워드마크 인트로(하루 한 번) */
.logo .wm.wm-intro > * { animation: wmdrop .7s var(--ease-back) both; animation-delay: calc(var(--k) * 70ms + 80ms); }
@keyframes wmdrop { from { opacity: 0; transform: translateY(-60%) } to { opacity: 1; transform: none } }

/* 보관함: 옷이 옷걸이에 걸리며 살짝 흔들린다(끝나면 원래 기울기, 호버 모션은 그대로) */
.item .pic { animation: hangin 1.1s var(--ease-expo) backwards; animation-delay: inherit; transform-origin: 50% -14px; }
@keyframes hangin { 0% { opacity: 0; transform: translateY(-18px) rotate(calc(var(--tilt, 0deg) + 9deg)) } 45% { opacity: 1; transform: rotate(calc(var(--tilt, 0deg) - 4deg)) } 75% { transform: rotate(calc(var(--tilt, 0deg) + 1.5deg)) } 100% { transform: rotate(var(--tilt, 0deg)) } }

/* 모바일 오늘 카드: 링이 찌그러지지 않게, 위치 버튼은 한 줄 */
@media (max-width: 760px) {
  .hero-right { display: grid; grid-template-columns: auto 1fr; gap: 10px 12px; align-items: center; }
  .ring { width: 104px; height: 104px; flex: none; } .ring-num b { font-size: 30px; } .ring-num span { font-size: 10px; }
  .hero-right .weather { width: auto; }
  #geo-btn { grid-column: 1 / -1; white-space: nowrap; }
  .ticker { margin: 2px -14px 14px; }
  .tk-sep { width: 10px; height: 10px; }
  .mg-headline { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .tk-track { animation: none; } .ticker { overflow-x: auto; scrollbar-width: none; }
  *, *::before, *::after { animation-delay: 0s !important; transition-delay: 0s !important; }
}
.mg-rxrow .btn { white-space: nowrap; display: inline-block; }
/* 프로필 없이 다른 탭을 눌렀을 때 입력 폼을 살짝 흔들어 위치를 알려 준다 */
#setup-form.nudge { animation: nudge .5s var(--ease-io); }
@keyframes nudge { 20%, 60% { transform: translateX(-6px) } 40%, 80% { transform: translateX(6px) } }

/* 상단: 재화 잔액 칩(사용자용) + 개발자에게만 보이는 DEV 칩 */
.status .wallet-chip { color: var(--text); text-decoration: none; font-size: 12px; font-weight: 700; background: var(--card); padding: 5px 12px; border-radius: 999px; box-shadow: var(--shadow-s); }
.status .wallet-chip b { color: var(--text); font-family: var(--display); font-variant-numeric: tabular-nums; margin-left: 2px; }
.dev-chip { position: fixed; left: 12px; bottom: 12px; z-index: 9; font: 800 10px/1 var(--display); letter-spacing: .12em; color: #fff; background: var(--tangerine); padding: 6px 9px; border-radius: 6px; text-decoration: none; opacity: .8; }
.dev-chip:hover { opacity: 1; }
@media (max-width: 760px) { .dev-chip { bottom: auto; top: 12px; left: auto; right: 12px; } }
/* 확인 시트(core.js ask): confirm() 대체 */
.ask-sheet { width: min(360px, calc(100vw - 48px)); margin: auto; border-radius: 20px; } .ask-sheet .ask-body { padding: 22px 20px 18px; display: grid; gap: 16px; } .ask-sheet .ask-msg { margin: 0; font-size: 15px; line-height: 1.55; word-break: keep-all; } .ask-sheet .ask-btns { display: flex; gap: 8px; justify-content: flex-end; } .ask-sheet .ask-btns .btn { min-width: 84px; } .ask-sheet .btn.danger { background: #c0392b; color: #fff; }
@media (max-width: 760px) { .ask-sheet { width: min(360px, calc(100vw - 48px)); margin: auto; border-radius: 20px; max-height: none; } }