@charset "UTF-8";
/* 바디렌즈 리디자인 — styles.css 뒤에 로드해 덮어씁니다. 색은 아래 변수만 바꾸면 됩니다. */
:root{--bg:#f2f2f3;--surface:#fff;--sunken:#e7e7ea;--ink:#1d1f20;--ink-2:#5d5d60;--hair:rgba(29,31,32,.1);--hair-2:rgba(29,31,32,.14);
--accent:#5980a6;--accent-600:#597ea3;--accent-700:#416180;--accent-800:#2c455d;--accent-100:#eef6ff;--accent-200:#d6ebff;--accent-300:#b5d9fd;
--viewer:#1d2d3d;--num:"Barlow Condensed","Pretendard","Noto Sans KR",sans-serif;--r:8px;--r-lg:14px}
body{background:var(--bg);color:var(--ink)}
:focus-visible,button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
::selection{background:#5980a64d}

/* 상단바 */
.topbar{border-bottom:1px solid var(--hair)}
.brand svg{stroke:var(--accent)}.brand{font-weight:700}
.top-divider{background:var(--hair-2)}
.disease-title h1{font-weight:700;letter-spacing:-.02em}.disease-title>span{color:var(--accent)}
.icon-button{width:auto;height:34px;padding:0 12px;border:1px solid var(--hair-2);border-radius:var(--r);background:var(--surface);color:var(--ink);font-size:13px;font-weight:500;white-space:nowrap}
.icon-button:hover{background:var(--accent-100);color:var(--ink)}
.top-actions{gap:6px}

/* 단계 탭 */
.stepper{gap:0;padding:0;border-bottom:1px solid var(--hair)}
.step{height:50px;justify-content:flex-start;padding:0 16px;gap:10px;border:0;border-bottom:2px solid transparent;border-radius:0;color:var(--ink-2);font-size:14px;font-weight:500}
.step>span{font-family:var(--num);font-size:15px;font-weight:600;letter-spacing:.04em;color:#98989b}
.step:hover{background:#e9e9ea}
.step.active{background:#e9e9ea;border-bottom-color:var(--accent);color:var(--ink);font-weight:700;box-shadow:none}
.step.active>span{color:var(--accent-700)}

/* 본문 영역: 뷰어는 둥근 카드, 설명은 배경 위에 */
.app-shell{grid-template-rows:60px 52px minmax(0,1fr) 36px;min-height:620px}
.consultation{background:transparent;border:0;box-shadow:none;overflow:visible;margin:12px 0 4px;column-gap:12px}
.viewer.selected-3d-view .scene-wrap{min-height:0}
.viewer-controls{min-height:60px}
.viewer{border-radius:var(--r-lg);background:radial-gradient(ellipse at 48% 40%,#2c455d 0,#1d2d3d 48%,#14202c 100%);color:#f2f2f3}
.viewer-top>span:first-child{color:#f2f2f3;font-size:13px;font-weight:500}
.model-tag{border-radius:6px;border-color:#f2f2f340;color:var(--accent-300);font-size:11px;letter-spacing:.02em}
.viewer.selected-3d-view #model-tag{color:var(--accent-300)}
.focus-options{padding:3px;border:0;border-radius:9px;background:#f2f2f31f;gap:0}
.focus-options button{height:34px;border:0;border-radius:6px;background:transparent;color:#f2f2f3;font-size:13px;font-weight:500}
.focus-options button.selected{background:var(--accent);color:#f2f2f3}
.orbit-buttons button{border-radius:8px}
.detail-panel{background:transparent;padding:6px 0 0 36px}
.step-content::-webkit-scrollbar-thumb{background:#d4d4d7}

/* 글자 */
.step-content h2{margin:6px 0 20px;font-size:30px;font-weight:700;line-height:1.25;letter-spacing:-.02em}
.eyebrow{font-family:var(--num);font-size:14px;font-weight:600;letter-spacing:.1em;color:var(--accent-700)}
.section-meta{margin:0;font-size:13px;color:var(--ink-2)}
.location-subtitle,.subtle-note,.stats-foot,.cost-meta,.cost-period,.treatment-copy,.modal-hint,.source-inline{color:var(--ink-2)}
.location-subtitle{font-size:15px}
.subtle-note{font-size:13px;line-height:1.7}.stats-foot{font-size:13px}.cost-meta{font-size:13px}.cost-period{font-size:13px}
.source-inline,button.source-inline{font-size:13px;color:var(--accent-700)}
.stats-foot a,.source-inline a{color:var(--accent-700)}
.anatomy-part{padding:16px 0;border-bottom:1px solid var(--hair)}
.anatomy-part strong{font-size:16px;font-weight:700}.anatomy-part small,.anatomy-part p{font-family:var(--num);font-size:13px;letter-spacing:.08em;color:var(--ink-2)}
.anatomy-parts{border-top:1px solid var(--hair)}
.anatomy-parts .part-swatch{background:var(--accent);box-shadow:none;border-radius:3px}.anatomy-parts .part-swatch.rectum{background:#94bce3}
.location-index,.location-index strong{color:var(--ink-2);font-family:var(--num);font-size:14px}

/* 선택 컨트롤 */
.state-option{border:1px solid var(--hair);border-radius:10px;background:var(--surface)}
.state-option:hover{background:var(--accent-100)}
.state-option.active{border-color:var(--accent);background:var(--accent-100)}
.state-num{border-radius:6px;background:var(--sunken);color:var(--ink-2);font-family:var(--num);font-size:14px;font-weight:600;width:28px;height:28px;flex-basis:28px}
.state-option.active .state-num{background:var(--accent);color:#f2f2f3}
.state-copy strong{font-size:15px;font-weight:700}.state-copy small,.state-copy span,.state-copy p{font-size:14px;color:var(--ink-2)}
.gender-filter,.treatment-tabs{padding:3px;border-radius:9px;background:var(--sunken)}
.gender-filter button,.treatment-tabs button{border-radius:6px;color:var(--ink);font-size:13px;font-weight:500;min-height:36px}
.gender-filter button.active,.treatment-tabs button.active{background:var(--accent);color:#f2f2f3;font-weight:500;box-shadow:none}
.filter-label{font-size:12px;color:var(--ink-2)}
.age-select{height:40px;border:1px solid var(--hair-2);border-radius:var(--r);background:var(--surface);color:var(--ink);font-size:14px}

/* 숫자 */
.number-line,.number-line strong,.stat-value>strong{font-family:var(--num);font-weight:600;color:var(--accent-800);letter-spacing:-.01em}
.unit{font-size:14px;color:var(--ink-2)}
.stat-value>p,.stat-value>small,.stat-value>span{font-size:14px;color:var(--ink-2)}
.stat-cases{border-color:var(--hair);font-size:14px;color:var(--ink-2)}
.stat-cases strong{font-family:var(--num);font-size:24px;font-weight:600;color:var(--ink)}
.stat-cases strong span,.stat-cases strong>small{font-family:var(--pretendard,inherit);font-size:13px;color:var(--ink-2)}
.cost-title{font-size:15px;font-weight:500;color:var(--ink)}
.cost-amount{color:var(--accent-800)}.cost-amount strong{font-family:var(--num);font-weight:600;letter-spacing:-.01em}
.cost-amount .approx,.cost-amount .won{color:var(--ink-2)}
.cost-components{border-color:var(--hair)}
.cost-components>div,.cost-components>li{border-color:var(--hair);font-size:14px;color:var(--ink)}
.cost-components strong{font-family:var(--num);font-size:18px;color:var(--ink)}
.cost-components small{color:var(--ink-2);font-size:13px}
.cost-edit{font-size:13px;color:var(--accent-700)}
.cost-mode-label{border-radius:5px;border-color:var(--accent-200);background:var(--accent-100);color:var(--accent-800)}

/* 치료 단계 */
.surgery-heading{font-size:15px;color:var(--ink)}.surgery-heading strong{font-size:15px;font-weight:700;color:var(--ink)}.surgery-heading span,.surgery-heading small{font-family:var(--num);font-size:13px;letter-spacing:.08em;color:var(--ink-2)}
.surgery-step{min-height:44px;border-radius:8px;color:var(--ink-2);font-size:14px}
.surgery-step>span:first-child,.surgery-step .step-no{border-color:var(--hair-2);color:var(--ink-2);font-family:var(--num);font-size:13px}
.surgery-step:hover{background:var(--accent-100)}
.surgery-step.done{color:var(--accent-700)}.surgery-step.done>span:first-child{border-color:#94bce3;background:var(--accent-200);color:var(--accent-700)}
.surgery-step.active{background:var(--accent-100);color:var(--ink);font-weight:700}
.surgery-step.active>span:first-child,.surgery-step.active .step-no{border-color:var(--accent);background:var(--accent);color:#f2f2f3}
.treatment-copy{font-size:15px;line-height:1.7;color:var(--ink)}
.play-button{height:42px;border-color:var(--accent);border-radius:var(--r);background:var(--accent);font-size:14px}.play-button:hover{background:var(--accent-600)}
.restart-button{border-radius:var(--r);font-size:14px}

/* 하단 이동 */
.panel-navigation{border-top:1px solid var(--hair);gap:12px}
.previous{width:40px;height:40px;border:1px solid var(--hair-2);border-radius:var(--r);color:var(--ink)}.previous:hover{background:var(--accent-100)}
.panel-navigation>span{font-family:var(--num);font-size:14px;letter-spacing:.08em;color:var(--ink-2)}
.next{min-height:42px;padding:0 16px;border-radius:var(--r);background:var(--accent);font-size:14px;font-weight:500}.next:hover{background:var(--accent-600)}
.footer{font-family:var(--num);font-size:12px;letter-spacing:.1em;color:var(--ink-2)}.footer button{font-size:12px;color:var(--ink-2)}

/* 대화상자 */
.dialog{border:0;border-radius:16px}
.dialog>header{border-bottom:1px solid var(--hair)}.dialog>header h2{font-weight:700}
.close-dialog{background:var(--sunken);color:var(--ink)}.close-dialog:hover{background:var(--accent-200)}
.dialog-body>p,.source-record p,.model-disclosure p,.dialog-body ul,.dialog-body ol,.source-parts,.notes-dialog .dialog-body{color:var(--ink-2)}
.source-record{border-bottom-color:var(--hair)}.source-record h3,.model-disclosure h3{color:var(--ink)}
.source-record a,.source-record small{color:var(--accent-700)}
.model-disclosure{border-radius:10px;background:var(--accent-100)}
.primary-button{border-radius:var(--r);background:var(--accent);border-color:var(--accent);color:#f2f2f3}.primary-button:hover{background:var(--accent-600)}
.secondary-button{border-radius:var(--r)}
.disease-option{border-radius:10px}

/* 모바일: 3D 위, 설명 아래, 이전/다음 바는 하단에 고정 */
@media(max-width:820px){
 .app-shell{grid-template-rows:56px 52px auto 36px;padding:0 16px}
 .consultation{margin:12px 0 0;row-gap:0}
 .viewer{height:320px;min-height:0;max-height:none}
 .viewer.selected-3d-view,.viewer.location-view,.viewer.overlay-view{height:auto;min-height:0}
 .viewer.selected-3d-view .scene-wrap,.viewer.location-view .scene-wrap{height:300px}
 .detail-panel{padding:20px 4px 0;min-height:0}
 .step-content h2{font-size:24px;margin-bottom:16px}
 .panel-navigation{position:sticky;bottom:0;z-index:5;margin:16px -16px 0;padding:10px 16px calc(14px + env(safe-area-inset-bottom));background:var(--bg)}
 .previous{width:44px;height:44px}.next{min-height:44px;padding:0 18px}
 .stepper{overflow-x:auto}.step{padding:0 8px;justify-content:center;flex-direction:column;gap:0;height:52px;font-size:12px}.step>span{display:block;font-size:13px}
 .surgery-step{min-height:44px}
}
@media(max-width:480px){
 .app-shell{padding:0 12px}
 .icon-button{width:auto;height:34px;padding:0 9px;font-size:12px}
 .top-actions{gap:4px}#fullscreen{display:none}
 .disease-title h1{font-size:17px}
 .brand span{display:none}
}