/* 서비스 앱 — 한지 편지(C) + 리포트 책 구성(A) + 점수 링(B) + 공유 카드(D) */
:root {
  --paper:#f6efe2; --card:#fffaf0; --ink:#3b2f27; --mute:#8b7b6c; --line:#e5d9c3; --terra:#c4593c; --terra-d:#a8472d; --sage:#7b9a7f; --ochre:#d9a441; --sky:#6d92b5; --plum:#9b6a8a;
  --wood:#3c7d4d; --fire:#c4453a; --earth:#a97a14; --metal:#6a7584; --water:#2d68c4;
  --wood-t:#dcecdf; --fire-t:#f6d9d2; --earth-t:#f6e6bd; --metal-t:#e6e9ee; --water-t:#dae6f8; --memo:#fff1d3; --sticky:#fff7c9;
  --hand:"Gaegu","Noto Sans KR",cursive; --sans:"Noto Sans KR",-apple-system,"Apple SD Gothic Neo",sans-serif; --serif:"Noto Serif KR",serif;
  --shadow:3px 4px 0 rgba(59,47,39,.14);
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); font:16px/1.7 var(--sans); background:#ebe2d0; min-height:100vh; }
[hidden] { display:none !important; }
button { font:inherit; cursor:pointer; color:inherit; }
a { color:var(--terra-d); }
.app { max-width:520px; margin:0 auto; min-height:100vh; position:relative; padding-bottom:104px;
  background:var(--paper); background-image:radial-gradient(rgba(139,123,108,.11) 1px,transparent 1px); background-size:14px 14px; box-shadow:0 0 0 1px #d9ccb3, 0 0 60px rgba(59,47,39,.12); }
.hand { font-family:var(--hand); }
.letter, .hello, .memo, .note, .wheelcard p, .cta, .lv { word-break:keep-all; overflow-wrap:break-word; }

/* 상단 바 */
.appbar { display:flex; align-items:center; justify-content:space-between; padding:16px 20px 6px; }
.logo { display:flex; align-items:center; gap:9px; font:700 24px var(--hand); text-decoration:none; color:var(--ink); }
.mode-badge { font:700 12px var(--hand); padding:2px 9px; border-radius:99px; background:var(--terra); color:#fff; letter-spacing:.05em; border:1.4px solid var(--ink); margin-left:auto; margin-right:12px; }
.seal { width:30px; height:30px; border-radius:8px 10px 7px 10px; background:var(--terra); color:#fff; display:grid; place-items:center; font:900 17px var(--serif); transform:rotate(-5deg); border:1.6px solid var(--ink); box-shadow:2px 2px 0 rgba(59,47,39,.25); }
.avatar { width:36px; height:36px; border-radius:50%; border:1.8px solid var(--ink); background:var(--earth-t); display:grid; place-items:center; font:900 16px var(--serif); box-shadow:2px 2px 0 rgba(59,47,39,.18); cursor:pointer; }

/* 공통 컴포넌트 */
.view { padding:6px 0 10px; animation:rise .4s ease both; }
@keyframes rise { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
.pad { padding:0 20px; }
.hd { padding:6px 20px 4px; }
.hd small { display:block; font:400 17px var(--hand); color:var(--mute); }
.hd h1, .hd h2 { margin:0; font:700 31px/1.2 var(--hand); }
.wob { background:var(--card); border:1.8px solid var(--ink); border-radius:18px 22px 16px 24px / 22px 16px 24px 18px; box-shadow:var(--shadow); }
.wob.t { background:var(--memo); } .wob.s { background:var(--sticky); }
.card { margin:14px 20px 0; padding:16px 18px; position:relative; }
.card h3 { margin:0 0 6px; font:700 22px var(--hand); }
.squig { height:8px; margin:8px 0 0; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='8'%3E%3Cpath d='M0 4 Q6 0 12 4 T24 4' fill='none' stroke='%23c4593c' stroke-width='1.6'/%3E%3C/svg%3E") repeat-x; }
.mute { color:var(--mute); } .small { font-size:13.5px; }
.err { color:var(--fire); font-size:14px; min-height:1px; margin:8px 0 0; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; border:1.8px solid var(--ink); border-radius:16px 20px 14px 22px / 20px 14px 22px 16px; padding:13px 20px; font:700 22px var(--hand); background:#fff; box-shadow:var(--shadow); transition:transform .12s; text-decoration:none; color:var(--ink); }
.btn:active { transform:translate(2px,2px); box-shadow:1px 2px 0 rgba(59,47,39,.14); }
.btn.primary { background:var(--terra); color:#fff; } .btn.primary:disabled { background:#d9a999; cursor:not-allowed; }
.btn.full { width:100%; } .btn.sm { padding:8px 14px; font-size:18px; }
.btn.ghost { background:transparent; box-shadow:none; }
.chip { display:inline-block; padding:1px 12px; border:1.5px solid var(--ink); border-radius:99px; font:700 16px var(--hand); background:#fff; }
.badge { display:inline-block; font:700 14px var(--hand); padding:0 9px; border-radius:99px; border:1.4px solid; margin-left:4px; background:#fff; vertical-align:1px; }
.badge.hi { color:#3c7d4d; } .badge.mid { color:#b07d16; } .badge.lo { color:#b5402f; }
.toast { position:fixed; left:50%; bottom:112px; transform:translateX(-50%); background:var(--ink); color:#fff; padding:10px 20px; border-radius:99px; font:700 18px var(--hand); z-index:99; }

/* 폼 */
.field { margin:0 0 14px; } .field > label, .field > .lab { display:block; font:700 18px var(--hand); margin-bottom:3px; }
.row2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.row2 > * { min-width:0; }                                              /* iOS 웹뷰: 날짜·시각 입력칸의 고유 너비 때문에 두 칸이 겹치지 않게 */
input[type=date], input[type=time] { min-width:0; min-height:46px; -webkit-appearance:none; appearance:none; }
input[type=date], input[type=time], input[type=search], input[type=text], select { width:100%; font:inherit; font-size:16px; padding:10px 12px; background:#fff; color:var(--ink); border:1.6px solid var(--ink); border-radius:12px 14px 11px 15px / 14px 11px 15px 12px; }
input:focus, select:focus { outline:none; box-shadow:0 0 0 3px color-mix(in srgb, var(--terra) 28%, transparent); }
.seg { display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:6px; }
.seg input { position:absolute; opacity:0; pointer-events:none; }
.seg label { margin:0; text-align:center; padding:8px 4px; border:1.6px solid var(--ink); border-radius:12px 14px 11px 15px / 14px 11px 15px 12px; background:#fff; font:700 18px var(--hand); cursor:pointer; }
.seg input:checked + label { background:var(--terra); color:#fff; }
.seg input:focus-visible + label { box-shadow:0 0 0 3px color-mix(in srgb, var(--terra) 38%, transparent); }
.check { display:flex; align-items:center; gap:7px; font-size:13.5px; color:var(--mute); margin-top:6px; } .check input { width:16px; height:16px; accent-color:var(--terra); }
.place { position:relative; }
.results { position:absolute; left:0; right:0; top:calc(100% + 4px); z-index:30; background:#fff; border:1.8px solid var(--ink); border-radius:14px; box-shadow:var(--shadow); max-height:270px; overflow:auto; }
.results button { display:block; width:100%; text-align:left; padding:9px 13px; border:0; background:none; font-size:14.5px; border-bottom:1px dashed var(--line); } .results button:hover { background:var(--memo); } .results small { color:var(--mute); }
details.adv { margin:2px 0 14px; } details.adv summary { font:700 18px var(--hand); cursor:pointer; color:var(--terra-d); }
details.adv .g { display:grid; gap:10px; margin-top:8px; }


/* 온보딩 */
.hello { margin:10px 20px 0; padding:18px 18px 16px; transform:rotate(-.5deg); }
.hello p { margin:6px 0 0; font:400 21px/1.5 var(--hand); }
.hello .to { color:var(--terra); font-weight:700; }
.promise { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:14px 20px 0; }
.promise div { text-align:center; padding:10px 4px; font:700 16px/1.3 var(--hand); } .promise i { display:block; font:900 22px var(--serif); font-style:normal; color:var(--terra); margin-bottom:2px; }

/* 홈: 나의 사계절 */
.season-card { margin:12px 20px 0; padding:20px 20px 18px; position:relative; }
.season-badge { display:inline-flex; align-items:center; gap:6px; font:700 13px var(--hand); background:var(--terra); color:#fff; padding:2px 10px; border-radius:99px; margin-bottom:8px; }
.season-title { font:700 27px/1.25 var(--hand); margin:0 0 6px; color:var(--ink); }
.season-title b { color:var(--terra); }
.season-tags { display:flex; gap:6px; flex-wrap:wrap; margin:8px 0 12px; }
.season-tag { font:700 13.5px var(--hand); padding:2px 10px; border-radius:99px; border:1.5px solid var(--ink); background:#fff; color:var(--ink); }
.season-desc { font:400 18px/1.55 var(--hand); color:#3b2f27; margin:0 0 14px; word-break:keep-all; }
.season-track { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; padding-top:12px; border-top:1.4px dashed var(--line); text-align:center; }
.season-node { padding:6px 2px; border-radius:12px; border:1.4px solid transparent; font:700 14px var(--hand); color:var(--mute); }
.season-node.on { border-color:var(--ink); background:var(--card); color:var(--ink); font-weight:900; box-shadow:1px 2px 0 rgba(59,47,39,.12); }
.season-node small { display:block; font-size:11px; font-weight:400; opacity:.85; }

.cta-badge { display:inline-block; font:700 11px var(--hand); background:rgba(255,255,255,.25); color:#fff; border:1px solid rgba(255,255,255,.5); padding:1px 7px; border-radius:99px; margin-bottom:4px; letter-spacing:.05em; }
.seed-card { margin:14px 20px 0; }
.seed-summary { display:flex; align-items:center; gap:14px; margin-top:8px; }
.seed-ilgan { width:52px; height:52px; border-radius:14px; border:1.8px solid var(--ink); display:grid; place-items:center; font:900 26px var(--serif); background:#fff; flex:none; }
.seed-info { font:400 16px/1.45 var(--hand); }
.seed-info b { font-size:18px; color:var(--ink); }
.stamps-header { display:flex; justify-content:space-between; align-items:center; margin:18px 20px 0; padding:0 4px; }
.stamps-header a { font-weight:700; font-size:13.5px; text-decoration:none; color:var(--terra-d); }
.stamps { display:flex; gap:8px; margin:8px 20px 0; } .stamp { flex:1; text-align:center; padding:8px 0 6px; font:900 26px/1.1 var(--serif); cursor:pointer; } .stamp small { display:block; font:400 15px var(--hand); color:var(--mute); }
.el-w { color:var(--wood); } .el-f { color:var(--fire); } .el-e { color:var(--earth); } .el-m { color:var(--metal); } .el-s { color:var(--water); }
.cta { margin:16px 20px 0; padding:14px 16px; display:flex; justify-content:space-between; align-items:center; background:var(--terra); color:#fff; cursor:pointer; }
.cta b { font:700 23px var(--hand); display:block; } .cta span { font:400 16px var(--hand); opacity:.92; }
.cta u { text-decoration:none; width:38px; height:38px; border-radius:50%; background:#fff; color:var(--terra); display:grid; place-items:center; font-weight:900; border:1.8px solid var(--ink); }

/* 만세력 */
.card4 { display:grid; grid-template-columns:repeat(4,1fr); gap:9px; margin:10px 20px 0; }
.pc { text-align:center; padding:9px 0 10px; } .pc:nth-child(odd) { transform:rotate(-1deg); } .pc:nth-child(even) { transform:rotate(.9deg); }
.pc .l { font:700 16px var(--hand); color:var(--mute); } .pc .s { font:400 15px var(--hand); color:var(--mute); min-height:20px; }
.gl { width:52px; margin:4px auto; padding:5px 0 3px; border:1.8px solid var(--ink); border-radius:14px 18px 12px 18px / 16px 12px 18px 14px; }
.gl b { display:block; font:900 27px/1.15 var(--serif); } .gl small { display:block; font:400 12px var(--hand); opacity:.85; }
.gl.w { background:var(--wood-t); color:var(--wood); } .gl.f { background:var(--fire-t); color:var(--fire); } .gl.e { background:var(--earth-t); color:var(--earth); } .gl.m { background:var(--metal-t); color:var(--metal); } .gl.s { background:var(--water-t); color:var(--water); }
.pc.me { background:var(--memo); } .pc .u { display:inline-block; font:700 14px var(--hand); background:#fff; border:1.4px solid var(--ink); border-radius:99px; padding:0 9px; }
.hid { display:flex; flex-wrap:wrap; gap:2px; justify-content:center; margin-top:5px; } .hid span { font:400 11px var(--sans); padding:0 4px; border-radius:6px; background:#fff; border:1px solid var(--line); }
.blobs { display:flex; justify-content:space-around; align-items:flex-end; height:84px; margin-top:6px; }
.blob { width:48px; border:1.8px solid var(--ink); border-radius:50% 50% 40% 40% / 60% 60% 40% 40%; display:grid; place-items:end center; padding-bottom:4px; font:700 15px var(--hand); }
.blob.empty { border-style:dashed; background:transparent !important; color:var(--mute); }
.stones { display:flex; gap:6px; align-items:flex-end; overflow-x:auto; padding:10px 2px 6px; }
.stone { flex:none; width:64px; text-align:center; font:900 19px var(--serif); padding:5px 0 4px; border:1.7px solid var(--ink); border-radius:14px 16px 12px 15px; background:#fff; }
.stone small { display:block; font:400 13px var(--hand); color:var(--mute); } .stone.cur { background:var(--ochre); transform:translateY(-8px) rotate(-2deg); box-shadow:2px 3px 0 rgba(59,47,39,.2); }
.memo { margin:14px 20px 0; padding:11px 14px; background:var(--sticky); transform:rotate(-.7deg); font:400 19px/1.5 var(--hand); border:1.6px dashed var(--ink); border-radius:6px; }
.glossary summary { font:700 19px var(--hand); cursor:pointer; color:var(--terra-d); } .glossary dl { margin:8px 0 0; display:grid; grid-template-columns:64px 1fr; gap:5px 10px; font-size:13.5px; } .glossary dt { font-weight:700; } .glossary dd { margin:0; color:#5a4a3e; }

/* 리포트 탭·진행·결과 */
.rlist { margin:10px 20px 0; display:grid; gap:10px; } .ritem { padding:12px 14px; display:flex; justify-content:space-between; align-items:center; gap:10px; }
.ritem b { font:700 21px var(--hand); display:block; } .ritem span { font-size:13.5px; color:var(--mute); }
.themes { display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; } .themes label { cursor:pointer; } .themes input { position:absolute; opacity:0; }
.themes span { display:inline-flex; align-items:center; gap:6px; font:700 16px var(--hand); padding:2px 12px; border:1.5px solid var(--ink); border-radius:99px; background:#fff; transition:all .15s; }
.themes input:checked + span { background:var(--terra); color:#fff; }
.prog { margin:10px 20px 0; padding:18px; text-align:center; }
.bar { height:16px; border:1.8px solid var(--ink); border-radius:99px; background:#fff; overflow:hidden; margin:10px 0 4px; } .bar b { display:block; height:100%; width:0; background:repeating-linear-gradient(45deg,var(--terra) 0 10px,#d9775c 10px 20px); transition:width .5s; }
.prog .pct { font:700 56px/1 var(--hand); } .prog .pct small { font-size:26px; margin-left:2px; color:var(--mute); } .prog .bar { height:20px; margin:14px 0 10px; } .prog .pstep { font:700 20px var(--hand); color:var(--ink); } .prog .pmeta { font:400 16px var(--hand); } .prog p { margin:2px 0 0; font:400 18px var(--hand); color:var(--mute); }
.pen { display:inline-block; animation:wiggle 1s ease-in-out infinite; } @keyframes wiggle { 0%,100% { transform:rotate(-8deg); } 50% { transform:rotate(10deg) translateY(-2px); } }
.steps { margin:12px 20px 0; padding:10px 16px; list-style:none; }
.steps li { display:grid; grid-template-columns:26px 1fr auto; gap:10px; align-items:center; padding:5px 0; font-size:14.5px; color:#a1907f; border-bottom:1px dashed var(--line); } .steps li:last-child { border:0; }
.steps .ic { width:22px; height:22px; border:1.8px solid #cdbda3; border-radius:50% 45% 50% 48%; display:grid; place-items:center; font:700 14px var(--sans); }
.steps li.run { color:var(--ink); font-weight:700; } .steps li.run .ic { border-color:var(--terra); border-top-color:transparent; animation:spin .9s linear infinite; }
.steps li.done { color:var(--ink); } .steps li.done .ic { background:var(--terra); border-color:var(--ink); color:#fff; }
.steps .el { font-size:12px; color:var(--mute); font-weight:400; } @keyframes spin { to { transform:rotate(360deg); } }
.feed { margin:12px 20px 0; display:grid; gap:10px; } .feed h3 { margin:0; font:700 22px var(--hand); }
.note { padding:12px 14px; animation:rise .5s ease both; } .note:nth-child(3n+2) { background:#dff0ff; transform:rotate(1deg); } .note:nth-child(3n+3) { background:#ffe3ee; transform:rotate(-.8deg); } .note:nth-child(3n+1) { background:var(--sticky); transform:rotate(.6deg); }
.note b { font:700 20px var(--hand); display:block; color:var(--terra-d); } .note ul { margin:2px 0 0; padding-left:17px; font-size:14px; line-height:1.55; }
.spinner { width:16px; height:16px; border-radius:50%; border:2px solid rgba(255,255,255,.5); border-top-color:#fff; animation:spin .8s linear infinite; } .btn:not(.primary) .spinner { border-color:rgba(59,47,39,.25); border-top-color:var(--ink); }

/* 공유 카드 모달 */
.modal { position:fixed; inset:0; background:rgba(40,30,20,.6); z-index:80; display:grid; place-items:center; padding:20px; }
.modal .box { background:var(--paper); border:1.8px solid var(--ink); border-radius:20px; padding:16px; max-width:420px; width:100%; max-height:94vh; overflow:auto; }
.modal canvas { width:100%; border-radius:14px; border:1.8px solid var(--ink); display:block; }
.modal .acts { display:flex; gap:8px; margin-top:12px; } .modal .acts .btn { flex:1; padding:10px 6px; font-size:19px; }

/* 하단 탭 */
.tabbar { position:fixed; bottom:0; left:50%; transform:translateX(-50%); width:100%; max-width:520px; height:76px; padding-bottom:8px; background:var(--card); border-top:1.8px solid var(--ink); display:flex; justify-content:space-around; align-items:center; z-index:50; }
.tab { flex:1; display:flex; flex-direction:column; align-items:center; gap:1px; border:0; background:none; color:var(--mute); font:700 15px var(--hand); padding:6px 0; }
.tab.on { color:var(--terra); } .tab svg { width:25px; height:25px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.foot { margin:26px 20px 0; padding-top:12px; border-top:1.5px dashed var(--line); color:var(--mute); font-size:12.5px; line-height:1.7; }

@media (max-width:560px) { .app { box-shadow:none; } body { background:var(--paper); } }

/* 만세력: 다섯 가지 기운 (한 줄 띠 + 다섯 칸) */
.ohbox { margin-top:6px; }
.oh-band { display:flex; gap:3px; height:22px; } .oh-band i { flex:1; border-radius:6px; }
.oh-bandl { display:flex; justify-content:space-between; font-size:11px; color:var(--mute); margin:5px 2px 14px; }
.oh-chips { display:grid; grid-template-columns:repeat(5,1fr); gap:7px; }
.oh-chip { position:relative; border:1px solid var(--line); border-radius:14px; padding:10px 0 9px; text-align:center; background:color-mix(in srgb, var(--c) 9%, var(--card)); min-width:0; }
.oh-chip b { display:block; font:700 26px/1.1 var(--serif); color:var(--c); } .oh-chip span { display:block; font:700 12px var(--sans); margin-top:3px; } .oh-chip small { display:block; font-size:10px; color:var(--mute); margin-top:2px; white-space:nowrap; }
.oh-chip.none { background:transparent; border-style:dashed; } .oh-chip.none b { opacity:.45; }
.oh-chip.me { border-color:var(--terra); box-shadow:0 0 0 1px var(--terra); }
.oh-chip u { position:absolute; top:-8px; right:-3px; text-decoration:none; font:700 10px var(--sans); background:var(--terra); color:var(--on, #fff); padding:1px 7px; border-radius:99px; }