/* 🌟 기기 맞춤형 여백 변수 (기본 4px 반영) */
:root {
    --layout-top: 20px;
    --layout-bottom: 20px;
    --layout-side: 4px;
    --pad-top: max(52px, calc(env(safe-area-inset-top) + 18px));
    --chrome-top: max(64px, calc(env(safe-area-inset-top) + 30px));
    --home-control-top: max(54px, calc(env(safe-area-inset-top) + 20px));
    --pad-bottom: max(var(--layout-bottom), env(safe-area-inset-bottom));
    --pad-side: var(--layout-side);
    --brand-bg: #ffffff;
    --brand-primary: #007aff;
    --brand-ai: #5E5CE6;
    --brand-button-main: #000000;
    --brand-card-bg: #ffffff;
    --brand-card-border: rgba(0,0,0,.08);
    --brand-card-shadow: 0 4px 12px rgba(0,0,0,.03);
    --brand-logo-bg: #000000;
    --brand-header-bg: #ffffff;
    --brand-text-main: #000000;
    --brand-text-sub: #222222;
    --brand-text-muted: #888888;
    --font-scale: 1.08;
}

html.pt-android {
    --pad-top: max(14px, env(safe-area-inset-top));
    --chrome-top: max(18px, calc(env(safe-area-inset-top) + 6px));
    --home-control-top: max(12px, calc(env(safe-area-inset-top) + 8px));
    --pad-bottom: max(16px, env(safe-area-inset-bottom));
}

html.pt-android #s-lock {
    padding-top: calc(var(--pad-top) + 6px);
}

html.pt-android .home-brand {
    padding-top: 2px !important;
    padding-bottom: 12px !important;
}

* {
    margin:0; padding:0; box-sizing:border-box;
    -webkit-tap-highlight-color:transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}
input, textarea, select { -webkit-user-select: auto; user-select: auto; }

