/* ============================================================
   만세력 앱 UI (manse-ui.css) — 2026-10 시안 1:1 구현판
   기준: 「운명의파동 사주 앱 UI 목업」 375px 화면 실측값
   헤더 110 / 탭 50 / 배너 93 / 카드 radius 12 / 입력 46 / 버튼 60
   ============================================================ */
:root{
  --navy:#0b2442; --navy-tab:#061f38; --navy-btn:#16324e; --navy-text:#14233b;
  --cream:#fcf2da; --cream-card:#fefbf4; --cream-field:#fbf8f1; --cream-line:#e9e0cc;
  --gold:#b0813a; --gold-deep:#8a5d1e; --gold-text:#8b5e1f; --gold-line:#d9b779;
  --text:#1b2a40; --text-2:#5f5a50; --text-3:#8c867a;
  --orange:#b0601c; --red:#d0202a;
  --serif:"Noto Serif KR",serif;
  --sans:"Noto Sans KR",-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --safe-b:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body.mui{margin:0;padding:0;color:var(--text);font-family:var(--sans);font-size:16px;line-height:1.5;
  -webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;
  background:#efe6d6 url('/static/images/background.webp') center top/cover fixed}
.app{max-width:480px;margin:0 auto;min-height:100vh;position:relative}

/* ---------- 1. 공통 App Header (브랜드) ---------- */
.hdr{position:relative;height:110px;background:var(--navy) url('/static/images/ui/header_bg.webp') center/cover no-repeat;
  display:flex;align-items:center;justify-content:center;gap:14px;padding-right:20px}
.hdr .logo{width:58px;height:58px;border-radius:50%;flex-shrink:0}
.hdr .bt{color:#f8efd9;line-height:1}
.hdr .t1{font-family:var(--serif);font-size:30px;font-weight:700;letter-spacing:.02em;display:block}
.hdr .t2{font-size:13.5px;color:#eadfc4;display:block;margin-top:9px;letter-spacing:.01em}
.hdr a{text-decoration:none;display:flex;align-items:center;gap:14px}

/* ---------- 2. 공통 Tab Navigation ---------- */
.tabs{display:flex;align-items:stretch;height:50px;padding:3px;background:var(--navy-tab);
  border-radius:16px 16px 0 0;margin-top:-2px;position:relative}
.tabs button,.tabs a{flex:1;display:flex;align-items:center;justify-content:center;border:none;background:transparent;
  color:#f3ead6;font-family:var(--sans);font-size:15.5px;font-weight:500;cursor:pointer;border-radius:14px;
  position:relative;text-decoration:none;letter-spacing:-.01em}
.tabs button + button::before{content:"";position:absolute;left:0;top:13px;bottom:13px;width:1px;background:rgba(255,255,255,.18)}
.tabs button.active{background:var(--cream);color:var(--navy-text);font-weight:700;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.tabs button.active::before,.tabs button.active + button::before{display:none}
/* 결과·상세 화면용 동작 줄 (탭과 같은 자리·높이) */
.actbar{display:flex;align-items:center;gap:8px;height:50px;padding:3px 6px 3px 3px;background:var(--navy-tab);
  border-radius:16px 16px 0 0;margin-top:-2px}
.actbar .ab-back{height:44px;display:flex;align-items:center;gap:6px;padding:0 12px;color:#f3ead6;text-decoration:none;
  font-size:15.5px;font-weight:500;border-radius:14px;background:transparent;border:none;font-family:var(--sans);cursor:pointer}
.actbar .ttl{flex:1;min-width:0;text-align:center;color:#f3ead6;font-size:15px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.actbar .save{height:38px;padding:0 16px;border-radius:12px;border:none;background:var(--cream);color:var(--navy-text);
  font-family:var(--sans);font-size:15px;font-weight:700;cursor:pointer;flex-shrink:0}
.actbar .save.done{background:rgba(252,242,218,.18);color:#e9dcbd;cursor:default}
.actbar .ghost{width:70px;flex-shrink:0}

/* ---------- 3. Promo Banner (운명의파동) ---------- */
.promo{display:block;position:relative;height:93px;margin:10px 9px 0;border-radius:10px;overflow:hidden;text-decoration:none;
  background:var(--navy) url('/static/images/ui/banner_bg.webp') center/cover no-repeat;
  border:1px solid rgba(214,176,108,.75);box-shadow:0 2px 6px rgba(40,30,10,.18)}
.promo .p1{position:absolute;left:76px;top:13px;font-family:var(--serif);font-size:23px;font-weight:700;color:#f6ecd6;letter-spacing:.02em;line-height:1.2}
.promo .p2{position:absolute;left:66px;top:51px;height:31px;padding:0 14px 0 18px;border-radius:16px;
  background:linear-gradient(180deg,#fcefcf,#f2d79f);color:#1d2b45;font-size:15px;font-weight:700;
  display:flex;align-items:center;gap:22px;box-shadow:0 1px 2px rgba(0,0,0,.25);white-space:nowrap}
.promo .p2 .cv{width:9px;height:14px}
.promo:active{filter:brightness(.97)}

/* ---------- 4. 카드 공통 ---------- */
.card{position:relative;margin:10px 9px 16px;background:var(--cream-card);border:1px solid var(--cream-line);border-radius:12px;
  padding:15px 16px 18px;overflow:hidden;box-shadow:0 1px 3px rgba(60,40,10,.06)}
.card > *{position:relative;z-index:1}
.card h2{margin:0;font-size:22px;font-weight:800;color:var(--navy-text);letter-spacing:-.02em;line-height:1.3}
.card .lead{margin:7px 0 0;font-size:13px;color:var(--text-2);letter-spacing:-.035em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card .deco-mid{position:absolute;right:4px;top:232px;width:104px;z-index:0;pointer-events:none;opacity:.95}
.card .deco-bot{display:block;width:calc(100% + 32px);margin:14px -16px -18px;z-index:0;pointer-events:none}
.head-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.head-row .meta{font-size:14.5px;color:var(--navy-text);font-weight:500;display:flex;align-items:center;gap:8px;white-space:nowrap}
.head-row .meta svg{width:22px;height:22px}

/* 입력 */
.f-label{display:flex;align-items:center;justify-content:space-between;margin:12px 0 7px;min-height:24px}
.f-label b{font-size:15.5px;font-weight:700;color:var(--navy-text)}
.f-label small{font-size:13px;font-weight:400;color:var(--text-2);margin-left:3px}
.sel{appearance:none;-webkit-appearance:none;width:100%;height:46px;border:1px solid #e6dfcf;border-radius:9px;background:#fff
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%231b2a40' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 13px center no-repeat;
  padding:0 30px 0 14px;font-family:var(--sans);font-size:16.5px;line-height:1.2;color:var(--text);box-shadow:0 1px 2px rgba(60,40,10,.04)}
.sel:focus{outline:none;border-color:var(--gold)}
.sel.is-empty{color:#a7a091}
.sel.bad{border-color:#c4483d}
.row-date{display:grid;grid-template-columns:122fr 92fr 93fr;gap:9px}
.row-time{display:flex;align-items:center;gap:0}
.row-time .sel{width:102px}
.row-time .colon{width:28px;text-align:center;font-size:18px;font-weight:700;color:var(--text)}
.hint{margin:7px 0 0;font-size:13.5px;color:var(--text-2)}
.err{display:none;margin:6px 0 0;font-size:13px;color:#c4483d}
.err.show{display:block}
.calseg{display:flex;align-items:center;gap:6px}
.calseg .seg{display:flex;background:#f1ead9;border-radius:8px;padding:2px}
.calseg .seg button{height:24px;padding:0 10px;border:none;background:transparent;border-radius:6px;font-family:var(--sans);
  font-size:13.5px;font-weight:700;color:#8c867a;cursor:pointer}
.calseg .seg button.on{background:#fff;color:var(--navy-text);box-shadow:0 1px 2px rgba(0,0,0,.12)}
.calseg .leap{display:none;align-items:center;gap:4px;font-size:13.5px;font-weight:700;color:var(--navy-text);cursor:pointer}
.calseg .leap.show{display:inline-flex}
.calseg .leap input{width:16px;height:16px;margin:0;accent-color:var(--gold)}
.gender{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.gender label{height:40px;border:1px solid #e3dccb;border-radius:9px;background:#fff;display:flex;align-items:center;justify-content:center;
  gap:10px;font-size:16px;font-weight:500;color:var(--navy-text);cursor:pointer}
.gender label svg{width:20px;height:20px}
.gender input{display:none}
.gender label:has(input:checked){background:var(--navy-btn);border-color:var(--navy-btn);color:#fff}
.namebox{position:relative}
.namebox input{width:100%;height:46px;border:1px solid #e6dfcf;border-radius:9px;background:var(--cream-field);padding:0 44px 0 14px;
  font-family:var(--sans);font-size:16.5px;color:var(--text)}
.namebox input:focus{outline:none;border-color:var(--gold)}
.namebox input::placeholder{color:#a7a091}
.namebox .clr{position:absolute;right:11px;top:11px;width:24px;height:24px;border:none;border-radius:50%;background:#cfc9be;color:#fff;
  font-size:15px;line-height:24px;padding:0;cursor:pointer;display:none}
.namebox.has .clr{display:block}
.actions{display:flex;gap:14px;margin-top:24px}
.btn-save{width:120px;height:60px;flex-shrink:0;border-radius:10px;border:1px solid var(--gold-line);background:#fdf6e6;color:var(--gold-text);
  font-family:var(--sans);font-size:17px;font-weight:700;cursor:pointer}
.btn-go{flex:1;height:60px;border-radius:10px;border:none;background:linear-gradient(90deg,#b0813a,#8a5d1e);color:#fff;
  font-family:var(--sans);font-size:19px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:28px;
  box-shadow:0 2px 4px rgba(90,60,20,.25)}
.btn-go .cv{width:11px;height:18px}
.btn-save:active,.btn-go:active{transform:translateY(1px)}

/* ---------- 5. 오늘의 운세 카드 ---------- */
.pcard{border:1px solid #efe6d3;border-radius:12px;background:#fffdf8;padding:12px 12px 12px;margin:10px -8px 0}
.prow{display:flex;align-items:center;gap:14px;cursor:pointer}
.prow .who{flex:1;min-width:0}
.prow .nm{font-size:20px;font-weight:700;color:var(--navy-text);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prow .bd{font-size:14.5px;color:var(--text-2);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prow .chev{width:10px;height:16px;flex-shrink:0;margin-right:4px}
.tline{display:flex;gap:12px;margin-top:10px;align-items:flex-start}
.tline .badge{width:36px;height:36px;border-radius:50%;flex-shrink:0;background:#f0f2df;border:1px solid #e4e6c9;display:flex;
  align-items:center;justify-content:center;margin-top:2px}
.tline .badge svg{width:26px;height:26px}
.tline .hl{font-size:15.5px;font-weight:700;color:var(--orange);line-height:1.4;letter-spacing:-.02em}
.tline .sm{font-size:14px;color:#4a463f;line-height:1.55;letter-spacing:-.02em;margin-top:2px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tline .sk{height:14px;border-radius:7px;background:linear-gradient(90deg,#f1ebdd,#f8f3e8,#f1ebdd);background-size:200% 100%;animation:sk 1.2s infinite;margin:4px 0}
@keyframes sk{to{background-position:-200% 0}}
.more{display:flex;align-items:center;justify-content:center;gap:22px;width:252px;max-width:calc(100% - 40px);height:34px;margin:10px auto 0;
  border-radius:17px;border:1px solid #e7cf9f;background:#fbf1dd;color:#7a4f17;font-family:var(--sans);font-size:15px;font-weight:700;cursor:pointer}
.more .cv{width:8px;height:13px}

/* 아바타: 일간 한 글자 + 오행 색 */
.av{width:58px;height:58px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-size:27px;font-weight:700;box-shadow:inset 0 0 0 1px rgba(255,255,255,.55),0 1px 3px rgba(60,40,10,.18)}
.av.o-목{background:radial-gradient(circle at 35% 30%,#eef3e8,#b9ccb0 70%,#94ad8a);color:#2f5a3a}
.av.o-화{background:radial-gradient(circle at 35% 30%,#f8ece6,#e0b3a3 70%,#c98e7c);color:#8a3427}
.av.o-토{background:radial-gradient(circle at 35% 30%,#f7efdc,#dcc391 70%,#c4a464);color:#6e5216}
.av.o-금{background:radial-gradient(circle at 35% 30%,#f4f3f0,#cfcbc2 70%,#aba69b);color:#4b4a46}
.av.o-수{background:radial-gradient(circle at 35% 30%,#eaeef5,#a9b8cd 70%,#7f93ad);color:#1f3a5c}
.av.o-x{background:radial-gradient(circle at 35% 30%,#fbf6ea,#e7dcc3 70%,#d3c3a0);color:#6b5a3a;font-family:var(--sans);font-size:22px}

/* ---------- 6. 저장목록 ---------- */
.search{position:relative;margin:14px -2px 2px}
.search input{width:100%;height:44px;border:1px solid #e3dccb;border-radius:9px;background:#fff;padding:0 14px 0 46px;
  font-family:var(--sans);font-size:16px;color:var(--text)}
.search input:focus{outline:none;border-color:var(--gold)}
.search input::placeholder{color:#7d786d}
.search svg{position:absolute;left:14px;top:11px;width:22px;height:22px}
.lrow{padding:12px 0 13px;border-bottom:1px solid #ece4d4}
#savedList{margin:4px -8px 0}
.lrow:last-child{border-bottom:none}
.lbtns{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:10px}
.lbtns button{height:34px;border-radius:7px;font-family:var(--sans);font-size:15px;font-weight:500;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px}
.lbtns .b-view{background:var(--navy-btn);border:1px solid var(--navy-btn);color:#fff}
.lbtns .b-today{background:#fdf5e4;border:1px solid #e9dcc0;color:var(--navy-text)}
.lbtns .b-del{background:#fdecec;border:1px solid #f6c9c9;color:var(--red)}
.lbtns .b-del svg{width:18px;height:18px}
.count{font-size:14.5px;font-weight:700;color:var(--navy-text)}
.empty{padding:26px 4px 6px;text-align:center;font-size:14.5px;color:var(--text-2);line-height:1.7}
.empty button{margin-top:12px}

/* ---------- 토스트·바텀시트·하단바 ---------- */
.toast{position:fixed;left:50%;bottom:calc(24px + var(--safe-b));transform:translateX(-50%) translateY(10px);
  background:rgba(11,36,66,.95);color:#fff;font-size:14.5px;padding:11px 16px;border-radius:12px;z-index:90;
  opacity:0;pointer-events:none;transition:.2s;width:max-content;max-width:calc(100% - 32px);display:flex;gap:14px;align-items:center;word-break:keep-all}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}
.toast.up{bottom:calc(92px + var(--safe-b))}
.toast a,.toast button{background:none;border:none;color:#f0d48c;font-weight:700;font-size:14.5px;cursor:pointer;font-family:var(--sans);text-decoration:none;white-space:nowrap;padding:0}
.bsheet-bg{position:fixed;inset:0;background:rgba(6,20,40,.45);z-index:80;opacity:0;pointer-events:none;transition:.2s}
.bsheet-bg.show{opacity:1;pointer-events:auto}
.bsheet{position:fixed;left:0;right:0;bottom:0;z-index:81;background:var(--cream-card);border-radius:18px 18px 0 0;
  padding:20px 16px calc(16px + var(--safe-b));transform:translateY(105%);transition:.22s}
.bsheet.show{transform:translateY(0)}
.bsheet .in{max-width:480px;margin:0 auto}
.bsheet h3{margin:0 0 4px;font-size:19px;color:var(--navy-text)}
.bsheet p{margin:0 0 12px;font-size:13.5px;color:var(--text-2)}
.bsheet .namebox input{background:#fff}
.bsheet .chk{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:15px;color:var(--text)}
.bsheet .chk input{width:20px;height:20px;accent-color:var(--gold)}
.bsheet .row{display:flex;gap:10px;margin-top:16px}
.bsheet .row button{flex:1;height:52px}
.bottombar{position:fixed;left:0;right:0;bottom:0;z-index:40;background:rgba(254,251,244,.96);border-top:1px solid var(--cream-line);
  padding:10px 9px calc(10px + var(--safe-b))}
.bottombar .in{max-width:462px;margin:0 auto}
.bottombar .btn-go{width:100%;height:54px;font-size:18px}
.pad-bottom{height:calc(80px + var(--safe-b))}
.shake{animation:mui-shake .3s}
@keyframes mui-shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}

/* ---------- 숫자 직접 입력칸 (2026-10-06b) ---------- */
.sel.num{background-image:none;padding:0 10px;text-align:center;font-size:18px;font-weight:500;letter-spacing:.04em}
.sel.num::placeholder{color:#aaa395;font-size:15.5px;font-weight:400;letter-spacing:0}
.sel.num:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(176,129,58,.15)}

/* ============================================================
   Stage 5 모바일 보정 (2026-10-06d) — 표현(CSS)만. 계산·저장 로직 무관
   템플릿 인라인 <style>이 이 파일보다 뒤에 오므로 body.mui 접두로 우선순위를 확보
   ============================================================ */

/* [6] 안내문: 1줄 말줄임 제거 → 최대 2줄 */
body.mui .card .lead{white-space:normal;word-break:keep-all;overflow-wrap:anywhere;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;line-height:1.5}

/* [1] 입력: 저장/만세력 보기 버튼 — 좁은 폭에서 저장 버튼을 줄여 '만세력 보기' 자리 확보 */
body.mui .btn-go{min-width:0;padding:0 14px}
body.mui .btn-go > span{white-space:nowrap}
@media (max-width:374px){
  body.mui .actions{gap:10px}
  body.mui .btn-save{width:96px;font-size:16px}
  body.mui .btn-go{gap:14px;font-size:18px}
}

/* [2] 저장목록 버튼 3개 — 글자 길이에 맞춰 칸 비율 조정 + 한 줄 유지 */
body.mui .lbtns{grid-template-columns:1fr 1.15fr .85fr}
body.mui .lbtns button{min-width:0;padding:0 4px;white-space:nowrap;letter-spacing:-.02em}
@media (max-width:374px){ body.mui .lbtns{gap:6px} body.mui .lbtns button{font-size:14px;gap:4px} body.mui .lbtns .b-del svg{width:16px;height:16px} }

/* [3] 카드 제목줄(제목 + 날짜/인원) — 제목은 한 줄, 자리가 모자라면 날짜가 다음 줄 오른쪽으로 */
body.mui .head-row{flex-wrap:wrap;row-gap:2px}
body.mui .head-row h2{white-space:nowrap;flex-shrink:0}
body.mui .head-row .meta,body.mui .head-row .count{margin-left:auto}
@media (max-width:374px){ body.mui .head-row .meta{font-size:13.5px;gap:6px} body.mui .head-row .meta svg{width:19px;height:19px} }

/* [4] 명식표 머리글('月 월주' 등) — 한 줄 유지, 좁은 폭에서 왼쪽 라벨칸·자간 축소 */
body.mui .manse th{white-space:nowrap}
@media (max-width:374px){
  body.mui .manse th{padding:8px 1px;font-size:12px;letter-spacing:0}
  body.mui .manse .label-col{width:50px;font-size:12px;padding:5px 2px !important}
}

/* [5] 대운·세운·월운 소제목줄 — 제목/부제 한 줄 유지, 오른쪽 정보가 안 맞으면 다음 줄로 */
body.mui .fl-head{flex-wrap:wrap;row-gap:4px}
body.mui .fl-head .rh,body.mui .fl-head .rh2{white-space:nowrap}
body.mui .fl-head .rh small,body.mui .fl-head .rh2 small{white-space:nowrap}
body.mui .fl-head .fl-info{margin-left:auto}

/* [7] 주요 터치 요소 ≈40px (보이는 크기는 최소한만 키우고 나머지는 터치 영역만 확장) */
body.mui .calseg .seg button{height:30px;padding:0 12px;position:relative}
body.mui .calseg .seg button::after{content:"";position:absolute;left:0;right:0;top:-5px;bottom:-5px}
body.mui .calseg .leap{min-height:30px;position:relative}
body.mui .calseg .leap::after{content:"";position:absolute;left:-4px;right:-4px;top:-5px;bottom:-5px}
body.mui .lbtns button{height:40px}
body.mui .more{height:40px;border-radius:20px}
body.mui .bsheet .chk{min-height:40px;margin-top:8px}
body.mui .namebox .clr::after{content:"";position:absolute;inset:-8px}

/* [8] 대운·세운·월운 칸 보조글자 — 360px 이상에서만 최소 11px (320px은 5열 세운 구조 보호를 위해 기존 유지) */
@media (min-width:360px){
  body.mui .fc .sp,body.mui .g5 .fc .sp{font-size:11px;letter-spacing:-.05em}
  body.mui .fc .ag{font-size:11px}
  body.mui .fc.now::after{font-size:11px}
  body.mui .fl-grid .fc{padding-top:10px}  /* 11px '지금' 배지가 연도·나이 글자를 덮지 않도록 */
  body.mui .cell .day{font-size:11px}
}

/* [6-보정] 입력 카드: 안내문이 1줄/2줄(기기 글꼴에 따라 다름)이어도 산 그림(deco-mid)과 입력칸의 상대 위치가 같도록
   안내문 높이를 2줄로 고정하고, 그림을 그만큼(약 20px) 내림 → 시각 힌트 문구와 그림이 겹치지 않음 */
body.mui #manseForm .lead{min-height:3em}
body.mui #manseForm .deco-mid{top:252px}

/* [검증 중 발견] 오늘의 운세 상세(320px대): 카드 안 배너가 좁아 '보러가기' 버튼 오른쪽 화살표가 잘림 → 버튼을 왼쪽으로 당김 */
@media (max-width:374px){ body.mui .wrap .promo .p2{left:40px;gap:14px} }