@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@latest/dist/web/static/pretendard.css');
:root{
  --ink:#191F28; --ink-soft:#4E5968; --ink-faint:#8B95A1;
  --paper:#F7F9FC; --surface:#FFFFFF; --line:#F0F2F5;
  --accent:#3B6EF6; --accent-ink:#2554D9; --accent-soft:#EEF3FE;
  --safe:#06B26B; --safe-soft:#E4F8EF;
  --warn:#F5820D; --warn-soft:#FFF1E0;
  --danger:#F04452; --danger-soft:#FFEAEC;
  --shadow-sm:0 6px 24px rgba(25,31,40,.07);
  --shadow-lg:0 14px 44px rgba(25,31,40,.11);
  /* Pretendard가 굵기별(Black900/ExtraBold800/Bold700...)로 실제 별도 글꼴을 제공해서, 기존 font-weight:800
     헤드라인은 자동으로 ExtraBold로, 본문(500~700)은 그에 맞는 굵기로 매핑됨 — 별도 지정 불필요 */
  --font-ui:'Pretendard', -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "Segoe UI", sans-serif;
}
@media (prefers-color-scheme: dark){
  :root{
    --ink:#F2F4F6; --ink-soft:#B0B8C1; --ink-faint:#6B7684;
    --paper:#0D0F13; --surface:#1A1D23; --line:#2B2F38;
    --accent:#5B9CFF; --accent-ink:#8CBBFF; --accent-soft:rgba(91,156,255,0.14);
    --safe:#2FD98A; --safe-soft:rgba(47,217,138,0.14);
    --warn:#FFA53D; --warn-soft:rgba(255,165,61,0.14);
    --danger:#FF6B76; --danger-soft:rgba(255,107,118,0.14);
  }
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{background:var(--paper); color:var(--ink); font-family:var(--font-ui); line-height:1.55;}
a{color:inherit; text-decoration:none;}

.topbar{display:flex; align-items:center; gap:12px; padding:16px 24px; background:var(--surface); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:10;}
.topbar .logo{font-weight:800; font-size:15px;}
.topbar .src{margin-left:auto; font-size:11.5px; color:var(--ink-faint); background:var(--paper); padding:5px 10px; border-radius:999px;}

/* ---------- shared nav (토스뱅크 참고 — 밑줄 탭 대신 알약모양 활성탭, 경계선 대신 옅은 그림자) ---------- */
.nav{display:flex; align-items:center; gap:8px; padding:14px 28px; background:var(--surface); border-bottom:none; box-shadow:0 1px 0 var(--line); position:sticky; top:0; z-index:50;}
.nav .brand{font-weight:900; font-size:19px; letter-spacing:-0.02em; flex-shrink:0; margin-right:18px;}
.nav .links{display:flex; gap:4px; flex:1;}
.nav .links a{font-size:14.5px; font-weight:700; color:var(--ink-faint); padding:9px 14px; border-radius:999px;}
.nav .links a.active{color:var(--accent-ink); background:var(--accent-soft);}
.nav .right{display:flex; align-items:center; gap:8px; flex-shrink:0;}
.nav .authbtn{font-size:14px; font-weight:800; padding:11px 18px; border-radius:14px; background:var(--accent); color:#fff; border:none; cursor:pointer; font-family:inherit; transition:background .15s;}
.nav .authbtn.ghost{background:var(--paper); color:var(--ink-soft);}
.nav .authbtn:not(.ghost):hover{background:var(--accent-ink);}
.nav .userchip{font-size:14px; font-weight:700; color:var(--ink-soft); display:flex; align-items:center; gap:7px;}
.nav .userchip .av{width:26px; height:26px; border-radius:50%; background:var(--accent-soft); color:var(--accent-ink); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800;}
@media (max-width:720px){ .nav .links{display:none;} }

/* ---------- auth pages ---------- */
.authwrap{max-width:400px; margin:80px auto; padding:0 20px;}
.authcard{background:var(--surface); border:none; box-shadow:var(--shadow-sm); border-radius:28px; padding:36px 30px;}
.authcard h1{font-size:23px; font-weight:800; margin:0 0 6px; letter-spacing:-0.01em;}
.authcard p.sub{font-size:13.5px; color:var(--ink-faint); margin:0 0 28px;}
.field{margin-bottom:16px;}
.field label{display:block; font-size:13px; font-weight:700; color:var(--ink-soft); margin-bottom:7px;}
.field input{width:100%; padding:13px 14px; border-radius:12px; border:none; background:var(--paper); font-size:15px; color:var(--ink); font-family:inherit;}
.field input:focus{outline:2px solid var(--accent); outline-offset:1px;}
.formbtn{width:100%; padding:15px; border-radius:16px; background:var(--accent); color:#fff; border:none; font-size:15px; font-weight:800; cursor:pointer; font-family:inherit; margin-top:6px; transition:background .15s;}
.formbtn:hover{background:var(--accent-ink);}
.formerr{background:var(--danger-soft); color:var(--danger); font-size:12.5px; font-weight:700; padding:10px 12px; border-radius:10px; margin-bottom:14px; display:none;}
.formerr.show{display:block;}
.switchline{text-align:center; font-size:12.5px; color:var(--ink-faint); margin-top:16px;}
.switchline a{color:var(--accent-ink); font-weight:700;}

/* ---------- home (토스뱅크 참고 — 그라데이션 대신 단색 플랫블루, 큰 라운드, 테두리 대신 옅은 그림자) ---------- */
.hero{background:var(--accent); color:#fff; border-radius:28px; padding:36px 30px; margin-bottom:28px;}
.hero .eyebrow2{font-size:13px; opacity:.85; font-weight:700;}
.hero h2{font-size:25px; font-weight:800; margin:10px 0 0; line-height:1.42; letter-spacing:-0.02em;}
.quicklinks{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:30px;}
.qlink{background:var(--surface); border:none; box-shadow:var(--shadow-sm); border-radius:20px; padding:20px 12px; text-align:center; font-size:12.5px; font-weight:700; color:var(--ink-soft); transition:box-shadow .2s, transform .2s;}
.qlink:hover{box-shadow:var(--shadow-lg); transform:translateY(-5px);}
.qlink .ic{width:40px; height:40px; border-radius:14px; background:var(--accent-soft); margin:0 auto 10px; display:flex; align-items:center; justify-content:center;}
.qlink .ic svg{width:18px; height:18px;}
@media (max-width:600px){ .quicklinks{grid-template-columns:repeat(2,1fr);} }

/* ---------- landing hero ---------- */
.landing-wrap{max-width:1080px; margin:0 auto; padding:0 20px;}
.lhero{position:relative; padding:108px 20px 64px; display:grid; grid-template-columns:1.15fr 0.85fr; gap:24px; align-items:center; text-align:left; overflow:hidden;}
.lhero .eyebrow2{display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:700; color:var(--ink-faint); letter-spacing:.04em; text-transform:uppercase;}
.lhero .eyebrow2::before{content:''; width:7px; height:7px; border-radius:50%; background:var(--accent); flex-shrink:0;}
.lhero h1{font-size:clamp(32px,4.6vw,50px); font-weight:800; letter-spacing:-0.03em; margin:22px 0 20px; max-width:13ch; line-height:1.28;}
.lhero h1 .hl{color:var(--accent);}
.lhero p{font-size:17px; color:var(--ink-soft); max-width:34ch; margin:0 0 34px; line-height:1.65; font-weight:500;}
.lhero .ctarow{display:flex; gap:10px; flex-wrap:wrap;}
.lhero .ctarow .btn-primary{background:var(--accent); color:#fff; padding:17px 28px; border-radius:14px; font-size:16px; font-weight:800; transition:background .15s;}
.lhero .ctarow .btn-primary:hover{background:var(--accent-ink);}
.lhero .ctarow .btn-secondary{background:none; border:1.5px solid var(--line); color:var(--ink); padding:17px 28px; border-radius:14px; font-size:16px; font-weight:800;}
.lhero .ctarow .btn-rich{display:flex; flex-direction:column; align-items:flex-start; gap:2px; padding:13px 26px;}
.lhero .ctarow .btn-rich .t1{font-size:16px; font-weight:800;}
.lhero .ctarow .btn-rich .t2{font-size:11.5px; font-weight:600; opacity:.85;}
.lhero-mark{position:relative; aspect-ratio:1/1; display:flex; align-items:center; justify-content:center;}
.lhero-mark::before{content:'';position:absolute; inset:6%; border-radius:50%; border:1px solid var(--line);}
.lhero-mark::after{content:'';position:absolute; inset:24%; border-radius:50%; border:1px solid var(--line);}
.lhero-mark .lm-pct{font-size:clamp(48px,7vw,76px); font-weight:800; color:var(--accent); letter-spacing:-0.03em; font-variant-numeric:tabular-nums;}
.lhero-mark .lm-sub{position:absolute; bottom:10%; font-size:12.5px; font-weight:700; color:var(--ink-faint); text-align:center;}
@media (max-width:820px){ .lhero{grid-template-columns:1fr; padding-top:64px;} .lhero-mark{display:none;} .lhero h1{max-width:none;} .lhero p{max-width:none;} }

.bare-stats{display:flex; gap:0; padding:0 20px 84px; flex-wrap:wrap; border-top:1px solid var(--line);}
.bare-stat{display:flex; flex-direction:column; gap:6px; padding:22px 40px 0 0; border-right:1px solid var(--line); margin-right:40px;}
.bare-stat:last-child{border-right:none; margin-right:0;}
.bare-stat .n{font-size:30px; font-weight:800; color:var(--ink); letter-spacing:-0.02em; font-variant-numeric:tabular-nums;}
.bare-stat .l{font-size:13px; font-weight:700; color:var(--ink-faint);}
@media (max-width:600px){ .bare-stats{gap:0;} .bare-stat{padding-right:24px; margin-right:24px;} .bare-stat .n{font-size:24px;} }

.section-title{text-align:left; margin:0 0 40px; display:flex; align-items:baseline; gap:14px; border-bottom:1px solid var(--line); padding-bottom:20px;}
.section-title .eyebrow2{font-size:12.5px; font-weight:700; color:var(--ink-faint); letter-spacing:.06em; text-transform:uppercase; white-space:nowrap;}
.section-title h2{font-size:26px; font-weight:800; margin:0; letter-spacing:-0.02em;}

.feature-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:0 32px; margin-bottom:84px;}
@media (max-width:760px){ .feature-grid{grid-template-columns:1fr;} }
.feature-card{border-top:1px solid var(--line); padding:28px 4px 30px; text-align:left;}
.feature-card .ic{font-size:13px; font-weight:800; color:var(--accent); letter-spacing:.02em; margin-bottom:16px; font-variant-numeric:tabular-nums;}
.feature-card h3{font-size:19px; font-weight:800; margin:0 0 9px; letter-spacing:-0.01em;}
.feature-card p{font-size:14.5px; color:var(--ink-faint); margin:0; line-height:1.65; max-width:40ch;}

.steps-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:84px;}
@media (max-width:760px){ .steps-grid{grid-template-columns:1fr;} }
.step-card{text-align:left; padding:0 24px 0 0;}
.step-card .stepno{display:block; font-size:13px; font-weight:800; color:var(--ink-faint); font-variant-numeric:tabular-nums; margin-bottom:16px; letter-spacing:.02em;}
.step-card h3{font-size:18px; font-weight:800; margin:0 0 8px; letter-spacing:-0.01em;}
.step-card p{font-size:14px; color:var(--ink-faint); margin:0; line-height:1.65;}

.preview-band{background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:36px 32px; margin-bottom:64px;}
.preview-top{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:24px; flex-wrap:wrap; gap:8px;}
.preview-top h2{font-size:21px; font-weight:800; margin:0; letter-spacing:-0.01em;}
.preview-top .more{font-size:13.5px; font-weight:700; color:var(--accent-ink);}
.preview-note{font-size:13.5px; color:var(--ink-faint); margin:0 0 24px;}

.footer-cta{padding:64px 20px 84px; border-top:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;}
.footer-cta h2{font-size:24px; font-weight:800; margin:0 0 8px; letter-spacing:-0.02em; max-width:22ch;}
.footer-cta p{font-size:14.5px; color:var(--ink-faint); margin:0; max-width:44ch;}
.footer-cta .btn-primary:hover{background:var(--accent-ink);}
@media (max-width:640px){ .footer-cta{flex-direction:column; align-items:flex-start; text-align:left;} }

/* ---------- stats ---------- */
.stats-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:28px;}
.stat-tile{background:var(--surface); border:none; box-shadow:var(--shadow-sm); border-radius:20px; padding:20px;}
.stat-tile .k{font-size:12.5px; color:var(--ink-faint); font-weight:700;}
.stat-tile .v{font-size:23px; font-weight:800; margin-top:6px; font-variant-numeric:tabular-nums;}
.stat-tile .r{font-size:11.5px; color:var(--ink-faint); margin-top:4px;}
.distbox{display:flex; flex-direction:column; gap:2px; background:var(--surface); border:none; box-shadow:var(--shadow-sm); border-radius:20px; padding:20px; overflow-x:auto;}
.dist-bar{display:flex; align-items:center; gap:12px; margin-bottom:10px;}
.dist-bar .lbl{width:74px; font-size:13.5px; font-weight:700; color:var(--ink-soft); flex-shrink:0;}
.dist-bar .track{flex:1; height:22px; background:var(--paper); border-radius:7px; overflow:hidden;}
.dist-bar .fill{height:100%; background:var(--accent);}
.dist-bar .n{width:32px; text-align:right; font-size:12.5px; font-weight:700; flex-shrink:0;}
@media (max-width:600px){ .stats-grid{grid-template-columns:repeat(2,1fr);} }

.record-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px;}
@media (max-width:680px){ .record-grid{grid-template-columns:1fr;} }
.record-card{display:block; min-width:0; background:var(--surface); border:none; box-shadow:var(--shadow-sm); border-radius:20px; padding:20px; transition:box-shadow .2s, transform .2s;}
.record-card:hover{box-shadow:var(--shadow-lg); transform:translateY(-3px);}
.record-card .rc-label{font-size:12.5px; color:var(--accent-ink); font-weight:800;}
.record-card .rc-value{font-size:22px; font-weight:800; margin-top:6px; font-variant-numeric:tabular-nums; color:var(--ink);}
.record-card .rc-sub{font-size:12px; color:var(--ink-faint); margin-top:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

/* ---------- calculator page ---------- */
.calcpage{background:var(--surface); border:none; box-shadow:var(--shadow-sm); border-radius:28px; padding:32px;}
.calcpage h1{font-size:22px; font-weight:800; margin:0 0 6px;}
.calcpage p.sub{font-size:13.5px; color:var(--ink-faint); margin:0 0 26px;}
.calc-2col{display:grid; grid-template-columns:1fr 1fr; gap:28px;}
@media (max-width:640px){ .calc-2col{grid-template-columns:1fr;} }
.numfield{margin-bottom:16px;}
.numfield label{display:block; font-size:13px; font-weight:700; color:var(--ink-soft); margin-bottom:7px;}
.numfield input{width:100%; padding:12px 14px; border-radius:12px; border:none; background:var(--paper); font-size:15px; font-variant-numeric:tabular-nums; font-family:inherit;}
.calc-row{display:flex; justify-content:space-between; align-items:center; width:100%; font-size:14px; padding:10px 0; color:var(--ink-soft); border-bottom:1px solid var(--line);}
.calc-row b{color:var(--ink); font-variant-numeric:tabular-nums; font-weight:800;}
.suggest-box{background:var(--accent-soft); border-radius:18px; padding:22px; margin-top:8px;}
.suggest-box .k{font-size:13px; font-weight:700; color:var(--accent-ink);}
.suggest-box .v{font-size:27px; font-weight:800; margin-top:6px; font-variant-numeric:tabular-nums;}
.suggest-box .f{font-size:12px; color:var(--ink-faint); margin-top:8px; line-height:1.6;}

/* ---------- mypage ---------- */
.profile-card{display:flex; align-items:center; gap:16px; background:var(--surface); border:none; box-shadow:var(--shadow-sm); border-radius:20px; padding:22px 24px; margin-bottom:26px;}
.profile-card .av{width:52px; height:52px; border-radius:50%; background:var(--accent-soft); color:var(--accent-ink); display:flex; align-items:center; justify-content:center; font-size:20px; font-weight:800;}
.profile-card .name{font-size:18px; font-weight:800;}
.profile-card .email{font-size:13px; color:var(--ink-faint); margin-top:3px;}
.fav-empty{padding:48px 20px; text-align:center; color:var(--ink-faint); font-size:14.5px; background:var(--surface); border:1px dashed var(--line); border-radius:18px;}
.favbtn{border:none; background:var(--paper); border-radius:12px; width:40px; height:40px; display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0;}
.favbtn.on{background:var(--danger-soft);}
.favbtn svg{width:16px; height:16px;}
.fav-panel{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:10px; padding:12px 14px; background:var(--paper); border-radius:12px; width:100%;}
.fav-stars{font-size:18px; letter-spacing:2px; color:var(--ink-faint); cursor:pointer; flex-shrink:0;}
.fav-star{cursor:pointer;}
.fav-star.on{color:#F5A623;}
.fav-category{flex:1 1 160px; min-width:120px; border:1px solid var(--line); border-radius:8px; padding:7px 10px; font-size:12.5px; font-family:inherit;}
.fav-memo{flex:2 1 220px; min-width:180px; min-height:34px; max-height:80px; border:1px solid var(--line); border-radius:8px; padding:7px 10px; font-size:12.5px; font-family:inherit; resize:vertical;}
.fav-date-label{font-size:12px; color:var(--ink-faint); display:flex; align-items:center; gap:6px; flex-shrink:0;}
.fav-date-label input{border:1px solid var(--line); border-radius:8px; padding:5px 8px; font-size:12px; font-family:inherit;}
.fav-save-ok{font-size:12px; color:var(--safe); font-weight:700;}

/* ---------- detail 2-col + sidebar calculator ---------- */
.detail-layout{display:grid; grid-template-columns:1fr 300px; gap:24px; align-items:start;}
@media (max-width:820px){ .detail-layout{grid-template-columns:1fr;} }
.side-calc{position:sticky; top:78px; background:var(--surface); border:none; box-shadow:var(--shadow-sm); border-radius:20px; padding:22px;}
.side-calc h3{font-size:15px; font-weight:800; margin:0 0 4px;}
.side-calc .sub{font-size:12px; color:var(--ink-faint); margin:0 0 16px; line-height:1.5;}
.side-calc .bidrow{display:flex; justify-content:space-between; align-items:baseline; font-size:12.5px; font-weight:700; color:var(--ink-soft); margin-bottom:7px;}
.side-calc .bidrow b{font-size:15px; color:var(--ink); font-variant-numeric:tabular-nums;}
.side-calc input[type=range]{width:100%; accent-color:var(--accent); margin-bottom:16px;}
.side-calc .mini-result{background:var(--accent-soft); border-radius:16px; padding:15px 16px; margin-top:4px;}
.side-calc .mini-result .k{font-size:11.5px; font-weight:700; color:var(--accent-ink);}
.side-calc .mini-result .v{font-size:23px; font-weight:800; margin-top:3px; font-variant-numeric:tabular-nums;}
.side-calc .miniline{display:flex; justify-content:space-between; font-size:12.5px; color:var(--ink-soft); padding:6px 0; border-bottom:1px solid var(--line);}
.side-calc .miniline b{color:var(--ink); font-variant-numeric:tabular-nums; font-weight:700;}
.side-calc .fulllink{display:block; text-align:center; margin-top:14px; font-size:12.5px; font-weight:700; color:var(--accent-ink);}
.side-calc .mini-modeseg{display:flex; gap:5px; margin:14px 0 12px;}
.side-calc .mini-modeseg button{flex:1; padding:8px 4px; border-radius:9px; border:1.5px solid var(--line); background:var(--surface); color:var(--ink-soft); font-size:12px; font-weight:700; cursor:pointer; font-family:inherit;}
.side-calc .mini-modeseg button.on{background:var(--accent); border-color:var(--accent); color:#fff;}
.side-calc .mini-numfield{margin-bottom:10px;}
.side-calc .mini-numfield label{display:block; font-size:11.5px; font-weight:700; color:var(--ink-soft); margin-bottom:5px;}
.side-calc .mini-numfield input{width:100%; padding:9px 11px; border-radius:10px; border:none; background:var(--paper); font-size:13.5px; font-variant-numeric:tabular-nums; font-family:inherit; color:var(--ink);}
.side-calc .mini-examples{margin-bottom:10px; max-height:130px; overflow-y:auto;}
.side-calc .mini-examples .ex{display:flex; justify-content:space-between; gap:8px; font-size:11px; color:var(--ink-soft); padding:5px 0; border-bottom:1px solid var(--line);}
.side-calc .mini-examples .ex b{color:var(--ink); font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap;}

.wrap{max-width:1060px; margin:0 auto; padding:36px 20px 96px;}
.pagehead{margin-bottom:30px;}
.pagehead h1{font-size:30px; font-weight:800; letter-spacing:-0.02em; margin:0 0 8px;}
.pagehead p{font-size:14.5px; color:var(--ink-faint); margin:0;}

.state{padding:40px; text-align:center; color:var(--ink-faint); font-size:14px;}
.btn-primary{display:inline-block; padding:12px 22px; border-radius:12px; background:var(--accent); color:#fff; font-weight:800; font-size:13.5px; text-decoration:none; border:none; cursor:pointer; font-family:inherit;}
.btn-primary:hover{background:var(--accent-ink);}
.btn-ghost{display:inline-block; padding:10px 18px; border-radius:12px; background:var(--paper); color:var(--ink-soft); font-weight:700; font-size:13px; text-decoration:none; border:none; cursor:pointer; font-family:inherit;}
.btn-ghost:hover{background:var(--line);}

/* 로그인 유도 모달(loginGate.js 공용) — 클릭만으로 바로 로그인 페이지로 넘기지 않고, 그 기능이
   뭔지 설명하면서 로그인을 권유한다(map.html 레이어칩, stats.html 필터 적용 등에서 공용으로 사용). */
.lg-backdrop{display:none; position:fixed; inset:0; background:rgba(15,20,30,.5); z-index:500; align-items:center; justify-content:center; padding:16px;}
.lg-backdrop.show{display:flex;}
.lg-modal{background:var(--surface); border-radius:22px; box-shadow:0 20px 60px rgba(15,20,30,.35); padding:30px 26px 26px; max-width:360px; width:100%; text-align:center; position:relative;}
.lg-modal .lg-close{position:absolute; top:14px; right:14px; width:28px; height:28px; border-radius:50%; border:none; background:var(--paper); color:var(--ink-faint); font-size:14px; cursor:pointer; line-height:1;}
.lg-modal .lg-icon{width:48px; height:48px; border-radius:14px; background:var(--accent-soft); color:var(--accent-ink); display:flex; align-items:center; justify-content:center; font-size:22px; margin:0 auto 14px;}
.lg-modal h3{font-size:16.5px; margin:0 0 6px; font-weight:800;}
.lg-modal .lg-sub{font-size:12.5px; color:var(--ink-faint); margin:0 0 16px;}
.lg-modal .lg-benefits{list-style:none; padding:0; margin:0 0 20px; display:flex; flex-direction:column; gap:8px; text-align:left;}
.lg-modal .lg-benefits li{font-size:12.5px; color:var(--ink-soft); display:flex; align-items:center; gap:8px; background:var(--paper); border-radius:10px; padding:9px 12px;}
.lg-modal .lg-benefits li b{color:var(--accent-ink);}
.lg-modal .lg-cta{display:block; width:100%; padding:13px; border-radius:12px; background:var(--accent); color:#fff; font-weight:800; font-size:14px; border:none; cursor:pointer; text-decoration:none; box-sizing:border-box;}
.lg-modal .lg-cta:hover{background:var(--accent-ink);}
.lg-modal .lg-links{display:flex; justify-content:center; gap:14px; margin-top:12px;}
.lg-modal .lg-links a, .lg-modal .lg-links button{font-size:12px; color:var(--ink-faint); text-decoration:none; background:none; border:none; cursor:pointer; font-family:inherit; padding:0;}
.lg-modal .lg-links a{color:var(--accent-ink); font-weight:700;}

.list{display:flex; flex-direction:column; gap:10px;}

.pager{display:flex; align-items:center; justify-content:center; gap:16px; padding:28px 0 10px;}
.pager-btn{background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow-sm); border-radius:10px; padding:9px 18px; font-size:13px; font-weight:800; color:var(--ink); cursor:pointer; font-family:inherit;}
.pager-btn:disabled{opacity:.35; cursor:default;}
.pager-info{font-size:12.5px; font-weight:700; color:var(--ink-faint);}

/* ---------- block grid cards (테두리 대신 옅은 그림자로 뜬 느낌, 라운드 더 크게) ---------- */
.agrid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
@media (max-width:860px){ .agrid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .agrid{grid-template-columns:1fr;} }
.acard{display:block; background:var(--surface); border:none; box-shadow:var(--shadow-sm); border-radius:20px; overflow:hidden; transition:box-shadow .2s, transform .2s;}
.acard:hover{box-shadow:var(--shadow-lg); transform:translateY(-5px);}
.a-thumb{position:relative; height:128px; background:linear-gradient(135deg,var(--accent-soft),var(--paper)); display:flex; align-items:center; justify-content:center; overflow:hidden;}
.a-thumb img{width:100%; height:100%; object-fit:cover;}
.a-thumb-dong{font-size:17px; font-weight:800; color:var(--accent-ink); opacity:.75;}
.a-heart{position:absolute; top:10px; right:10px; width:28px; height:28px; border-radius:50%; background:var(--surface); box-shadow:0 1px 4px rgba(0,0,0,.15); color:var(--ink-faint); display:flex; align-items:center; justify-content:center; font-size:14px;}
/* 새 탭에서 열기(비교용) — 썸네일 있는 카드는 하트 왼쪽에, 매각결과 카드(rcard, 썸네일 없음)는 카드 우상단에 */
.a-newtab{position:absolute; top:10px; right:10px; width:26px; height:26px; border-radius:50%; background:var(--surface); box-shadow:0 1px 4px rgba(0,0,0,.15); color:var(--ink-faint); border:none; display:flex; align-items:center; justify-content:center; font-size:13px; cursor:pointer; padding:0; z-index:1;}
.a-newtab:hover{color:var(--accent-ink);}
.a-thumb .a-newtab{right:44px;}
.rcard{position:relative;}
.a-body{padding:16px 18px 18px;}
.a-badges{display:flex; gap:6px; flex-wrap:wrap;}
.a-addr{font-size:15px; font-weight:800; margin-top:10px; line-height:1.4; letter-spacing:-0.01em; min-height:2.1em; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.a-sub{font-size:12px; color:var(--ink-faint); margin-top:6px; font-weight:500;}
.a-price-row{display:flex; align-items:baseline; gap:7px; margin-top:10px;}
.a-price-row .a-off{font-size:15px; font-weight:800; color:var(--danger); font-variant-numeric:tabular-nums;}
.a-price-row .a-val{font-size:16px; font-weight:800; color:var(--ink); font-variant-numeric:tabular-nums;}
.a-price-row .a-orig{font-size:12px; color:var(--ink-faint); text-decoration:line-through; font-variant-numeric:tabular-nums;}
.a-foot{display:flex; align-items:center; gap:8px; margin-top:14px; padding-top:12px; border-top:1px solid var(--line); font-size:12px; color:var(--ink-faint); font-weight:600;}
.a-dday{font-weight:800; color:var(--danger);}
.next-sale{font-weight:800; color:var(--accent-ink);}
.a-views{margin-left:auto;}

/* ---------- calendar + court/region filter (테두리선 대신 그림자+여백으로 구획, 폰트 확대) ---------- */
.cf-panel{display:grid; grid-template-columns:340px 1fr; gap:0; background:var(--surface); border:none; box-shadow:var(--shadow-sm); border-radius:28px; overflow:hidden; margin-bottom:28px;}
@media (max-width:760px){ .cf-panel{grid-template-columns:1fr;} }
.cf-cal{padding:28px; position:relative;}
.cf-cal:after{content:""; position:absolute; top:28px; bottom:28px; right:0; width:1px; background:var(--line);}
@media (max-width:760px){ .cf-cal:after{display:none;} }
.cf-cal-head{display:flex; align-items:center; justify-content:center; gap:18px; margin-bottom:18px;}
.cf-cal-head button{width:30px; height:30px; border-radius:9px; border:none; background:var(--paper); cursor:pointer; font-size:13px; color:var(--ink-soft);}
.cf-cal-head .ym{font-size:17px; font-weight:800;}
.cf-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:4px; text-align:center;}
.cf-grid .dow{font-size:11.5px; color:var(--ink-faint); font-weight:700; padding-bottom:8px;}
.cf-day{border-radius:10px; padding:6px 2px 7px; cursor:pointer; min-height:46px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;}
.cf-day.empty{cursor:default;}
.cf-day .n{font-size:13.5px; font-weight:700; color:var(--ink); width:26px; height:26px; line-height:26px; border-radius:50%; transition:background .15s, color .15s, box-shadow .15s;}
.cf-day .c{font-size:9.5px; color:var(--ink-faint); font-weight:700; margin-top:1px;}
.cf-day.today .n{box-shadow:inset 0 0 0 1.5px var(--accent); color:var(--accent-ink);}
.cf-day.active .n{background:var(--accent-soft); color:var(--accent-ink);}
.cf-day.active .c{color:var(--accent-ink);}
.cf-day:hover:not(.empty):not(.active) .n{background:var(--paper);}

.cf-side{padding:28px;}
.cf-side-top{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:18px;}
.cf-side-top .date{font-size:17px; font-weight:800;}
.range-reset-btn{font-size:12.5px; color:var(--accent-ink); font-weight:800; cursor:pointer; border:none; background:none; padding:0; font-family:inherit;}
.cf-tabbtn{display:flex; gap:4px; background:var(--paper); border-radius:10px; padding:3px;}
.cf-tabbtn button{border:none; background:none; font-size:12.5px; font-weight:700; color:var(--ink-faint); padding:8px 14px; border-radius:8px; cursor:pointer;}
.cf-tabbtn button.on{background:var(--surface); color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.08);}
.cf-chip-grid{display:flex; flex-wrap:wrap; gap:9px;}
.cf-chip{font-size:13.5px; font-weight:700; color:var(--ink-soft); background:var(--paper); border:none; border-radius:11px; padding:10px 14px; cursor:pointer;}
.cf-chip.on{background:var(--accent-soft); color:var(--accent-ink);}
.cf-chip .cnt{color:var(--ink-faint); font-weight:600;}
.cf-chip.on .cnt{color:var(--accent-ink);}
.cf-empty-note{font-size:12.5px; color:var(--ink-faint); margin-top:18px; line-height:1.65;}

/* ---------- 페이지 탭 전환(날짜별 경매 / 예정물건 / 예정(신건)) — 날짜패널과 필터패널 사이 ---------- */
.pagemode-tabs{display:flex; flex-wrap:wrap; gap:6px; background:var(--paper); border-radius:999px; padding:6px; margin-bottom:28px; max-width:560px;}
.pagemode-tab{flex:1 1 auto; min-width:130px; display:flex; align-items:center; justify-content:center; gap:7px; padding:13px 16px; border-radius:999px; border:none; background:none; font-size:14px; font-weight:800; color:var(--ink-faint); cursor:pointer; font-family:inherit; white-space:nowrap; transition:background .15s, color .15s, box-shadow .15s;}
.pagemode-tab .ico{font-size:15px;}
.pagemode-tab.on{background:var(--surface); color:var(--accent-ink); box-shadow:var(--shadow-sm);}
@media (max-width:680px){ .pagemode-tabs{max-width:none;} }
@media (max-width:520px){ .pagemode-tab{font-size:12.5px; padding:12px 8px; min-width:0;} }

/* ---------- 경매검색 필터 패널(fp-*) — 격자 테두리 걷어내고 여백/폰트로 구획 ---------- */
.fp-panel{background:var(--surface); border:none; box-shadow:var(--shadow-sm); border-radius:28px; padding:30px; margin-bottom:28px;}
.fp-head h2{font-size:20px; font-weight:800; display:flex; align-items:center; gap:8px; margin:0 0 6px;}
.fp-head p{font-size:13.5px; color:var(--ink-faint); margin:0 0 26px;}
.fp-body{display:grid; grid-template-columns:1fr 240px; gap:28px;}
.fp-body.solo{grid-template-columns:1fr;}
@media (max-width:820px){ .fp-body{grid-template-columns:1fr;} }

/* 요약 줄(항상 보임) + 상세필터(기본 접힘) — 4단 그리드를 한번에 다 보여주지 않고 필요할 때만 펼침 */
.fp-summary{display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;}
.fp-summary-left{display:flex; align-items:center; gap:14px; flex-wrap:wrap;}
.fp-count{font-size:22px; font-weight:800; color:var(--ink); letter-spacing:-0.01em; font-variant-numeric:tabular-nums;}
.fp-search{display:flex; align-items:center; gap:9px; background:var(--paper); border-radius:12px; padding:0 14px; flex:1; min-width:200px; max-width:360px; transition:box-shadow .15s;}
.fp-search:focus-within{box-shadow:0 0 0 2px var(--accent);}
.fp-search-ic{font-size:16px; color:var(--ink-faint); flex-shrink:0; transform:scaleX(-1);}
.fp-search input{flex:1; min-width:0; border:none; background:none; padding:12px 0; font-size:14px; font-family:inherit; color:var(--ink); outline:none;}
.fp-search input::placeholder{color:var(--ink-faint);}
.fp-sort{display:flex; align-items:center; gap:7px; background:var(--paper); border-radius:12px; padding:0 12px; flex-shrink:0;}
.fp-sort-ic{font-size:13px; color:var(--ink-faint);}
.fp-sort select{border:none; background:none; padding:11px 0; font-size:13.5px; font-weight:700; font-family:inherit; color:var(--ink); outline:none; cursor:pointer;}
.fp-detailtoggle{display:inline-flex; align-items:center; gap:7px; font-size:13.5px; font-weight:800; color:var(--ink-soft); background:var(--paper); border:none; padding:11px 16px; border-radius:12px; cursor:pointer; font-family:inherit; flex-shrink:0;}
.fp-detailtoggle .chev{transition:transform .18s ease; color:var(--ink-faint); font-size:11px;}
.fp-detailtoggle.open{background:var(--accent-soft); color:var(--accent-ink);}
.fp-detailtoggle.open .chev{transform:rotate(180deg);}
.fp-detail{max-height:0; overflow:hidden; opacity:0; transition:max-height .28s ease, opacity .2s ease, margin-top .28s ease;}
.fp-detail.open{max-height:900px; opacity:1; margin-top:26px;}

.fp-row4{display:grid; grid-template-columns:1fr 3fr; gap:24px; border:none; border-radius:0; overflow:visible;}
/* 지역·법원(1열, 시/도 17개라 목록이 길다)을 나머지 3열(용도/유찰횟수/가격대)+특수조건과
   같은 그리드 행에 두면 특수조건이 지역·법원의 긴 높이에 맞춰 한참 아래로 밀려버린다(실사용자
   스크린샷으로 발견, 2026-08-09) — 지역·법원을 별도 열로 완전히 분리하고, 나머지는 중첩 그리드
   (fp-row4-sub)로 묶어서 지역·법원의 높이와 무관하게 배치한다. 특수조건(포함/제외)은 그 중첩
   그리드 안에서 용도+유찰횟수 아래 두 번째 행에 배치(가격대 열 아래는 비워둠, 사용자 제공
   와이어프레임 기준). */
/* align-self:start 필수 — 없으면 기본 stretch 때문에 이 서브그리드 박스 자체가 지역·법원 높이만큼
   늘어나고, 그 안의 auto 행들도 늘어난 공간을 나눠가지면서 용도/유찰횟수와 특수조건 사이에 빈
   공간이 생긴다(실사용자 스크린샷으로 발견, 2026-08-09). start로 고정하면 서브그리드가 자기
   내용물 높이만큼만 차지하고, 남는 공간은 그냥 지역·법원 옆 빈 칸으로 아래에 남는다. */
.fp-row4-sub{display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:auto; gap:24px; align-self:start;}
.fp-col-special{grid-column:1 / span 2; grid-row:2;}
@media (max-width:680px){
  .fp-row4{grid-template-columns:1fr; gap:22px 16px;}
  .fp-row4-sub{grid-template-columns:1fr; gap:22px 16px;}
  .fp-col-special{grid-column:1; grid-row:auto;}
}
.fp-row4.fp-row3{grid-template-columns:repeat(3,1fr);}
@media (max-width:680px){ .fp-row4.fp-row3{grid-template-columns:1fr;} }
.fp-row4.fp-row2col{grid-template-columns:200px 1fr;}
@media (max-width:680px){ .fp-row4.fp-row2col{grid-template-columns:1fr;} }
.fp-courtchips{max-height:220px; overflow-y:auto; padding-right:4px;}
.fp-usage-block{margin-top:24px;}
.fp-usage-sub{margin-top:16px;}
.fp-col{border:none; padding:0; margin:0;}
.fp-col-head{font-size:13px; font-weight:800; color:var(--ink-faint); margin-bottom:12px; text-transform:uppercase; letter-spacing:.03em;}
.fp-subtab{display:flex; gap:4px; background:var(--paper); border-radius:10px; padding:3px; margin-bottom:12px;}
.fp-subtab button{flex:1; border:none; background:none; font-size:12.5px; font-weight:700; color:var(--ink-faint); padding:8px 0; border-radius:8px; cursor:pointer; font-family:inherit;}
.fp-subtab button.on{background:var(--surface); color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.08);}
.fp-list{display:flex; flex-direction:column; gap:2px; max-height:230px; overflow-y:auto;}
/* 칩 한 줄(다중선택) 스타일 — 용도(2026-08-09, 카테고리 3개로 줄어 세로 아코디언 대신 도입) /
   특수조건 공용 */
.fp-list-chips{max-height:none; flex-direction:row; flex-wrap:wrap; gap:8px;}
.fp-list-chips .fp-opt{flex:0 0 auto; border:1px solid var(--line); border-radius:999px;}
.fp-opt{font-size:14.5px; padding:10px 10px; border-radius:10px; cursor:pointer; color:var(--ink-soft); display:flex; justify-content:space-between; gap:6px; font-weight:600;}
.fp-opt:hover{background:var(--paper);}
.fp-opt.on{color:var(--accent-ink); font-weight:800; background:var(--accent-soft);}
.fp-opt .cnt{color:var(--ink-faint); font-weight:500; font-size:12.5px; flex-shrink:0;}
.fp-opt.on .cnt{color:var(--accent-ink);}
.fp-opt .go{color:var(--ink-faint); font-size:11px; flex-shrink:0;}
.fp-crumb{font-size:12.5px; color:var(--accent-ink); font-weight:800; cursor:pointer; margin-bottom:10px; display:flex; align-items:center; gap:3px;}

/* 드롭다운(세부타입/특수조건 포함·제외, 2026-08-09) — 아코디언처럼 목록을 밀어내지 않고 버튼 아래
   떠서 나타난다. 한 번에 하나만 열림(openDD), 바깥 클릭시 닫힘(list.html 전역 클릭 리스너). */
.fp-dd-wrap{position:relative;}
.fp-dd-btn{width:100%; text-align:left; background:var(--surface); border:1px solid var(--line); border-radius:10px;
  padding:10px 12px; font-size:13.5px; font-weight:700; color:var(--ink-soft); cursor:pointer; font-family:inherit;
  display:flex; justify-content:space-between; align-items:center; gap:6px;}
.fp-dd-btn:hover{border-color:var(--accent);}
.fp-dd-btn.open{border-color:var(--accent); color:var(--accent-ink);}
.fp-dd-btn .cnt{color:var(--ink-faint); font-weight:500; font-size:12.5px;}
.fp-dd-btn .chev{font-size:11px; color:var(--ink-faint); transition:transform .15s;}
.fp-dd-btn.open .chev{transform:rotate(180deg);}
/* max-height 380px: 특수조건 9개 항목이 스크롤 없이 한 번에 다 보이도록(실사용자 스크린샷으로
   "화면이 다 안 나온다" 확인, 2026-08-09) — 세부타입처럼 항목이 더 많아지면 그때만 내부 스크롤. */
.fp-dd-panel{display:none; position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:30;
  background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:10px;
  box-shadow:var(--shadow-lg); max-height:380px; overflow-y:auto;}
.fp-dd-panel.show{display:block;}
.fp-dd-group-head{font-size:11px; font-weight:800; color:var(--ink-faint); text-transform:uppercase;
  letter-spacing:.03em; margin:10px 4px 4px;}
.fp-dd-group-head:first-child{margin-top:2px;}
.fp-dd-check{display:flex; align-items:center; gap:8px; padding:7px 6px; border-radius:8px; cursor:pointer;
  font-size:13.5px; color:var(--ink-soft); font-weight:600;}
.fp-dd-check:hover{background:var(--paper);}
.fp-dd-check input{margin:0; cursor:pointer;}
.fp-dd-check .cnt{margin-left:auto; color:var(--ink-faint); font-weight:500; font-size:12px;}
.fp-dd-empty{font-size:12.5px; color:var(--ink-faint); padding:10px 6px;}

/* 지역 필터 — 시/도 행(라벨+펼침버튼) 아래에 구/시/군 목록이 딸려있는 구조 */
.fp-list-loc{max-height:none;}
.fp-opt-sido{padding:0; align-items:stretch;}
.fp-opt-sido .fp-opt-label{padding:10px 10px; flex:1; border-radius:10px;}
.fp-opt-sido .fp-opt-label:hover{background:var(--paper);}
.fp-opt-sido .fp-opt-chev{padding:10px 10px; color:var(--ink-faint); font-size:11px; cursor:pointer; flex-shrink:0; transition:transform .15s;}
.fp-opt-sido .fp-opt-chev.open{transform:rotate(180deg);}
.fp-sublist{display:flex; flex-direction:column; gap:1px; padding:2px 0 6px 14px;}
.fp-subopt{font-size:13px; padding:8px 10px; border-radius:9px; cursor:pointer; color:var(--ink-faint); display:flex; justify-content:space-between; gap:6px; font-weight:600;}
.fp-subopt:hover{background:var(--paper);}
.fp-subopt.on{color:var(--accent-ink); font-weight:800; background:var(--accent-soft);}
.fp-subopt .cnt{color:var(--ink-faint); font-weight:500; font-size:12px;}
.fp-subopt.on .cnt{color:var(--accent-ink);}

.fp-row2{display:flex; gap:10px; border:none; margin-top:26px;}
@media (max-width:680px){ .fp-row2{flex-direction:column;} }
.fp-acc-btn{flex:1; background:var(--paper); border:none; border-radius:12px; padding:14px 16px; font-size:13.5px; font-weight:800; color:var(--ink-soft); cursor:pointer; display:flex; align-items:center; justify-content:space-between; font-family:inherit;}
.fp-acc-btn.on{background:var(--accent-soft); color:var(--accent-ink);}
.fp-acc-btn .chev{transition:transform .15s; color:var(--ink-faint); font-size:11px;}
.fp-acc-btn.on .chev{transform:rotate(180deg);}
.fp-acc-body{border:none; background:var(--paper); border-radius:16px; padding:22px; margin-top:10px; display:grid; grid-template-columns:1fr 1fr; gap:26px;}
.fp-acc-body.single{grid-template-columns:1fr; max-width:420px;}
@media (max-width:680px){ .fp-acc-body{grid-template-columns:1fr;} }
.fp-range-block .rb-head{display:flex; justify-content:space-between; align-items:baseline; font-size:12px; color:var(--ink-soft); font-weight:700; margin-bottom:10px;}
.fp-range-block .rb-head button{border:none; background:none; color:var(--ink-faint); font-size:11px; font-weight:600; cursor:pointer; font-family:inherit;}
.fp-range-inputs{display:flex; align-items:center; gap:8px; margin-bottom:12px;}
.fp-range-inputs input{width:100%; padding:9px 11px; border-radius:10px; border:none; background:var(--paper); font-size:13px; font-family:inherit; text-align:right; color:var(--ink);}
.fp-range-inputs span{color:var(--ink-faint); font-size:12px;}
.fp-dualrange{position:relative; height:26px;}
.fp-dualrange input[type=range]{position:absolute; width:100%; top:9px; margin:0; -webkit-appearance:none; appearance:none; background:none; pointer-events:none;}
.fp-dualrange input[type=range]::-webkit-slider-thumb{pointer-events:auto; -webkit-appearance:none; width:16px; height:16px; border-radius:50%; background:var(--accent); cursor:pointer; border:2px solid var(--surface); box-shadow:0 1px 3px rgba(0,0,0,.25);}
.fp-dualrange input[type=range]::-moz-range-thumb{pointer-events:auto; width:16px; height:16px; border-radius:50%; background:var(--accent); cursor:pointer; border:2px solid var(--surface);}
.fp-dualrange input[type=range]::-webkit-slider-runnable-track{background:none;}
.fp-dualrange .track{position:absolute; top:12px; left:0; right:0; height:4px; border-radius:2px; background:var(--line);}
.fp-dualrange .fill{position:absolute; top:12px; height:4px; border-radius:2px; background:var(--accent);}
.fp-scale{display:flex; justify-content:space-between; font-size:10.5px; color:var(--ink-faint); margin-top:8px;}
.fp-range-note{font-size:11px; color:var(--ink-faint); margin-top:2px; margin-bottom:14px; line-height:1.6;}

.fp-chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; min-height:0;}
.fp-fchip{display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; color:var(--accent-ink); background:var(--accent-soft); padding:7px 8px 7px 12px; border-radius:999px;}
.fp-fchip button{border:none; background:none; color:var(--accent-ink); cursor:pointer; font-size:14px; line-height:1; padding:2px; opacity:.7;}
.fp-fchip button:hover{opacity:1;}

.fp-actions{display:flex; gap:8px; margin-top:24px; justify-content:flex-end; align-items:center;}
.fp-actions button{padding:13px 20px; border-radius:14px; font-size:14px; font-weight:800; cursor:pointer; font-family:inherit; border:none; background:var(--paper); color:var(--ink-soft);}
.fp-actions button.primary{background:var(--ink); color:#fff;}
@media (prefers-color-scheme: dark){ .fp-actions button.primary{background:var(--accent);} }
:root[data-theme="dark"] .fp-actions button.primary{background:var(--accent);}

.fp-side{background:var(--paper); border-radius:18px; padding:20px; align-self:start;}
.fp-side h3{font-size:14px; font-weight:800; margin:0 0 5px; display:flex; align-items:center; gap:6px;}
.fp-side p{font-size:12px; color:var(--ink-faint); margin:0 0 16px; line-height:1.55;}
.fp-preset{display:flex; align-items:center; justify-content:space-between; gap:6px; background:var(--surface); border:none; box-shadow:0 1px 4px rgba(15,20,30,.05); border-radius:12px; padding:11px 13px; font-size:12.5px; color:var(--ink-faint); margin-bottom:8px;}
.fp-preset.filled{color:var(--ink); cursor:pointer; font-weight:700;}
.fp-preset .lbl{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1;}
.fp-preset .new{color:var(--danger); font-weight:800; font-size:10px; flex-shrink:0;}
.fp-preset .del{color:var(--ink-faint); cursor:pointer; font-size:13px; flex-shrink:0; padding:2px;}
.fp-preset .del:hover{color:var(--danger);}
.fp-savebtn{width:100%; padding:13px; border-radius:12px; background:var(--ink); color:#fff; border:none; font-size:13px; font-weight:800; cursor:pointer; font-family:inherit; margin-top:4px;}
.fp-savebtn:disabled{opacity:.5; cursor:default;}
@media (prefers-color-scheme: dark){ .fp-savebtn{background:var(--accent);} }
:root[data-theme="dark"] .fp-savebtn{background:var(--accent);}
.fp-side .loginNote{font-size:12.5px; color:var(--ink-soft); background:var(--surface); border:none; border-radius:12px; padding:14px; line-height:1.6;}
.fp-side .loginNote a{color:var(--accent-ink); font-weight:700;}

/* ---------- 알림 (nav 벨 + mypage 목록) ---------- */
.navbell{position:relative; background:none; border:none; cursor:pointer; padding:6px; color:var(--ink-soft); display:inline-flex; align-items:center; font-family:inherit; text-decoration:none; font-size:16px;}
.navbell .dot{position:absolute; top:2px; right:2px; min-width:15px; height:15px; padding:0 3px; border-radius:999px; background:var(--danger); color:#fff; font-size:9.5px; font-weight:800; display:flex; align-items:center; justify-content:center; line-height:1;}
.notif-item{display:flex; gap:14px; padding:16px 18px; background:var(--surface); border:none; box-shadow:var(--shadow-sm); border-radius:20px; margin-bottom:9px;}
.notif-item.unread{box-shadow:0 0 0 2px var(--accent); background:var(--accent-soft);}
.notif-item .ic{width:38px; height:38px; border-radius:12px; background:var(--accent-soft); color:var(--accent-ink); display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0;}
.notif-item .body{flex:1; min-width:0;}
.notif-item .flabel{font-size:12px; font-weight:800; color:var(--accent-ink); margin-bottom:4px;}
.notif-item .summary{font-size:14px; color:var(--ink); font-weight:600; line-height:1.5;}
.notif-item .time{font-size:11.5px; color:var(--ink-faint); margin-top:5px;}
.notif-viewall{display:block; text-align:center; padding:14px; font-size:13px; font-weight:700; color:var(--accent-ink); text-decoration:none; background:var(--surface); box-shadow:var(--shadow-sm); border-radius:16px;}
.notif-viewall:hover{background:var(--accent-soft);}

/* ---------- 마이페이지 ---------- */
.mystat-row{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:36px;}
@media (max-width:600px){ .mystat-row{grid-template-columns:1fr;} }
.mystat{background:var(--surface); box-shadow:var(--shadow-sm); border-radius:18px; padding:18px 20px; text-decoration:none; color:inherit; display:block; transition:box-shadow .2s, transform .2s;}
.mystat:hover{box-shadow:var(--shadow-lg); transform:translateY(-2px);}
.mystat .n{font-size:24px; font-weight:800; color:var(--accent); font-variant-numeric:tabular-nums;}
.mystat .l{font-size:12.5px; color:var(--ink-faint); font-weight:700; margin-top:2px;}
.pagehead-row{display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:16px;}
.pagehead-row h1{font-size:22px; font-weight:800; margin:0;}
.pagehead-row p{font-size:13px; color:var(--ink-faint); margin:2px 0 0;}
.savedfilter-item{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 18px; background:var(--surface); box-shadow:var(--shadow-sm); border-radius:16px; margin-bottom:9px;}
.savedfilter-item .sf-label{font-size:14px; font-weight:800; color:var(--ink);}
.savedfilter-item .sf-date{font-size:11.5px; color:var(--ink-faint); margin-top:3px;}
.savedfilter-item .sf-actions{display:flex; gap:8px; flex-shrink:0; align-items:center;}
.savedfilter-item .sf-del{background:none; border:none; color:var(--ink-faint); cursor:pointer; font-size:13px; padding:6px;}
.settings-card{display:flex; flex-direction:column; gap:22px; background:var(--surface); box-shadow:var(--shadow-sm); border-radius:20px; padding:26px 24px; margin-bottom:36px;}
.settings-block h3{font-size:14.5px; font-weight:800; margin:0 0 12px;}
.settings-block .sub{font-size:12px; color:var(--ink-faint); margin:0 0 12px; line-height:1.6;}
.settings-block .field{margin-bottom:12px;}
.settings-block.danger{border-top:1px solid var(--line); padding-top:20px;}
.settings-block .formok{background:var(--safe-soft); color:var(--safe); font-size:12.5px; font-weight:700; padding:10px 12px; border-radius:10px; margin-bottom:14px; display:none;}
.settings-block .formok.show{display:block;}
.btn-danger{display:inline-block; padding:11px 18px; border-radius:12px; background:none; color:var(--danger); font-weight:800; font-size:13px; border:1px solid var(--danger-soft); cursor:pointer; font-family:inherit;}
.btn-danger:hover{background:var(--danger-soft);}

.card{display:flex; gap:16px; padding:18px; background:var(--surface); border:none; box-shadow:var(--shadow-sm); border-radius:20px;}
.thumb{width:76px; height:76px; border-radius:12px; flex-shrink:0; background:var(--paper); border:none; display:flex; align-items:center; justify-content:center; color:var(--ink-faint); font-size:10px; text-align:center; padding:4px;}
.cmain{flex:1; min-width:0;}
.ctop{display:flex; gap:6px; align-items:center; flex-wrap:wrap;}
.badge{font-size:12px; font-weight:800; padding:5px 10px; border-radius:8px;}
.badge.safe{background:var(--safe-soft); color:var(--safe);}
.badge.warn{background:var(--warn-soft); color:var(--warn);}
.badge.info{background:var(--accent-soft); color:var(--accent-ink);}
.caddr{font-size:15.5px; font-weight:700; margin-top:7px;}
.csub{font-size:12.5px; color:var(--ink-faint); margin-top:3px;}
.cprice{display:flex; align-items:baseline; gap:7px; margin-top:9px;}
.coff{font-size:15px; font-weight:800; color:var(--danger); font-variant-numeric:tabular-nums;}
.cval{font-size:15px; font-weight:800; font-variant-numeric:tabular-nums;}
.corig{font-size:12px; color:var(--ink-faint); text-decoration:line-through; font-variant-numeric:tabular-nums;}

/* CSS Grid item(.detail-layout의 1fr 트랙)는 기본적으로 min-width:auto라, 안쪽 어딘가에 줄바꿈 안 되는
   내용(white-space:nowrap 등)이 있으면 그 min-content 크기만큼 트랙 전체가 넓어져 옆 300px 칸(side-calc)이
   화면 밖으로 밀려나는 버그가 있었다(2026-08-06, "해상도가 달라짐" 리포트로 발견 — 문서 요약 박스를
   한 줄 고정으로 바꾸면서 표면화됨). min-width:0으로 그리드 트랙 폭에 맞춰 강제로 줄어들게 한다.
   */
.detail-card{background:var(--surface); border:none; box-shadow:var(--shadow-sm); border-radius:28px; padding:28px; min-width:0;}
.back{display:inline-flex; align-items:center; gap:4px; font-size:13.5px; font-weight:700; color:var(--ink-soft); margin-bottom:16px;}
.dtitle{font-size:22px; font-weight:800; letter-spacing:-0.01em;}
.dsub{font-size:13px; color:var(--ink-faint); margin-top:5px;}
.dphoto{margin-top:18px; height:200px; border-radius:16px; background:var(--paper); border:none; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; color:var(--ink-faint); text-align:center; padding:16px;}
.dphoto b{color:var(--ink-soft); font-size:13.5px;}
.dphoto span{font-size:12px; max-width:38ch;}
.dgallery{margin-top:18px;}
.dgallery .dg-main{position:relative; width:100%; height:320px; border-radius:16px; overflow:hidden; background:var(--paper);}
.dgallery .dg-main img{width:100%; height:100%; object-fit:cover; cursor:zoom-in;}
.dgallery .dg-rotate{position:absolute; right:10px; bottom:10px; background:rgba(25,31,40,.65); color:#fff; border:none; border-radius:999px; padding:7px 13px; font-size:12px; font-weight:700; cursor:pointer; font-family:inherit;}
.dgallery .dg-thumbs{display:flex; gap:8px; margin-top:9px;}
.dgallery .dg-thumbs img{width:64px; height:64px; border-radius:10px; object-fit:cover; cursor:pointer; opacity:.6; border:2px solid transparent;}
.dgallery .dg-thumbs img.on{opacity:1; border-color:var(--accent);}

.dhero{margin-top:24px; display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap;}
.dhero .label{font-size:14px; font-weight:800; color:var(--danger);}
.dhero .big{font-size:42px; font-weight:800; letter-spacing:-0.03em; margin-top:6px; line-height:1.2;}
.dhero .sub{font-size:13.5px; color:var(--ink-faint); margin-top:10px;}
.dhero .badges{display:flex; gap:6px; flex-wrap:wrap;}

/* 토스처럼 박스 없이 라벨-값을 여백·타이포로만 정리(회색박스 남발이 산만해 보인다는 피드백) */
.stat-grid{display:grid; grid-template-columns:repeat(2,1fr); row-gap:16px; column-gap:28px; margin-top:26px; padding-top:22px; border-top:1px solid var(--line);}
.stat{display:flex; justify-content:space-between; align-items:baseline; gap:10px;}
.stat .k{font-size:14px; color:var(--ink-soft); font-weight:600; flex-shrink:0;}
.stat .v{font-size:15px; font-weight:800; font-variant-numeric:tabular-nums; text-align:right;}
.stat .v.hl{color:var(--danger);}

.gap-note{display:flex; gap:11px; align-items:flex-start; background:var(--warn-soft); border-radius:16px; padding:16px 18px; margin-top:24px;}
.gap-note b{color:var(--ink);}
.gap-note p{margin:0; font-size:13px; color:var(--ink-soft); line-height:1.6;}

.footnote{margin-top:32px; padding:16px 18px; border-radius:20px; background:var(--surface); border:none; box-shadow:var(--shadow-sm); font-size:12.5px; color:var(--ink-faint); line-height:1.7;}

/* 등기부 권리분석 위젯(title-check.html 단독페이지 + detail.html 임베드 공용) — tc-row/tc-labelrow는
   입력행 정렬용 grid-template-columns를 공유하므로 두 값은 항상 같이 맞춰야 함(폭 변경 시 주의) */
.tc-intro{font-size:13.5px; color:var(--ink-soft); line-height:1.7; margin-bottom:20px;}
.tc-section{border:none; box-shadow:var(--shadow-sm); border-radius:20px; padding:20px; background:var(--surface); margin-bottom:18px;}
.tc-section h3{font-size:15px; font-weight:800; margin:0 0 14px;}
.tc-row{display:grid; grid-template-columns:70px 130px 120px 90px 1fr 1fr 130px 32px; gap:6px; align-items:center; margin-bottom:6px;}
.tc-row select, .tc-row input{width:100%; padding:8px 9px; border:none; background:var(--paper); border-radius:9px; font-size:12.5px; color:var(--ink); font-family:inherit;}
.tc-row .tc-rm{border:none; background:none; color:var(--ink-faint); cursor:pointer; font-size:16px; padding:0;}
.tc-addbtn{font-size:13px; font-weight:700; color:var(--accent-ink); background:var(--accent-soft); border:none; border-radius:10px; padding:9px 16px; cursor:pointer; margin-top:8px;}
.tc-labelrow{display:grid; grid-template-columns:70px 130px 120px 90px 1fr 1fr 130px 32px; gap:6px; font-size:11px; color:var(--ink-faint); margin-bottom:6px; padding:0 2px;}
.tc-inline{display:flex; gap:12px; align-items:center; flex-wrap:wrap;}
.tc-inline label{font-size:13px; color:var(--ink-soft); font-weight:600;}
.tc-inline input{padding:9px 12px; border:none; background:var(--paper); border-radius:10px; font-size:13.5px; width:160px; color:var(--ink); font-family:inherit;}
.tc-submit{width:100%; padding:15px; border:none; border-radius:16px; background:var(--accent); color:#fff; font-size:15px; font-weight:800; cursor:pointer; margin-top:8px; transition:background .15s;}
.tc-submit:hover{background:var(--accent-ink);}
.tc-result{margin-top:26px;}
.tc-malso{border-radius:14px; padding:15px 17px; background:var(--accent-soft); color:var(--accent-ink); font-size:13.5px; font-weight:700; margin-bottom:16px;}
.tc-malso.none{background:var(--danger-soft); color:var(--danger);}
.tc-etable{width:100%; border-collapse:collapse; font-size:13px;}
.tc-etable th, .tc-etable td{border-bottom:1px solid var(--line); padding:10px 7px; text-align:left; vertical-align:top;}
.tc-etable th{color:var(--ink-faint); font-weight:700; font-size:12px;}
.tc-status{display:inline-block; padding:3px 9px; border-radius:999px; font-size:11.5px; font-weight:800; white-space:nowrap;}
.tc-status.말소기준권리{background:var(--accent-soft); color:var(--accent-ink);}
.tc-status.소멸{background:var(--safe-soft); color:var(--safe);}
.tc-status.인수\(주의\){background:var(--danger-soft); color:var(--danger);}
.tc-status.소유권변동이력{background:var(--paper); color:var(--ink-faint);}
.tc-status.판정불가{background:var(--warn-soft); color:var(--warn);}
.tc-reason{color:var(--ink-soft); font-size:12px; margin-top:3px; line-height:1.5;}
.tc-risk{border-radius:14px; padding:14px 16px; margin-bottom:9px; font-size:13px; line-height:1.6;}
.tc-risk.high{background:var(--danger-soft); color:var(--danger);}
.tc-risk.medium{background:var(--warn-soft); color:var(--warn);}
.tc-risk.always{background:var(--paper); color:var(--ink-soft);}
.tc-risk .rt{font-weight:800; margin-bottom:3px;}
.tc-dist-sum{display:flex; gap:20px; flex-wrap:wrap; margin-bottom:14px;}
.tc-dist-sum div{font-size:13px;}
.tc-dist-sum b{display:block; font-size:17px; font-weight:800; color:var(--ink);}
.tc-disclaimer{font-size:12px; color:var(--ink-faint); line-height:1.6; margin-top:12px; padding-top:12px; border-top:1px dashed var(--line);}
.tc-embed-toggle{font-size:13px; font-weight:700; color:var(--accent-ink); background:none; border:none; cursor:pointer; padding:0; font-family:inherit;}
.tc-embed-body{display:none; margin-top:16px;}
.tc-embed-body.open{display:block;}

/* ---------- 매각결과 카드(rcard) — .acard 쉘(그림자/radius/hover)은 재사용하고 내부만 전용 구성 ---------- */
.rcard-body{padding:20px 22px;}
.rcard-price{display:flex; align-items:baseline; gap:9px; margin-top:12px; flex-wrap:wrap;}
.rcard-price .sold{font-size:20px; font-weight:800; color:var(--ink); font-variant-numeric:tabular-nums;}
.rcard-price .ratio{font-size:12.5px; font-weight:800; padding:4px 9px; border-radius:8px; background:var(--danger-soft); color:var(--danger);}
.rcard-price .ratio.low{background:var(--safe-soft); color:var(--safe);}
.rcard-price .base{font-size:12px; color:var(--ink-faint); text-decoration:line-through; font-variant-numeric:tabular-nums;}
.rcard-price .failed{font-size:17px; font-weight:800; color:var(--ink-faint);}

/* ---------- result-detail.html 문서 원문(펼침) ---------- */
.doc-block{border:none; box-shadow:var(--shadow-sm); border-radius:20px; padding:18px 20px; background:var(--surface); margin-bottom:14px;}
.doc-block summary{cursor:pointer; font-size:14px; font-weight:800; color:var(--accent-ink); list-style:none;}
.doc-block summary::-webkit-details-marker{display:none;}
.doc-block summary::before{content:'▸ '; display:inline-block;}
.doc-block[open] summary::before{content:'▾ ';}
.doc-text{white-space:pre-wrap; font-family:inherit; font-size:12.5px; line-height:1.7; color:var(--ink-soft); background:var(--paper); border-radius:14px; padding:16px 18px; margin:14px 0 0; max-height:480px; overflow-y:auto;}

/* ---------- 스크롤 리빌 (참고: toheotong.com — 섹션이 아래→위로 페이드인) ---------- */
.reveal{opacity:0; transform:translateY(28px); transition:opacity .7s cubic-bezier(.16,.8,.3,1), transform .7s cubic-bezier(.16,.8,.3,1);}
.reveal.visible{opacity:1; transform:translateY(0);}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1; transform:none; transition:none;}
}