body { background:var(--brand-bg); min-height:100vh; display:flex; justify-content:center; align-items:flex-start; font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue',sans-serif; font-size:calc(15px * var(--font-scale)); padding:0; margin:0; }
.phone { width:100%; max-width:600px; height:100vh; background:var(--brand-bg); position:relative; display:flex; flex-direction:column; overflow-x:hidden; }

.screen { flex:1; overflow-y:auto; padding: var(--layout-top) var(--pad-side) var(--pad-bottom) var(--pad-side); display:none; }
.screen.active { display:block; }

#s-lock {
    position: fixed; inset: 0; z-index: 50000; background: var(--brand-bg);
    display: none; flex-direction: column; align-items: center; justify-content: flex-start;
    padding: calc(var(--pad-top) + 14px) 20px var(--pad-bottom);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.pin-panel { width:100%; max-width:min(360px, 92vw); margin-top:14px; display:none; flex-direction:column; gap:12px; }
.pin-panel.show { display:flex; }
.pin-title { text-align:center; font-size:calc(13px * var(--font-scale)); font-weight:800; color:var(--brand-text-main); }
.pin-dots { display:flex; justify-content:center; gap:10px; margin:4px 0 2px; }
.pin-dot { width:13px; height:13px; border-radius:50%; border:1.5px solid var(--brand-primary); background:transparent; }
.pin-dot.on { background:var(--brand-primary); }
.pin-pad { display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; }
.pin-key { border:none; border-radius:14px; height:clamp(48px, 7vh, 58px); background:rgba(255,255,255,0.72); color:var(--brand-text-main); font-size:20px; font-weight:800; box-shadow:0 2px 8px rgba(0,0,0,.05); }
.pin-key:active { transform:scale(.97); opacity:.75; }
.pin-help { text-align:center; font-size:calc(11px * var(--font-scale)); color:var(--brand-text-muted); font-weight:700; line-height:1.45; }
.pro-hero { text-align:center; padding:12px 8px 18px; }
.pro-price-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:14px 0; }
.pro-plan { border:1px solid var(--brand-card-border); background:var(--brand-card-bg); border-radius:14px; padding:14px 12px; box-shadow:var(--brand-card-shadow); }
.pro-plan strong { display:block; font-size:calc(18px * var(--font-scale)); margin-bottom:4px; color:var(--brand-text-main); }
.pro-plan span { font-size:calc(12px * var(--font-scale)); color:var(--brand-text-muted); font-weight:700; }
.pro-feature { display:flex; align-items:center; gap:8px; padding:9px 0; font-size:calc(13px * var(--font-scale)); font-weight:700; color:var(--brand-text-main); border-bottom:1px solid rgba(0,0,0,.05); }
.metric-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; margin-bottom:12px; }
.metric-card { background:var(--brand-card-bg); border:1px solid var(--brand-card-border); border-radius:12px; padding:12px 8px; text-align:center; box-shadow:var(--brand-card-shadow); }
.metric-card strong { display:block; font-size:22px; color:var(--brand-text-main); line-height:1; }
.metric-card span { display:block; margin-top:5px; font-size:calc(11px * var(--font-scale)); color:var(--brand-text-muted); font-weight:800; }
.joint-grid { display:grid; grid-template-columns:repeat(2, 1fr); gap:8px; margin-bottom:12px; }
.joint-chip { display:flex; align-items:center; gap:8px; background:#f8f8f8; border:1px solid #eee; border-radius:10px; padding:10px; font-size:calc(12px * var(--font-scale)); font-weight:800; color:#333; }
.joint-chip input { width:auto; }
.ai-option-grid { display:grid; grid-template-columns:repeat(2, 1fr); gap:7px; margin-bottom:10px; }
.ai-option-chip { display:flex; align-items:center; gap:7px; background:#fbfbff; border:1px solid #e3ddff; border-radius:10px; padding:8px 9px; font-size:calc(12px * var(--font-scale)); font-weight:800; color:#333; }
.ai-option-chip input { width:auto; }
.engine-tabs { display:flex; background:#ebe7ff; border-radius:10px; padding:3px; margin-bottom:12px; }
.engine-tab { flex:1; border:none; background:transparent; color:#5a4a9c; border-radius:8px; padding:8px 4px; font-size:calc(12px * var(--font-scale)); font-weight:900; font-family:inherit; cursor:pointer; }
.engine-tab.on { background:#fff; color:#111; box-shadow:0 1px 4px rgba(0,0,0,.12); }
.workflow-panel { background:#fbfbfb; border:1px solid rgba(0,0,0,.08); border-radius:12px; padding:12px; margin:10px 0 14px; }
.workflow-title { font-size:calc(12px * var(--font-scale)); font-weight:900; color:#555; margin-bottom:8px; }
.workflow-subtitle { font-size:calc(11px * var(--font-scale)); font-weight:900; color:#888; margin:12px 0 7px; }
.workflow-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; }
.workflow-grid .btn, .workflow-grid .btn-sm { width:100%; min-height:44px; margin:0; padding:9px 6px; border-radius:10px; font-size:calc(12px * var(--font-scale)); line-height:1.2; white-space:normal; text-align:center; }
.workflow-grid.single-action { grid-template-columns:1fr; }
.workflow-step-grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; }
.workflow-step-card { position:relative; min-height:62px; padding:12px 8px 10px; border:1px solid #e0e0e0; border-radius:12px; background:#fff; color:#111; font-family:inherit; text-align:center; box-shadow:0 2px 8px rgba(0,0,0,.025); cursor:pointer; touch-action:manipulation; }
.workflow-step-card:active, .workflow-ai-primary:active { transform:scale(.985); opacity:.82; }
.workflow-step-card strong { display:block; font-size:calc(13px * var(--font-scale)); font-weight:950; line-height:1.16; color:#111; white-space:nowrap; letter-spacing:0; }
.workflow-step-card em { display:block; margin-top:6px; font-style:normal; font-size:calc(10px * var(--font-scale)); font-weight:800; color:#888; line-height:1.25; word-break:keep-all; overflow-wrap:normal; }
.workflow-status { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:10px 0 8px; padding:8px 10px; border-radius:10px; background:#f4f8ff; border:1px solid #dbeafe; color:#1d4ed8; font-size:calc(11px * var(--font-scale)); font-weight:900; line-height:1.28; }
.workflow-status.ready { background:#f6f0ff; border-color:#ded1ff; color:#5E5CE6; }
.photo-wizard-side-next { display:none; position:fixed; right:max(18px, calc(var(--pad-right) + 18px)); top:50%; transform:translateY(-50%); z-index:24500; width:92px; min-height:92px; border:none; border-radius:46px; background:#007aff; color:#fff; box-shadow:0 10px 28px rgba(0,122,255,.35); font-family:inherit; font-size:13px; font-weight:950; line-height:1.2; padding:12px; word-break:keep-all; touch-action:manipulation; }
.photo-wizard-side-next.on { display:flex; align-items:center; justify-content:center; }
.photo-wizard-side-next:active { transform:translateY(-50%) scale(.96); opacity:.88; }
.photo-order-toggle { width:100%; min-height:48px; border:1px solid #d8d4ff; border-radius:12px; background:#fff; color:#111; font-family:inherit; padding:10px 12px; margin:0 0 10px; text-align:left; display:flex; flex-direction:column; gap:3px; box-shadow:0 2px 8px rgba(94,92,230,.06); }
.photo-order-toggle span { font-size:calc(13px * var(--font-scale)); font-weight:950; }
.photo-order-toggle em { font-style:normal; font-size:calc(10px * var(--font-scale)); color:#6b61d8; font-weight:800; line-height:1.25; word-break:keep-all; }
.photo-order-panel { display:none; margin:0 0 12px; padding:12px; border:1px solid #ddd8ff; border-radius:14px; background:#fbfaff; box-shadow:0 8px 20px rgba(94,92,230,.08); }
.photo-order-head { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:10px; }
.photo-order-head strong { display:block; font-size:calc(13px * var(--font-scale)); font-weight:950; color:#111; }
.photo-order-head span { display:block; margin-top:3px; font-size:calc(10px * var(--font-scale)); color:#777; font-weight:800; line-height:1.35; }
.photo-order-head button { flex:0 0 auto; border:none; background:#eee; color:#333; border-radius:9px; padding:7px 9px; font-size:11px; font-weight:900; font-family:inherit; }
.photo-order-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; }
.photo-order-card { border:1px solid rgba(0,0,0,.08); border-radius:12px; background:#fff; padding:8px; min-width:0; }
.photo-order-label { display:flex; align-items:center; justify-content:space-between; gap:6px; margin-bottom:7px; font-size:calc(11px * var(--font-scale)); font-weight:950; color:#111; }
.photo-order-label small { font-size:10px; color:#888; font-weight:800; }
.photo-order-thumb { width:100%; aspect-ratio:3/4; border-radius:9px; background:#f2f2f2; object-fit:cover; display:block; border:1px solid rgba(0,0,0,.06); }
.photo-order-empty { width:100%; aspect-ratio:3/4; border-radius:9px; background:#f5f5f5; border:1px dashed #ccc; display:flex; align-items:center; justify-content:center; color:#aaa; font-size:11px; font-weight:900; }
.photo-order-select { width:100%; margin-top:7px; border:1px solid #d8d8d8; border-radius:9px; background:#fff; padding:8px 7px; font-size:12px; font-weight:850; color:#111; font-family:inherit; }
.photo-order-actions { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:7px; margin-top:10px; }
.photo-order-actions button { border:1px solid #dad7ff; border-radius:10px; background:#fff; color:#5146c7; min-height:40px; padding:8px 6px; font-size:calc(11px * var(--font-scale)); font-weight:900; font-family:inherit; line-height:1.2; }
.photo-order-actions button:first-child { grid-column:1 / -1; background:#5E5CE6; color:#fff; border-color:#5E5CE6; }
.photo-candidate-strip { display:none; gap:8px; overflow-x:auto; padding:0 2px 12px; margin-top:-4px; margin-bottom:4px; -webkit-overflow-scrolling:touch; }
.photo-candidate-strip.on { display:flex; }
.photo-candidate-item { position:relative; flex:0 0 58px; width:58px; height:76px; border-radius:10px; overflow:hidden; border:2px solid transparent; background:#f2f2f2; padding:0; touch-action:manipulation; }
.photo-candidate-item.on { border-color:#007aff; box-shadow:0 0 0 3px rgba(0,122,255,.18); }
.photo-candidate-item img { width:100%; height:100%; object-fit:cover; display:block; }
.photo-candidate-index { position:absolute; left:4px; top:4px; min-width:18px; height:18px; border-radius:9px; background:rgba(0,0,0,.72); color:#fff; display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:950; }
.workflow-ai-primary { width:100%; min-height:58px; border:none; border-radius:14px; padding:12px 14px; margin:0; background:linear-gradient(135deg,#5E5CE6 0%,#8a2be2 55%,#007aff 100%); color:#fff; font-family:inherit; font-weight:950; box-shadow:0 12px 26px rgba(94,92,230,.24); display:flex; align-items:center; justify-content:space-between; gap:12px; cursor:pointer; touch-action:manipulation; }
.workflow-ai-primary span:first-child { display:block; font-size:calc(16px * var(--font-scale)); line-height:1.15; text-align:left; }
.workflow-ai-primary small { display:block; margin-top:3px; font-size:calc(10px * var(--font-scale)); font-weight:800; opacity:.86; line-height:1.2; }
.workflow-ai-primary .ai-arrow { flex-shrink:0; width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,.20); display:flex; align-items:center; justify-content:center; font-size:18px; }
.capture-guide-ui { display:none; position:fixed; inset:0; z-index:26000; background:#111; color:#fff; flex-direction:column; }
.capture-guide-header { padding:calc(var(--chrome-top) + 6px) 16px 12px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid rgba(255,255,255,.12); background:#111; }
.capture-guide-header strong { font-size:16px; font-weight:950; }
.capture-guide-close { border:none; background:rgba(255,255,255,.12); color:#fff; border-radius:18px; padding:7px 12px; font-size:13px; font-weight:900; font-family:inherit; }
.capture-guide-stage { position:relative; flex:1; min-height:0; overflow:hidden; background:#050505; }
.capture-guide-image { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; object-position:center; z-index:1; background:#050505; }
.capture-guide-camera-grid { position:absolute; inset:0; z-index:2; pointer-events:none; background-image:linear-gradient(rgba(255,255,255,.42) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.42) 1px, transparent 1px); background-size:33.333% 33.333%; }
.capture-guide-camera-grid::before { content:''; position:absolute; top:0; bottom:0; left:50%; width:4px; transform:translateX(-50%); background:rgba(0,122,255,.90); box-shadow:0 0 0 1px rgba(255,255,255,.55); }
.capture-guide-camera-grid::after { content:none; }
.capture-guide-level-pill { position:absolute; left:50%; top:14px; transform:translateX(-50%); z-index:4; padding:7px 13px; border-radius:999px; background:rgba(0,0,0,.70); color:#fff; border:1px solid rgba(255,255,255,.42); font-size:12px; font-weight:950; letter-spacing:0; }
.capture-guide-label { position:absolute; left:16px; top:16px; max-width:72%; padding:10px 12px; border-radius:12px; background:rgba(255,255,255,.90); color:#111; border:1px solid rgba(0,0,0,.10); font-size:13px; font-weight:850; line-height:1.45; word-break:keep-all; z-index:3; }
.capture-guide-dir { position:absolute; right:16px; bottom:16px; padding:8px 13px; border-radius:15px; background:rgba(0,0,0,.70); font-size:13px; font-weight:950; z-index:3; }
.capture-guide-ui.mode-sideL .capture-guide-silhouette, .capture-guide-ui.mode-sideR .capture-guide-silhouette { width:22%; border-radius:40% 34% 25% 25%; }
.capture-guide-ui.mode-sideL .capture-guide-model, .capture-guide-ui.mode-sideR .capture-guide-model { width:min(32vw, 160px); }
.capture-guide-ui.mode-sideL .capture-guide-shirt, .capture-guide-ui.mode-sideR .capture-guide-shirt { left:34%; right:30%; border-radius:18px 10px 12px 10px; }
.capture-guide-ui.mode-sideL .capture-guide-shorts, .capture-guide-ui.mode-sideR .capture-guide-shorts { left:37%; right:34%; }
.capture-guide-ui.mode-sideL .capture-guide-leg.left, .capture-guide-ui.mode-sideR .capture-guide-leg.left { left:42%; }
.capture-guide-ui.mode-sideL .capture-guide-leg.right, .capture-guide-ui.mode-sideR .capture-guide-leg.right { right:39%; }
.capture-guide-ui.mode-sideL .capture-guide-shoe.left, .capture-guide-ui.mode-sideR .capture-guide-shoe.left { left:36%; }
.capture-guide-ui.mode-sideL .capture-guide-shoe.right, .capture-guide-ui.mode-sideR .capture-guide-shoe.right { right:34%; }
.capture-guide-ui.mode-back .capture-guide-foot-zone { border-color:rgba(0,122,255,.78); }
.capture-guide-controls { padding:12px 16px calc(16px + var(--pad-bottom)); background:#111; border-top:1px solid rgba(255,255,255,.12); }
.capture-guide-tabs { display:grid; grid-template-columns:repeat(4, 1fr); gap:6px; margin-bottom:10px; }
.capture-guide-tab { border:1px solid rgba(255,255,255,.18); border-radius:10px; background:#1f1f22; color:#cfcfcf; padding:9px 4px; font-size:12px; font-weight:900; font-family:inherit; }
.capture-guide-tab.on { background:#fff; color:#111; }
.capture-guide-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.capture-guide-actions .btn { margin:0; min-height:46px; }
.ai-action-stack { display:flex; flex-direction:column; gap:8px; margin:0 0 12px; }
.ai-action-stack .btn { margin:0; min-height:48px; padding:12px 10px; font-size:calc(13px * var(--font-scale)); line-height:1.25; }
.ai-action-stack #ai-run-btn { min-height:56px; border-radius:14px; background:linear-gradient(135deg,#5E5CE6,#8a2be2); box-shadow:0 10px 22px rgba(94,92,230,.20); font-size:calc(15px * var(--font-scale)); font-weight:950; }
.ai-options-toggle { border:1px solid #dfd6ff; background:#fff; color:#5E5CE6; }
@media (max-width:390px) {
    .workflow-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); }
    .workflow-grid .btn, .workflow-grid .btn-sm { font-size:11px; }
    .workflow-step-grid { grid-template-columns:1fr; }
    .workflow-step-card { min-height:56px; }
    .photo-order-grid { grid-template-columns:1fr; }
}
.sticker-color-dot { width:14px; height:14px; border-radius:50%; display:inline-block; border:1px solid rgba(0,0,0,.2); flex-shrink:0; }
.draft-banner { display:none; background:#fff8e6; border:1px solid #ffd166; border-radius:12px; padding:12px; margin-bottom:12px; }
.detail-photo-comment-row { display:grid; grid-template-columns:minmax(0, 1.08fr) minmax(180px, .92fr); gap:12px; align-items:start; width:100%; }
.detail-photo-col { display:flex; flex-direction:column; align-items:center; min-width:0; width:100%; }
.detail-comment-empty { background:#fafafa; border:1px dashed #ddd; border-radius:10px; padding:12px; font-size:calc(12px * var(--font-scale)); color:#888; font-weight:800; line-height:1.5; word-break:keep-all; }
.preview-page-card { background:#fff; border:1px solid #ddd; border-radius:10px; padding:8px; }
.preview-page-label { font-size:12px; font-weight:900; color:#555; margin-bottom:8px; text-align:left; }
.preview-page-card img { width:100%; display:block; border-radius:8px; box-shadow:0 2px 8px rgba(0,0,0,0.1); }
@media (max-width:480px) {
    .detail-photo-comment-row { grid-template-columns:1fr; }
}

.top-header {
    display: flex; align-items: center; gap: 10px;
    background: var(--brand-header-bg); border-bottom: 1px solid var(--brand-card-border);
    position: sticky; top: 0; z-index: 100;
    padding-top: calc(var(--chrome-top) + 8px);
    padding-bottom: 12px;
    padding-left: 16px;
    padding-right: 16px;
    margin: 0 calc(var(--pad-side) * -1) 14px calc(var(--pad-side) * -1);
}

.back-btn {
    background: transparent; border: none; font-size: 32px; line-height: 1;
    cursor: pointer; color: var(--brand-primary);
    padding: 10px 25px 10px 10px;
    margin-left: -10px; display: flex; align-items: center; justify-content: center;
    touch-action: manipulation;
}

.btn { width:100%; border:none; border-radius:12px; padding:14px; font-size:calc(15px * var(--font-scale)); font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px; margin-bottom:10px; font-family:inherit; transition:all .2s ease-in-out; touch-action: manipulation; line-height:1.22; white-space:normal; }
.btn:active { opacity:.75; transform: scale(0.98); }
.btn-black { background:var(--brand-button-main); color:#fff; }
.btn-gray { background:#f4f4f4; color:#000; }
.btn-outline{ background:#fff; color:var(--brand-primary); border:1px solid var(--brand-primary); }
.btn-red { background:#fef2f2; color:#ef4444; border:1px solid #fca5a5; }
.btn-sm { width:auto; padding:9px 14px; font-size:calc(13px * var(--font-scale)); margin-bottom:0; border-radius:10px; line-height:1.2; white-space:normal; }
.hidden-file-input { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }

.logo-circle { background:var(--brand-logo-bg); border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; overflow:hidden; }
.logo-circle.brand-logo { border-radius:26%; background:linear-gradient(135deg,#1c2f6d 0%,#21899a 72%,#1fd0a3 100%); box-shadow:0 16px 34px rgba(28,47,109,.20); }
.logo-circle img { width:100%; height:100%; object-fit:cover; display:block; background:transparent; padding:0; }
.physio-word-logo { width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5%; color:#fff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.18); }
.physio-word-logo .physio-p { font-size:60%; line-height:.78; font-weight:950; letter-spacing:0; transform:translateY(3%); }
.physio-word-logo .physio-word { display:inline-flex; align-items:center; justify-content:center; min-height:25%; padding:1% 13% 2%; border-radius:999px; background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.44); font-size:29%; line-height:1; font-weight:950; letter-spacing:0; }
.brand-surface { background:var(--brand-bg); transition:background .2s ease; }
.lock-lang-row { position:absolute; top:max(42px, calc(env(safe-area-inset-top) + 8px)); right:max(20px, calc(env(safe-area-inset-right) + 16px)); width:auto; max-width:none; display:flex; justify-content:flex-end; margin:0; z-index:2; }
.lock-brand-wrap { display:flex; flex-direction:column; align-items:center; text-align:center; margin-top:clamp(78px, 9vh, 96px); }
#brand-logo-lock { width:128px; height:128px; font-size:44px; margin-bottom:14px; flex:0 0 auto; }
.home-actions { display:flex; justify-content:flex-end; gap:8px; margin-bottom:2px; padding:var(--home-control-top) max(12px, calc(env(safe-area-inset-right) + 12px)) 0 max(12px, calc(env(safe-area-inset-left) + 12px)); }
.home-pill-btn { background:#fff; border:1px solid #e0e0e0; border-radius:20px; padding:5px 12px; min-height:32px; font-size:calc(11px * var(--font-scale)); font-weight:800; color:#666; cursor:pointer; box-shadow:0 2px 6px rgba(0,0,0,.03); font-family:inherit; line-height:1.15; }
.beta-hidden { display:none !important; }
.home-brand { display:flex; flex-direction:column; align-items:center; padding:2px 0 12px; text-align:center; }
.home-brand .main-title { margin-top:8px; font-size:clamp(28px, calc(29px * var(--font-scale)), 33px); letter-spacing:-.7px; }
.home-brand .brand-maker { margin-top:4px; font-size:calc(11px * var(--font-scale)); }
.home-brand .sub-title { margin-top:5px; font-size:clamp(17px, calc(17px * var(--font-scale)), 20px); }
.home-brand .desc-text { margin-top:5px; font-size:calc(12px * var(--font-scale)); }
.main-title { font-size:clamp(34px, calc(34px * var(--font-scale)), 38px); font-weight:900; letter-spacing:-1px; line-height:1; margin-top:14px; color:var(--brand-text-main); }
.sub-title { font-size:clamp(20px, calc(20px * var(--font-scale)), 23px); font-weight:700; margin-top:6px; letter-spacing:-0.5px; color:var(--brand-text-sub); }
.brand-maker { margin-top:7px; font-size:calc(12px * var(--font-scale)); color:#6b7280; font-weight:900; letter-spacing:.2px; }
.desc-text { font-size:calc(13px * var(--font-scale)); color:var(--brand-text-muted); margin-top:8px; font-weight:500; }
.home-copyright { text-align:center; color:#aaa; font-size:calc(10px * var(--font-scale)); font-weight:700; line-height:1.45; padding:4px 10px calc(8px + var(--pad-bottom)); }
html.pt-android .lock-lang-row { top:max(18px, calc(env(safe-area-inset-top) + 8px)); right:14px; }
html.pt-android .lock-brand-wrap { margin-top:58px; }
html.pt-android .home-actions { margin-bottom:2px !important; }
html.pt-android .home-pill-btn { min-height:31px; padding:5px 11px; font-size:12px; }
html.pt-android .home-brand { padding-top:2px !important; padding-bottom:12px !important; }
html.pt-android #brand-logo-home { width:62px !important; height:62px !important; margin-bottom:3px !important; }
html.pt-android .home-brand .main-title { font-size:32px; margin-top:8px; }
html.pt-android .home-brand .brand-maker { font-size:12px; margin-top:4px; }
html.pt-android .home-brand .sub-title { font-size:20px; margin-top:5px; }
html.pt-android .home-brand .desc-text { font-size:13px; margin-top:5px; }
.menu-card { display:flex; align-items:center; gap:14px; background:var(--brand-card-bg); border:1px solid var(--brand-card-border); border-radius:16px; padding:16px; margin-bottom:12px; cursor:pointer; box-shadow:var(--brand-card-shadow); transition:transform .1s; touch-action: manipulation; }
.menu-card:active { transform:scale(.98); }
.icon-box { width:52px; height:52px; background:var(--brand-button-main); border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:24px; flex-shrink:0; }
.app-icon { width:30px; height:30px; color:#fff; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; fill:none; display:block; }
.menu-title { font-size:calc(17px * var(--font-scale)); font-weight:800; letter-spacing:-0.5px; color:#111; line-height:1.18;}
.menu-sub { font-size:calc(13px * var(--font-scale)); color:#888; margin-top:4px; font-weight:600; line-height:1.35;}
.tag { display:inline-block; font-size:9px; font-weight:900; background:var(--brand-button-main); color:#fff; padding:2px 6px; border-radius:4px; margin-left:6px; vertical-align:middle; }

.seg4, .seg3, .seg2 { display:flex; background:#f0f0f0; border-radius:10px; padding:3px; margin-bottom:14px; }
.seg4 .sb, .seg3 .sb, .seg2 .sb2 { flex:1; padding:9px 2px; border:none; border-radius:8px; font-size:calc(12px * var(--font-scale)); cursor:pointer; background:transparent; color:#666; font-weight:600; transition:all .15s; font-family:inherit; white-space:normal; line-height:1.15; touch-action: manipulation; }
.seg4 .sb.on, .seg3 .sb.on, .seg2 .sb2.on { background:#fff; color:#000; font-weight:700; box-shadow:0 1px 4px rgba(0,0,0,.12); }

.img-box { width:100%; min-height:260px; background:#f8f8f8; border-radius:14px; display:flex; flex-direction:column; align-items:center; justify-content:center; margin-bottom:12px; position:relative; overflow:hidden; line-height:0; touch-action:auto; }
.img-box img { width:100%; height:auto; display:block; pointer-events:none; z-index:1; position:relative; -webkit-user-drag:none; }

.dir-label { position:absolute; bottom:12px; right:12px; background:rgba(0,0,0,.65); color:#fff; font-size:calc(12px * var(--font-scale)); padding:6px 14px; border-radius:14px; z-index:10; font-weight:700; white-space:nowrap; min-width:50px; text-align:center; pointer-events:none; letter-spacing:0.5px;}

#target-reticle { display:none; position:absolute; width:60px; height:60px; z-index:100; transform:translate(-50%, -50%); cursor:crosshair; touch-action:none; }
.ret-v { position:absolute; top:0; bottom:0; left:50%; width:2px; background:#ff3b30; transform:translateX(-50%); pointer-events:none; box-shadow:0 0 2px rgba(255,255,255,0.8);}
.ret-h { position:absolute; left:0; right:0; top:50%; height:2px; background:#ff3b30; transform:translateY(-50%); pointer-events:none; box-shadow:0 0 2px rgba(255,255,255,0.8);}
.ret-center { position:absolute; top:50%; left:50%; width:14px; height:14px; background:rgba(255,255,255,0.3); border:2.5px solid #ff3b30; border-radius:50%; transform:translate(-50%,-50%); pointer-events:none; box-shadow:0 0 4px rgba(0,0,0,0.3);}

#action-ui { display:none; background:#f0f8ff; border:1px solid var(--brand-primary); border-radius:12px; padding:14px; margin-bottom:14px; text-align:center; }
#action-msg { font-size:calc(14px * var(--font-scale)); font-weight:800; color:var(--brand-primary); margin-bottom:12px; }

#eraser-ui { display:none; background:#f8f8f8; border:1px solid #ddd; border-radius:12px; padding:12px; margin-bottom:14px; gap:10px; flex-direction:column; }
#eraser-brush { display:none; position:absolute; border-radius:50%; background:rgba(255,255,255,0.4); border:2px solid #ff3b30; pointer-events:none; z-index:9999; transform:translate(-50%,-50%); box-shadow:0 0 8px rgba(0,0,0,0.2);}

#crop-ui { display:none; position:fixed; inset:0; z-index:20000; background:#111; overflow-y:auto; -webkit-overflow-scrolling:touch; }
.crop-wrapper { display:flex; flex-direction:column; height:100%; width:100%; }
#crop-ui-header {
    background:#111; position: relative;
    padding-top: var(--chrome-top);
    padding-bottom:16px; padding-left:16px; padding-right:16px;
    border-bottom:1px solid #333; text-align:center; flex-shrink:0; position:sticky; top:0; z-index:100;
}
#crop-container { position:relative; flex:1; min-height:0; display:flex; align-items:center; justify-content:center; padding:0; overflow:hidden; z-index:10; border-bottom: 1px solid #222;}
#crop-controls-section { position:relative; z-index:100; padding:12px 16px calc(20px + var(--pad-bottom)); display:flex; flex-direction:column; gap:10px; background:#111; flex-shrink:0; max-height:35vh; overflow-y:auto; border-top: 1px solid #222;}

#img-wrapper { position:relative; display:inline-block; margin:auto; }
#crop-img-el { width:100%; height:100%; object-fit:contain; pointer-events:none; display:block; transition: transform 0.1s ease-out; }
#crop-box { position:absolute; border:2px solid var(--brand-primary); box-shadow:0 0 0 3000px rgba(0,0,0,0.6); cursor:move; touch-action:none; z-index:10; }
.c-line-v { position:absolute; left:50%; top:0; bottom:0; border-left:1px dashed rgba(255,255,255,0.6); transform:translateX(-50%); pointer-events:none; z-index:5; }
.c-line-h { position:absolute; top:50%; left:0; right:0; border-top:1px dashed rgba(255,255,255,0.6); transform:translateY(-50%); pointer-events:none; z-index:5; }
.crop-handle { position:absolute; width:44px; height:44px; background:transparent; z-index:10; display:flex; align-items:center; justify-content:center; touch-action:none;}
.crop-handle::after { content:''; display:block; width:14px; height:14px; background:#fff; border:2px solid var(--brand-primary); border-radius:50%; }
.ch-nw { top:-22px; left:-22px; cursor:nwse-resize; } .ch-ne { top:-22px; right:-22px; cursor:nesw-resize; }
.ch-sw { bottom:-22px; left:-22px; cursor:nesw-resize; } .ch-se { bottom:-22px; right:-22px; cursor:nwse-resize; }
.ch-n  { top:-22px; left:50%; transform:translateX(-50%); cursor:ns-resize; } .ch-s  { bottom:-22px; left:50%; transform:translateX(-50%); cursor:ns-resize; }
.ch-e  { right:-22px; top:50%; transform:translateY(-50%); cursor:ew-resize; } .ch-w  { left:-22px; top:50%; transform:translateY(-50%); cursor:ew-resize; }

input[type="range"] { -webkit-appearance: none; width: 100%; background: transparent; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; height: 18px; width: 18px; border-radius: 50%; background: var(--brand-primary); cursor: pointer; margin-top: -7px; }
input[type="range"]::-webkit-slider-runnable-track { width: 100%; height: 4px; cursor: pointer; background: #555; border-radius: 2px; }
.adj-btn { background: #222; color: #fff; border: 1px solid #444; border-radius: 8px; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; font-size: 14px; cursor: pointer; flex-shrink: 0; touch-action: manipulation; }

.draw-toolbar { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:6px; margin-bottom:12px; }
.draw-toolbar.tool-group-muted { opacity:.54; }
.dt-btn { min-height:44px; padding:8px 6px; border:1px solid #ddd; border-radius:8px; font-size:calc(12px * var(--font-scale)); background:#fff; cursor:pointer; color:#444; font-weight:800; transition:0.2s; text-align:center; white-space:normal; line-height:1.18; word-break:keep-all; overflow-wrap:normal; touch-action: manipulation;}
.dt-btn.on { background:var(--brand-button-main); color:#fff; border-color:var(--brand-button-main); font-weight:700;}

.d-marker { position:absolute; width:10px; height:10px; background:#ff3b30; border:1.5px solid #fff; border-radius:50%; transform:translate(-50%,-50%); z-index:50; touch-action:none; -webkit-user-drag:none; }
.d-marker.selected, .d-angle-dot.selected { width:18px; height:18px; border:3px solid #fff; box-shadow:0 0 0 4px rgba(0,122,255,.75), 0 0 12px rgba(0,0,0,.35); z-index:70; }
.d-vline.selected::after, .d-hline.selected::after { background:#ff3b30; box-shadow:0 0 0 3px rgba(255,59,48,.25); }
.d-angle-line.selected { height:4px; box-shadow:0 0 0 3px rgba(0,122,255,.22); z-index:32; }
.selection-chip { position:absolute; left:50%; top:8px; transform:translateX(-50%); z-index:80; background:rgba(0,0,0,.78); color:#fff; border-radius:16px; padding:6px 12px; font-size:calc(12px * var(--font-scale)); font-weight:900; pointer-events:none; white-space:nowrap; }
.d-label { position:absolute; font-size:calc(11px * var(--font-scale)); font-weight:700; color:#fff; background:rgba(0,0,0,0.75); padding:3px 6px; border-radius:6px; transform:translate(8px, -12px); z-index:21; white-space:nowrap; pointer-events:none;}
.d-vline { position:absolute; width:24px; height:100%; top:0; transform:translateX(-50%); z-index:2; touch-action:none; display:flex; justify-content:center; cursor:ew-resize; -webkit-user-drag:none; }
.d-vline::after { content:''; width:2px; height:100%; background:rgba(0,122,255,0.8); }
.d-hline { position:absolute; height:24px; width:100%; left:0; transform:translateY(-50%); z-index:2; touch-action:none; display:flex; align-items:center; flex-direction:column; justify-content:center; cursor:ns-resize; -webkit-user-drag:none; }
.d-hline::after { content:''; height:2px; width:100%; background:rgba(52,199,89,0.8); }
.d-angle-line { position:absolute; background:rgba(255,149,0,0.8); height:2px; transform-origin:0 50%; z-index:14; pointer-events:none; }
.d-angle-dot { position:absolute; width:10px; height:10px; background:#ff9500; border:1.5px solid #fff; border-radius:50%; transform:translate(-50%,-50%); z-index:45; touch-action:none; -webkit-user-drag:none; }
.d-angle-lbl { position:absolute; font-size:calc(11px * var(--font-scale)); font-weight:700; color:#fff; background:#ff9500; padding:2px 5px; border-radius:4px; z-index:46; pointer-events:none; font-family:sans-serif;}
.tool-section-label { font-size:calc(12px * var(--font-scale)); font-weight:900; color:#555; margin:14px 0 8px; letter-spacing:0; }
.consult-toolbar .dt-btn { background:#fbfaff; border-color:#ded6ff; color:#4b2bbf; }
.consult-toolbar .dt-btn.on { background:#5e5ce6; color:#fff; border-color:#5e5ce6; }
.consult-color-row { display:flex; align-items:center; gap:8px; padding:10px 2px 2px; overflow-x:auto; }
.consult-color-label { font-size:12px; font-weight:900; color:#555; flex-shrink:0; }
.consult-color-btn { width:30px; height:30px; border-radius:50%; border:2px solid #fff; box-shadow:0 0 0 1px rgba(0,0,0,.18); flex-shrink:0; cursor:pointer; }
.consult-color-btn.on { box-shadow:0 0 0 3px rgba(94,92,230,.30), 0 0 0 1px rgba(0,0,0,.25); }
.consult-stroke-row { display:flex; align-items:center; gap:10px; padding:8px 2px 2px; }
.consult-stroke-row input[type="range"] { flex:1; min-width:120px; }
.consult-stroke-value { min-width:34px; text-align:right; font-size:12px; font-weight:900; color:#007aff; }
.d-consult-text { position:absolute; z-index:26; color:#111; background:rgba(255,255,255,0.88); border:1px solid rgba(0,0,0,0.16); border-radius:8px; padding:5px 8px; font-size:15px; font-weight:800; line-height:1.25; transform:translate(-50%,-50%); touch-action:none; max-width:180px; word-break:keep-all; box-shadow:0 3px 10px rgba(0,0,0,0.12); }
.d-consult-circle { position:absolute; z-index:24; border:3px solid #5e5ce6; border-radius:50%; background:rgba(94,92,230,0.06); transform:translate(-50%,-50%); touch-action:none; box-shadow:0 0 0 2px rgba(255,255,255,0.7); }
.d-consult-arrow, .d-consult-pen { position:absolute; inset:0; width:100%; height:100%; z-index:23; overflow:visible; touch-action:none; pointer-events:none; }
.d-consult-hit { pointer-events:stroke; cursor:pointer; }
.d-consult-handle { position:absolute; width:22px; height:22px; border-radius:50%; background:#fff; border:3px solid #5e5ce6; z-index:28; transform:translate(-50%,-50%); box-shadow:0 2px 8px rgba(0,0,0,.22); touch-action:none; }
.d-consult-resize-handle { position:absolute; width:24px; height:24px; border-radius:50%; background:#fff; border:3px solid #5e5ce6; z-index:29; transform:translate(-50%,-50%); box-shadow:0 2px 8px rgba(0,0,0,.24); touch-action:none; }
.d-consult-resize-handle::after { content:''; position:absolute; width:8px; height:8px; right:3px; bottom:3px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; color:#5e5ce6; }
.d-face-blur { position:absolute; z-index:25; background:rgba(232,232,232,0.92); border:2px dashed #007aff; border-radius:14px; transform:translate(-50%,-50%); touch-action:none; overflow:hidden; box-shadow:0 0 0 2px rgba(255,255,255,0.65); }
.d-face-blur::before { content:''; position:absolute; inset:-8px; background:repeating-linear-gradient(45deg, rgba(255,255,255,.35) 0 6px, rgba(180,180,180,.35) 6px 12px); filter:blur(2px); }
.d-consult-selected { box-shadow:0 0 0 4px rgba(94,92,230,0.26), 0 0 0 1px #fff; }

#loupe { display:none; position:fixed; width:180px; height:130px; border-radius:14px; border:3px solid var(--brand-primary); background-color:#111; background-repeat:no-repeat; box-shadow:0 10px 24px rgba(0,0,0,0.35); z-index:9999; pointer-events:none; overflow:hidden; }
#loupe::before { content:''; position:absolute; top:50%; left:50%; width:100%; height:1px; background:rgba(255,0,0,0.7); transform:translate(-50%,-50%); }
#loupe::after { content:''; position:absolute; top:50%; left:50%; width:1px; height:100%; background:rgba(255,0,0,0.7); transform:translate(-50%,-50%); }
.loupe-grid { position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.18) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.18) 1px, transparent 1px); background-size:33.333% 33.333%; display:none; }

#preset-modal { display:none; position:fixed; z-index:25000; background:#fff; border-radius:12px; padding:14px; box-shadow:0 8px 24px rgba(0,0,0,0.25); width:min(300px, calc(100vw - 32px)); left:50%; bottom:calc(92px + var(--pad-bottom)); transform:translateX(-50%); border:1px solid #eee; }
.preset-title { font-size:calc(14px * var(--font-scale)); font-weight:800; margin-bottom:10px; text-align:center; color:#111; }
.preset-list { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; }
.preset-chip { padding:7px 12px; background:#f4f4f4; border:1px solid #e0e0e0; border-radius:16px; font-size:calc(13px * var(--font-scale)); font-weight:700; cursor:pointer; color:#222; }
.preset-chip:active { background:#ddd; }

.cp-list { border:1px solid rgba(0,0,0,.08); border-radius:12px; overflow:hidden; background:#fff; margin-bottom:14px; }
.cp-row { display:flex; flex-direction:column; gap:8px; padding:16px 14px; border-bottom:1px solid rgba(0,0,0,.05); transition:0.2s; }
.finding-chips-wrap { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; width:100%; padding-left:34px; }
.finding-chip { display:inline-block; padding:7px 10px; font-size:calc(12px * var(--font-scale)); border-radius:8px; background:#f4f4f4; border:1px solid #ddd; color:#555; cursor:pointer; font-weight:700; line-height:1.2; }
.finding-chip.on { background:#e0f0ff; border-color:var(--brand-primary); color:var(--brand-primary); font-weight:800; }

#inline-patient-list { display:none; position:absolute; top:70px; left:16px; right:16px; background:#fff; border:1px solid #ddd; border-radius:10px; box-shadow:0 8px 20px rgba(0,0,0,0.15); z-index:100; max-height:200px; overflow-y:auto; }
.ipl-item { padding:12px 14px; border-bottom:1px solid #f0f0f0; cursor:pointer; }
.patient-list-item { background:#fff; border:1px solid #eee; border-radius:12px; padding:16px; margin-bottom:10px; display:flex; justify-content:space-between; align-items:center; cursor:pointer; box-shadow:0 2px 6px rgba(0,0,0,0.02); }

.photo-btn-group { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; justify-content:center; }
.record-item { background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:14px; padding:14px 16px; margin-bottom:10px; cursor:pointer; box-shadow:0 2px 6px rgba(0,0,0,.04); transition: transform 0.1s;}
.record-item:active { transform: scale(0.98); }
.label { font-size:calc(14px * var(--font-scale)); font-weight:700; margin-bottom:6px; color:#111; }
.section-title { font-size:calc(15px * var(--font-scale)); font-weight:800; margin-bottom:10px; color:#111;}
.empty-state { text-align:center; padding:40px 20px; color:#bbb; }

.toast { position:fixed; bottom:calc(30px + var(--pad-bottom)); left:50%; transform:translateX(-50%); background:rgba(0,0,0,.8); color:#fff; padding:10px 20px; border-radius:20px; font-size:calc(13px * var(--font-scale)); z-index:30000; opacity:0; transition:opacity .3s; pointer-events:none; white-space:nowrap; }
.toast.show { opacity:1; }

#export-modal { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:20000; align-items:center; justify-content:center; }
.em-content { background:#fff; border-radius:20px; padding:24px; width:90%; max-width:340px; }
.em-title { font-size:calc(18px * var(--font-scale)); font-weight:800; margin-bottom:16px; text-align:center; }
.em-label { font-size:calc(13px * var(--font-scale)); font-weight:700; color:#666; margin:16px 0 8px; }
.radio-group label { display:flex; align-items:center; gap:8px; background:#f8f8f8; padding:12px; border-radius:10px; margin-bottom:8px; font-size:calc(14px * var(--font-scale)); border:1px solid #eee; cursor:pointer; }
.radio-group input[type="radio"] { width:auto; margin:0; }

#ios-save-modal { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.9); z-index:30000; flex-direction:column; align-items:center; justify-content:center; padding:20px; }
#ios-save-img { -webkit-touch-callout: default !important; -webkit-user-select: auto !important; user-select: auto !important; pointer-events: auto !important; }
.license-banner { display:none; margin:0 0 14px; padding:12px 14px; border-radius:14px; border:1px solid #fee2e2; background:#fff1f2; color:#991b1b; font-size:13px; font-weight:800; line-height:1.45; word-break:keep-all; }
.license-banner.active { display:block; }
.license-inline-note { margin:12px 0 0; padding:11px 12px; border-radius:12px; background:#f8fafc; border:1px solid #e5e7eb; color:#475569; font-size:12px; font-weight:800; line-height:1.45; word-break:keep-all; }

#export-stage { background:#ffffff; box-sizing:border-box; position:absolute; top:-9999px; left:0; z-index:-1000; display:block; pointer-events: none;}

#ai-loading { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.85); z-index:99999; flex-direction:column; align-items:center; justify-content:center; color:#fff; text-align:center; }
.spinner { border:4px solid rgba(255,255,255,0.3); border-top:4px solid #fff; border-radius:50%; width:40px; height:40px; animation:spin 1s linear infinite; margin-bottom:16px; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }