/* 고객 포털(웹) — 흐름 261026. studio.css(토큰 · 의견 창 · 토스트) 위에 얹는다. 색은 AXIS 토큰만(라이트 · 다크) */
.portal{background:var(--soft);font-size:15px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- 로그인 ---------- */
.c-login{min-height:100vh;display:grid;place-items:center;padding:24px 16px;background:var(--soft)}
.c-login[hidden]{display:none}
.c-card.c-login-card{width:100%;max-width:440px;gap:14px;padding:32px}
.c-card.c-login-card[hidden]{display:none}
.c-login-head{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.c-login-title{margin:0;font-size:26px;line-height:1.3;font-weight:800;letter-spacing:-.015em}
.c-login-sub,.c-login-help{margin:0;color:var(--sub);font-size:14px;line-height:1.55}
.c-login-help{font-size:13px}
.c-login-err{margin:0;padding:10px 12px;border-radius:10px;background:var(--up-danger-tint);color:var(--up-danger-text);font-size:14px;font-weight:600;line-height:1.5;overflow-wrap:anywhere}
.c-login-err:empty{display:none}
.c-form.c-login-card input[type=password]{width:100%;height:46px;padding:0 52px 0 14px;border:1px solid var(--up-rule-default);border-radius:var(--r);background:var(--bg);color:var(--ink);font-size:16px}
.c-form.c-login-card input[type=email]{font-size:16px}
.c-pwbox{position:relative;display:block}
.c-eye{position:absolute;top:1px;right:1px;display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:var(--r);background:transparent;color:var(--sub);cursor:pointer}
.c-eye:hover{color:var(--ink)}
.c-eye:focus-visible{outline:2px solid var(--up-surface-brand);outline-offset:-2px}
.c-eye .eye-off{display:none}
.c-eye[aria-pressed="true"] .eye-on{display:none}
.c-eye[aria-pressed="true"] .eye-off{display:inline}
.c-login-btn{width:100%;margin-top:2px}
@media (max-width:480px){.c-card.c-login-card{padding:20px 16px}.c-login-title{font-size:24px}}
.empty-proj{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:24px;text-align:center;color:var(--sub)}
.empty-proj[hidden]{display:none}
.empty-proj b{color:var(--ink);font-size:18px}

/* ---------- 머리말 ---------- */
.c-app[hidden]{display:none}
.c-top{position:sticky;top:0;z-index:10;display:grid;grid-template-columns:minmax(120px,1fr) auto auto;align-items:center;gap:16px;padding:10px 24px;background:var(--bg);border-bottom:1px solid var(--line)}
.c-brand{display:flex;flex-direction:column;min-width:0}
.c-brand b{font-size:18px;font-weight:800;letter-spacing:-.01em}
.c-brand span{font-size:12px;color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.c-steps{display:flex;align-items:center;gap:0;margin:0;padding:0;list-style:none}
.c-steps li{display:flex;align-items:center;gap:7px;color:var(--up-text-tertiary);font-size:14px;font-weight:600;white-space:nowrap}
.c-steps li+li::before{content:"";width:28px;height:1px;background:var(--up-rule-default);margin:0 10px}
.c-steps i{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--up-neutral-200);color:var(--up-neutral-600);font-style:normal;font-size:12px;font-weight:700}
.c-steps li.done{color:var(--ink)}
.c-steps li.done i{background:var(--ink);color:var(--up-text-inverse)}
.c-steps li.on{color:var(--ink);font-weight:800}
.c-steps li.on i{background:var(--up-surface-brand);color:#fff}
.c-actions{display:flex;justify-content:flex-end;align-items:center;gap:8px;flex-wrap:nowrap;min-width:0}
.c-app [hidden]{display:none!important}
.c-main p{max-width:none}
.c-chip{flex:none}
.c-save{font-size:12px;color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:1em}
.c-sel select{height:36px;border:1px solid var(--line);border-radius:var(--r);background:var(--bg);padding:0 8px}

/* ---------- 버튼 · 칩 ---------- */
.c-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:40px;padding:0 14px;border:1px solid var(--up-rule-default);border-radius:var(--r);background:var(--bg);color:var(--ink);font-weight:600;font-size:14px;text-decoration:none;cursor:pointer;white-space:nowrap}
.c-btn:hover{border-color:var(--ink)}
.c-btn:disabled{opacity:.5;cursor:default}
.c-btn.c-soft{background:var(--soft);border-color:transparent}
.c-btn.c-ghost{border-color:transparent;background:transparent;color:var(--sub)}
.c-btn.c-sm{height:32px;padding:0 12px;font-size:13px}
.c-btn.c-big2{height:50px;padding:0 20px;font-size:15px}
.c-pri{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 20px;border:0;border-radius:var(--r);background:var(--pri);color:var(--pri-ink);font-weight:700;font-size:15px;cursor:pointer;white-space:nowrap}
.c-pri:hover{background:var(--up-action-hover)}
.c-pri:disabled,.c-pri[aria-disabled="true"]{background:var(--up-neutral-200);color:var(--up-neutral-500);cursor:default}
.c-pri[aria-disabled="true"]:hover{background:var(--up-neutral-200)}
.c-pri.c-big{height:50px;padding:0 24px;font-size:16px}
.c-link{border:0;background:none;padding:0;color:var(--up-text-accent);font:inherit;font-weight:600;cursor:pointer;text-align:left}
.c-link:hover{text-decoration:underline}
.c-x{display:inline-grid;place-items:center;width:26px;height:26px;border:0;border-radius:50%;background:var(--soft);color:var(--sub);font-size:16px;line-height:1;cursor:pointer}
.c-x:hover{background:var(--up-danger-tint);color:var(--up-danger-text)}
.c-chip{display:inline-flex;align-items:center;height:24px;padding:0 9px;border-radius:999px;font-size:12px;font-weight:700;white-space:nowrap;background:var(--soft);color:var(--sub)}
.c-chip.ok{background:var(--up-success-tint);color:var(--up-success-text)}
.c-chip.warn{background:var(--up-warning-tint);color:var(--up-warning-text)}
.c-chip.bad{background:var(--up-danger-tint);color:var(--up-danger-text)}
.c-chip.info{background:var(--up-info-tint);color:var(--up-info-text)}
.c-chip.brand{background:var(--up-surface-tint);color:var(--up-text-accent)}
.c-chip.line{background:transparent;border:1px solid var(--up-rule-default)}
.c-chip.mute{background:var(--soft);color:var(--sub)}
.c-badge{display:inline-flex;align-self:flex-start;height:24px;align-items:center;padding:0 10px;border-radius:999px;font-size:12px;font-weight:700;background:var(--up-surface-tint);color:var(--up-text-accent)}
.c-badge.info{background:var(--up-info-tint);color:var(--up-info-text)}
.c-badge.ok{background:var(--up-success-tint);color:var(--up-success-text)}
.c-badge.bad{background:var(--up-danger-tint);color:var(--up-danger-text)}
.c-badge.purple{background:color-mix(in srgb,var(--up-chart-6) 18%,transparent);color:var(--up-chart-6)}
.c-tag{display:inline-block;margin-right:6px;padding:1px 7px;border-radius:4px;background:var(--soft);color:var(--sub);font-size:11px;font-weight:600}
.c-num{display:inline-grid;place-items:center;flex:none;width:24px;height:24px;border-radius:50%;background:var(--up-surface-brand);color:#fff;font-style:normal;font-size:12px;font-weight:800}
.c-num.sm{width:20px;height:20px;font-size:11px}

/* ---------- 바탕 · 카드 ---------- */
.c-main{max-width:1440px;margin:0 auto;padding:24px}
.c-card{background:var(--bg);border:1px solid var(--line);border-radius:var(--up-radius-panel);padding:28px 32px}
.c-two{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);gap:24px;align-items:start}
.c-two-r{grid-template-columns:minmax(0,1.5fr) minmax(320px,1fr)}
.c-form{display:flex;flex-direction:column;gap:14px;min-width:0}
.c-col{min-height:calc(100vh - 140px)}
.c-side{display:flex;flex-direction:column;gap:14px;position:sticky;top:84px}
.c-narrow{max-width:900px;margin:0 auto}
.c-eyebrow{align-self:flex-start;padding:2px 10px;border-radius:999px;background:var(--up-surface-tint);color:var(--up-text-accent);font-size:12px;font-weight:700}
.c-h1{margin:0;font-size:26px;line-height:1.3;font-weight:800;letter-spacing:-.015em}
.c-h2{margin:0;font-size:18px;font-weight:800}
.c-h2.c-sec{margin-top:10px;font-size:20px}
.c-h3{margin:6px 0 0;font-size:15px;font-weight:800}
.c-h3 small{margin-left:8px;color:var(--sub);font-weight:500;font-size:13px}
.c-lead{margin:-6px 0 4px;color:var(--sub);font-size:15px;line-height:1.6}
.c-sub{margin:0;color:var(--sub);font-size:13px;line-height:1.5}
.c-note{margin:0;color:var(--sub);font-size:14px}
.c-hint{color:var(--sub);font-size:13px;line-height:1.5}
.c-hr{width:100%;border:0;border-top:1px solid var(--line);margin:4px 0}
.c-mutetext{color:var(--up-text-tertiary)}
.c-okline{margin:0;color:var(--up-success-text);font-weight:600}
.c-empty{text-align:center;color:var(--sub)}
.c-box{padding:14px 16px;border-radius:10px;border:1px solid transparent;font-size:14px;line-height:1.55}
.c-box b{display:block;margin-bottom:2px}
.c-box p{margin:0}
.c-box.info{background:var(--up-info-tint);border-color:color-mix(in srgb,var(--up-info-line) 40%,transparent)}
.c-box.warn{background:var(--up-warning-tint);border-color:color-mix(in srgb,var(--up-warning-line) 50%,transparent)}
.c-box.warn b{color:var(--up-warning-text)}
.c-notices:empty{display:none}
.c-notices{max-width:1440px;margin:0 auto;padding:16px 24px 0}
.c-notice{display:flex;align-items:center;gap:16px;padding:14px 18px;border-radius:12px;border:1px solid transparent;font-size:15px;line-height:1.55}
.c-notice.info{background:var(--up-info-tint);border-color:color-mix(in srgb,var(--up-info-line) 40%,transparent)}
.c-notice.warn{background:var(--up-warning-tint);border-color:color-mix(in srgb,var(--up-warning-line) 50%,transparent)}
.c-notice-t{flex:1;min-width:0}
.c-notice-t p{margin:0;max-width:none}.c-notice-t p+p{margin-top:6px}
.c-notice .c-btn{flex:none}

/* ---------- 입력 ---------- */
.c-grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px}
.c-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.c-f{display:flex;flex-direction:column;gap:6px;min-width:0}
.c-f.wide{grid-column:1/-1}
.c-lb{font-weight:700;font-size:14px}
.c-lb small{margin-left:6px;color:var(--sub);font-weight:500;font-size:12px}
.req{color:var(--up-text-accent);font-style:normal}
.c-in{position:relative;display:block}
.c-form input[type=text],.c-form input[type=tel],.c-form input[type=email],.c-form input:not([type]),.c-form select,.c-form textarea,.c-review textarea{width:100%;height:46px;padding:0 14px;border:1px solid var(--up-rule-default);border-radius:var(--r);background:var(--bg);color:var(--ink);font-size:15px}
.c-form textarea,.c-review textarea{height:auto;padding:12px 14px;resize:vertical;line-height:1.55}
.c-in input{padding-right:70px!important}
.c-in textarea{padding-bottom:26px!important}
.c-cnt{position:absolute;right:12px;bottom:12px;color:var(--up-text-tertiary);font-size:12px}
.c-in input+.c-cnt{bottom:auto;top:50%;transform:translateY(-50%)}
.c-cnt.over{color:var(--up-danger-text)}
.c-f.warn textarea{border-color:var(--up-danger-line)}
.c-warn{color:var(--up-danger-text)!important}
.c-row-t small.c-miss{color:var(--up-danger-text);font-weight:600}
.c-row-t small.c-miss:empty{display:none}
.c-chips{display:flex;flex-wrap:wrap;gap:8px}
.c-chipbtn{height:40px;padding:0 16px;border:1px solid var(--up-rule-default);border-radius:999px;background:var(--bg);font-weight:600;font-size:14px;cursor:pointer}
.c-chipbtn.on{background:var(--ink);border-color:var(--ink);color:var(--up-text-inverse)}
.c-check{display:inline-flex;align-items:center;gap:8px;color:var(--sub);font-size:14px;cursor:pointer}
.c-drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:100%;min-height:96px;border:1.5px dashed var(--up-rule-default);border-radius:10px;background:var(--soft);color:var(--ink);cursor:pointer}
.c-drop span{color:var(--sub);font-size:12px}
.c-drop.over{border-color:var(--pri);background:var(--up-surface-tint)}
.c-file{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;min-height:96px;padding:10px 12px;border:1px solid var(--up-rule-default);border-radius:10px}
.c-file-img{width:72px;height:72px;object-fit:cover;border-radius:6px;background:var(--soft)}
.c-file-img.logo{object-fit:contain;padding:6px;background-color:#fff;background-image:conic-gradient(#e4e4e4 25%,#fff 0 50%,#e4e4e4 0 75%,#fff 0);background-size:12px 12px}   /* 로고 칸은 밝은 회색 체크무늬(라이트 · 다크 공통) — 다크에서 어두운 투명 로고가 묻히지 않게 */
.c-file-t{flex:1 1 120px;display:flex;flex-direction:column;min-width:0}
.c-file-t b,.c-file-t span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.c-file-t span{color:var(--sub);font-size:12px}
.c-file-act{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-left:auto}
.c-foot{display:flex;align-items:center;gap:10px;margin-top:10px;padding-top:16px;border-top:1px solid var(--line)}
.c-foot .c-note{flex:1}
.c-foot.c-grow{margin-top:auto}

/* ---------- 미리보기 iframe ---------- */
.c-pv{position:relative;overflow:hidden;background:var(--up-neutral-100);border-radius:8px}
.c-pv-wrap{position:relative;overflow:hidden;margin:0 auto}
.c-pv iframe{position:absolute;left:0;top:0;border:0;transform-origin:0 0;background:#fff}
.c-mini{border:1px solid var(--line)}
.c-pin-layer{position:absolute;inset:0;z-index:2;pointer-events:none}
.c-pin-num{position:absolute;box-shadow:0 0 0 2px #fff}
.c-legend{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.c-legend li{display:flex;align-items:center;gap:12px}
.c-legend b{min-width:72px}
.c-legend span{color:var(--sub)}

/* ---------- 1-3 스킨 ---------- */
.c-wide{display:flex;flex-direction:column;gap:18px}
.c-headrow{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.c-headrow>div:first-child{display:flex;flex-direction:column;gap:10px}
.c-headact{display:flex;gap:8px;align-items:center}
.c-seg{display:inline-flex;padding:3px;border-radius:999px;background:var(--soft);border:1px solid var(--line)}
.c-seg button{height:30px;padding:0 14px;border:0;border-radius:999px;background:transparent;color:var(--sub);font-weight:600;font-size:13px;cursor:pointer}
.c-seg button.on{background:var(--ink);color:var(--up-text-inverse)}
.c-skins{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.c-skin{display:flex;flex-direction:column;gap:8px;padding:10px 10px 14px;background:var(--bg);border:1px solid var(--line);border-radius:14px;cursor:pointer;outline-offset:2px}
.c-skin:hover{border-color:var(--up-rule-default)}
.c-skin.on{border:2px solid var(--up-surface-brand);padding:9px 9px 13px}
.c-skin-pv{aspect-ratio:4/5;border:1px solid var(--line)}      /* 높이는 skins.js fitCard 가 잰다(PC 두 화면 비율 · 모바일은 폰 두 대 높이) */
.c-skin-pv.m{background:var(--soft)}
.c-skin-pv>.c-pv-wrap{position:absolute;left:0;top:0;margin:0}
/* 카드 썸네일 한 벌(PC 한 칸 · 모바일 폰 두 칸) — 칸 자리 · 크기는 pvfast.thumbBox */
.c-th{position:absolute;inset:0;transition:opacity .15s}
.c-th.c-pv-wait{opacity:0}
.c-th-f{position:absolute;overflow:hidden;background:#fff}
.c-th-f iframe{position:absolute;left:0;top:0;border:0;transform-origin:0 0;pointer-events:none;background:#fff}
.c-th[data-dev="m"] .c-th-f{border-radius:10px;box-shadow:0 0 0 1px var(--line),0 6px 16px rgba(0,0,0,.10)}
/* 뼈대(사진이 그려지기 전) — 스킨 바탕색 면 + 이름 */
.c-sk{position:absolute;inset:0;display:flex;flex-direction:column;overflow:hidden;transition:opacity .2s}
.c-sk.off{opacity:0;pointer-events:none}
.c-sk .c-sk-hd{display:flex;align-items:center;justify-content:space-between;height:22px;padding:0 10px;border-bottom:1px solid rgba(127,127,127,.18)}
.c-sk .c-sk-hd i{display:block;width:34px;height:6px;border-radius:3px;background:currentColor;opacity:.55}
.c-sk .c-sk-hd u{display:block;width:8px;height:8px;border-radius:50%;background:var(--sk-ac)}
.c-sk .c-sk-hero{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:linear-gradient(180deg,transparent,rgba(127,127,127,.08))}
.c-sk .c-sk-hero b{font-size:17px;letter-spacing:.02em}
.c-sk .c-sk-hero s{display:block;width:44px;height:3px;background:var(--sk-ac);text-decoration:none}
.c-sk .c-sk-row{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:8px 10px 10px}
.c-sk .c-sk-row i{display:block;aspect-ratio:1;border-radius:3px;background:currentColor;opacity:.08}
.c-skin-pv.m .c-sk .c-sk-row{grid-template-columns:repeat(2,1fr)}
.c-skin-t{display:flex;justify-content:space-between;align-items:center;gap:6px;padding:4px 4px 0}
.c-skin-t b{font-size:16px}
.c-skin-tags{margin:0;padding:0 4px;font-size:13px;color:var(--ink)}
.c-skin-desc{margin:0;padding:0 4px;color:var(--sub);font-size:13px;line-height:1.5;flex:1}
.c-skin-act{display:flex;align-items:center;gap:8px;padding:0 4px}
.c-skin-act .sel{display:none;background:var(--up-surface-brand);color:#fff}
.c-skin.on .c-skin-act .sel{display:inline-flex}
.c-pickbar{display:flex;align-items:center;gap:20px;padding:20px 24px}
/* 우리 몰에 필요한 메뉴(1-3) */
.c-card.c-menus{display:flex;flex-direction:column;gap:12px;padding:18px 22px}
.c-menus-t{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:10px 16px}
.c-menus-t>div:first-child{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1 1 320px}
.c-menus-t b{font-size:17px}
.c-menus-t span{color:var(--sub);font-size:13px;line-height:1.5}
.c-menus-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.c-menu-opt{display:flex;flex-direction:column;gap:8px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--bg);min-width:0}
.c-menu-opt.on{border-color:var(--up-surface-brand);background:var(--up-surface-tint)}
.c-menu-hd{display:flex;align-items:center;min-height:24px}
.c-menu-on{display:flex;align-items:center;gap:10px;cursor:pointer;min-width:0}
.c-menu-on input{width:20px;height:20px;margin:0;flex:none;accent-color:var(--up-surface-brand)}
.c-menu-opt b{font-size:15px}
.c-menu-fix{display:flex;align-items:center;gap:8px}
.c-menu-fix i{font-style:normal;padding:0 8px;border-radius:999px;background:var(--soft);color:var(--sub);font-size:12px;font-weight:600;line-height:20px}
.c-menu-opt>small{color:var(--sub);font-size:12.5px;line-height:1.45}
.c-menu-name{display:flex;flex-direction:column;gap:4px;min-width:0}
.c-menu-name span{color:var(--sub);font-size:12px;font-weight:600}
.c-menu-name input{width:100%;min-width:0;height:38px;padding:0 10px;border:1px solid var(--up-rule-default);border-radius:8px;background:var(--bg);color:var(--ink);font-size:15px}
.c-menu-name input::placeholder{color:var(--sub);opacity:.75}
.c-menu-name input:focus{outline:2px solid var(--up-surface-brand);outline-offset:-1px;border-color:transparent}
.c-menus-fixed{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:6px;color:var(--sub);font-size:13px}
.c-menus-fixed span{margin-right:2px}
.c-menus-fixed i{font-style:normal;padding:2px 10px;border-radius:999px;background:var(--soft);color:var(--ink);font-size:12px;font-weight:600;line-height:20px}
.c-pick-t{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.c-pick-t small{color:var(--sub)}
.c-pick-t b{font-size:18px}
.c-pick-t span{color:var(--sub);font-size:13px}
.c-pick-note{max-width:380px;font-size:13px}

/* 크게 보기 */
.c-modal-back{position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(18,17,19,.45)}   /* 창 높이는 vh 가 아니라 이 판(%)에 맞춘다 — 글자를 키우는 확대(zoom)에서도 화면 안 */
.c-modal{width:min(640px,100%);flex:0 1 auto;max-height:100%;overflow:auto;display:flex;flex-direction:column;gap:14px;padding:28px 32px;background:var(--bg);border-radius:20px}
.c-mh{margin:0;font-size:22px;font-weight:800}
.c-mp{margin:0;color:var(--sub);line-height:1.65}
.c-mact{display:flex;justify-content:flex-end;align-items:center;gap:10px;margin-top:6px}
.c-bigview{width:min(1400px,100%);height:100%;padding:16px 20px;gap:12px}
.c-big-head{display:grid;grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"title tools x" "tabs tabs tabs";align-items:center;gap:10px 12px}
.c-big-title{grid-area:title;display:flex;align-items:center;gap:8px;min-width:0}
.c-big-title b{font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.c-big-title small{flex:none;color:var(--sub);font-size:12px;font-weight:600}
.c-big-arrow{flex:none;display:grid;place-items:center;width:36px;height:36px;padding:0 0 3px;border:1px solid var(--line);border-radius:50%;background:var(--bg);color:var(--ink);font-size:24px;line-height:1;cursor:pointer}
.c-big-arrow:hover{border-color:var(--ink)}
.c-big-tools{grid-area:tools;display:flex;align-items:center;gap:8px}
.c-big-x{grid-area:x}
.c-tabs.c-big-tabs{grid-area:tabs;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;min-width:0}
.c-big-tabs::-webkit-scrollbar{display:none}
.c-big-tabs button{flex:none;white-space:nowrap}
.c-pri.c-big-pick{height:36px;padding:0 16px;font-size:14px}
.c-big-pick.done{background:var(--soft);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.c-big-body{flex:1;min-height:0;display:flex}
.c-big-pv{flex:1;height:100%;}
.c-big-pv.m{max-width:420px;margin:0 auto}
.c-tabs{display:flex;gap:4px;flex-wrap:wrap}
.c-tabs button{height:34px;padding:0 14px;border:0;border-radius:8px;background:transparent;color:var(--sub);font-weight:600;cursor:pointer}
.c-tabs button.on{background:var(--soft);color:var(--ink)}
.c-tabs.pill{padding:3px;border-radius:10px;background:var(--soft)}
.c-tabs.pill button.on{background:var(--bg);box-shadow:0 0 0 1px var(--line)}
.c-tabs.line{gap:24px;border-bottom:1px solid var(--line)}
.c-tabs.line button{height:46px;padding:0 2px;border-radius:0;font-size:16px;display:inline-flex;align-items:center;gap:8px}
.c-tabs.line button.on{background:transparent;color:var(--ink);font-weight:800;box-shadow:inset 0 -2px 0 var(--up-surface-brand)}

/* 1-1 처음 안내 */
.c-onboard{width:min(760px,100%);padding:32px 36px}
.c-ob-title{font-size:26px}
.c-ob-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:0;padding:0;list-style:none}
.c-ob-steps li{display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:12px;background:var(--soft)}
.c-ob-steps b{display:flex;align-items:center;gap:6px;font-size:15px}
.c-ob-steps b i{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--ink);color:var(--up-text-inverse);font-style:normal;font-size:11px}
.c-ob-steps p{margin:0;color:var(--sub);font-size:13px;line-height:1.5}
.c-ob-art{display:grid;place-items:center;height:64px;border-radius:8px;color:var(--up-neutral-700);font-size:11px;letter-spacing:.06em}
.c-ob-art1{background:color-mix(in srgb,var(--up-chart-3) 25%,var(--bg))}
.c-ob-art2{background:color-mix(in srgb,var(--up-chart-5) 22%,var(--bg))}
.c-ob-art3{background:color-mix(in srgb,var(--up-chart-6) 22%,var(--bg))}
.c-ob-art4{background:color-mix(in srgb,var(--up-chart-1) 20%,var(--bg))}
.c-ob-act{justify-content:space-between}

/* ---------- 5-1 자료 ---------- */
.c-rows{border:1px solid var(--line);border-radius:12px;overflow:hidden}
.c-row{display:flex;align-items:center;gap:12px;padding:12px 14px;border-top:1px solid var(--line)}
.c-rows>.c-row:first-child{border-top:0}
.c-row.open{background:var(--up-surface-tint)}
.c-row-t{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.c-row-t b{font-size:15px}
.c-row-t small{color:var(--sub);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.c-row-ed{display:flex;flex-direction:column;gap:12px;padding:16px 14px 18px;border-top:1px dashed var(--line);background:var(--bg)}
.c-ed-row{display:flex;align-items:center;gap:14px}
.c-gal-row{display:flex;flex-direction:column;gap:8px}
.c-gal{display:flex;flex-wrap:wrap;gap:8px}
.c-tile{position:relative;width:72px;height:72px;border-radius:8px;overflow:hidden;background:var(--soft);border:1px solid var(--line)}
.c-tile.big{width:96px;height:96px;flex:none}
.c-tile img{width:100%;height:100%;object-fit:cover}
.c-tile .c-x{position:absolute;top:3px;right:3px;width:22px;height:22px;font-size:14px;background:rgba(255,255,255,.9);color:#333}
.c-add{display:grid;place-items:center;border:1.5px dashed var(--up-rule-default);color:var(--sub);font-size:12px;font-weight:600;cursor:pointer;text-align:center;padding:4px}
.c-add:hover{border-color:var(--pri);color:var(--ink)}
.c-filetile{display:grid;place-items:center;width:100%;height:100%;font-size:12px;font-weight:800;color:var(--sub)}
.c-filetile.sm{width:44px;height:44px;border-radius:6px;background:var(--soft)}
.c-thumbs{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.c-thumbs img{width:44px;height:44px;object-fit:cover;border-radius:6px;border:1px solid var(--line)}
.c-prod{display:flex;align-items:center;gap:12px;padding:10px;border:1px solid var(--line);border-radius:10px}
.c-prod-f{flex:1;display:grid;grid-template-columns:1.4fr 1fr;gap:8px}
.c-docrow{display:flex;align-items:center;gap:8px;min-height:46px}
.c-colorrow{display:flex;gap:8px;align-items:center}
.c-colorrow input[type=color]{width:46px;height:46px;padding:2px;border:1px solid var(--up-rule-default);border-radius:8px;background:var(--bg)}
.c-pickhead{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.c-pcards{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.c-pcard{display:flex;align-items:center;gap:10px;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--bg);text-align:left}
.c-pcard-main{flex:1;min-width:0;display:flex;align-items:center;gap:12px;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.c-pcard>.c-btn{flex:none}
.c-pcard.on{border:2px solid var(--up-surface-brand);padding:11px;background:var(--up-surface-tint)}
.c-pthumb{width:44px;height:44px;flex:none;border-radius:8px;overflow:hidden;background:var(--soft)}
.c-pthumb img{width:100%;height:100%;object-fit:cover}
.c-pcard-t{flex:1;display:flex;flex-direction:column;min-width:0}
.c-pcard-t small{color:var(--sub);font-size:12px}
.c-pcard-t b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.c-dform{display:flex;flex-direction:column;gap:14px}
.c-dform-h{display:flex;justify-content:space-between;align-items:baseline}
.c-bar{display:flex;flex-direction:column;gap:6px}
.c-bar-t{display:flex;justify-content:space-between;font-size:14px;font-weight:600}
.c-bar-t small{color:var(--sub);font-weight:500}
.c-bar-track{height:8px;border-radius:99px;background:var(--soft);overflow:hidden}
.c-bar-track i{display:block;height:100%;border-radius:99px;background:var(--up-surface-brand);transition:width .3s}
.c-left{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:4px;font-size:14px}
.c-left li::before{content:"· ";color:var(--sub)}
.c-left .c-link{color:var(--ink);font-weight:500}
.c-skincard{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--line);border-radius:12px}
.c-swatch{position:relative;width:64px;height:44px;flex:none;border-radius:6px;border:1px solid var(--line);overflow:hidden}
.c-swatch i{position:absolute;right:0;bottom:0;width:40%;height:40%}
.c-skincard-t{flex:1;display:flex;flex-direction:column}
.c-skincard-t small{color:var(--sub);font-size:12px}
.c-guide{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;font-size:14px}
.c-guide-list{margin:0;padding-left:18px;line-height:1.8;font-size:14px}

/* ---------- 5-3 보완 ---------- */
.c-memo{padding:14px 16px;border-radius:10px;background:var(--soft)}
.c-memo small{color:var(--sub)}
.c-memo p{margin:4px 0 0;font-weight:600}
.c-memo p.c-memo-due{font-weight:500;color:var(--sub)}
.c-memo p.c-memo-due b{color:var(--ink,inherit)}
.c-rv-scroll .c-memo{margin:10px 0 4px}
.c-rv-scroll .c-memo p{white-space:pre-line}
.c-fix{display:flex;flex-direction:column;gap:10px;padding:16px;border:1px solid var(--up-danger-line);border-radius:12px;background:color-mix(in srgb,var(--up-danger-tint) 45%,var(--bg))}
.c-fix-h{display:flex;align-items:center;gap:8px}
.c-reason{margin:0;color:var(--up-danger-text);font-size:14px}
.c-fix-ed{display:flex;flex-direction:column;gap:12px}
.c-sidehead{display:flex;justify-content:space-between;align-items:baseline}
.c-sidehead small{color:var(--sub)}
.c-revlist{margin:0;padding:0;list-style:none;border:1px solid var(--line);border-radius:12px}
.c-revlist li{display:flex;align-items:center;gap:10px;padding:11px 14px;border-top:1px solid var(--line);font-size:14px}
.c-revlist li:first-child{border-top:0}
.c-revlist li>span:not(.c-chip){flex:1}
.c-dot{width:7px;height:7px;border-radius:50%;background:var(--up-success-text)}
.c-dot.bad{background:var(--up-danger-text)}

/* ---------- 5-2 진행 ---------- */
.c-timeline{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin:8px 0 0;padding:0;list-style:none}
.c-timeline li{display:flex;flex-direction:column;gap:2px;padding-top:12px;border-top:4px solid var(--up-neutral-200);color:var(--up-text-tertiary)}
.c-timeline li b{font-size:14px}
.c-timeline li small{font-size:12px}
.c-timeline li.done{border-color:var(--ink);color:var(--ink)}
.c-timeline li.on{border-color:var(--up-surface-brand);color:var(--ink)}
.c-timeline li.on small{color:var(--up-text-accent);font-weight:700}
.c-jobs{display:flex;flex-direction:column;gap:8px;padding:16px;border-radius:12px;background:var(--soft)}
.c-job{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:10px;background:var(--bg)}
.c-job>span:not(.c-chip){flex:1;display:flex;flex-direction:column}
.c-job small{color:var(--sub);font-size:13px}
.c-eta{flex:1;margin:0;color:var(--sub)}
.c-eta b{margin-left:8px;color:var(--ink);font-size:17px}
.c-person{display:flex;align-items:center;gap:12px}
.c-avatar{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--soft);font-weight:800}
.c-person-t{flex:1;display:flex;flex-direction:column}
.c-person-t small{color:var(--sub);font-size:12px}
.c-log{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px;font-size:14px}
.c-log li{display:flex;gap:12px}
.c-log time{flex:none;width:76px;color:var(--up-text-tertiary);font-size:12px;padding-top:2px}
.c-dl{display:grid;grid-template-columns:minmax(0,140px) minmax(0,1fr);gap:8px 14px;margin:0;font-size:14px}
.c-dl dt{color:var(--sub);overflow-wrap:anywhere}
.c-dl dd{margin:0;min-width:0;overflow-wrap:anywhere}
.c-dl dd.pre{white-space:pre-wrap}
.c-rodetail{display:flex;flex-direction:column;gap:8px;padding:14px;border:1px solid var(--line);border-radius:12px}

/* ---------- 5-4 시안 확인 ---------- */
body[data-screen="draft"] .c-main{max-width:none;padding:0}
.c-review{display:grid;grid-template-columns:340px minmax(0,1fr);height:calc(100vh - var(--top-h,65px))}
.c-rv-left{display:flex;flex-direction:column;background:var(--bg);border-right:1px solid var(--line);min-height:0}
.c-rv-scroll{flex:1;overflow:auto;display:flex;flex-direction:column;gap:12px;padding:20px}
.c-rv-head{display:flex;justify-content:space-between;align-items:center}
.c-left-box{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-radius:10px;background:var(--soft)}
.c-left-box b{color:var(--up-text-accent);font-size:17px}
.c-rv-top,.c-rv-low{display:flex;flex-direction:column;gap:12px;min-width:0}
.c-rv-low:empty{display:none}      /* 아래 덩어리(핀 목록 · 전체 의견 · 지난 요청) — 넓은 화면은 옆 스크롤 칸 맨 아래, 좁은 화면은 draft.js placeLow 가 미리보기 아래로 옮긴다 */
.c-rv-pinbox{display:flex;flex-direction:column;gap:12px}
.c-pins{display:flex;flex-direction:column;gap:8px}
.c-pinitem{display:flex;flex-direction:column;gap:6px;padding:10px 12px;border:1px solid var(--up-rule-default);border-radius:10px}
.c-pinitem.other{opacity:.65}
.c-pinitem-h{display:flex;align-items:center;gap:8px}
.c-pinitem-h .c-link:first-of-type{flex:1;color:var(--ink);font-size:14px}
.c-del{color:var(--sub)!important;font-weight:500!important;font-size:13px}
.c-pinitem textarea{min-height:56px;font-size:14px}
.c-rv-foot{display:flex;flex-direction:column;gap:8px;padding:14px 20px;border-top:1px solid var(--line)}
.c-rv-btns{display:flex;gap:8px}
.c-rv-btns>*{flex:1}
.c-rv-batch{margin:0;color:var(--sub);font-size:13px;line-height:1.5}
.c-rv-main{display:flex;flex-direction:column;gap:12px;padding:16px 20px;min-width:0;min-height:0}
.c-rv-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.c-rv-bar .c-tabs{margin-right:auto}
.c-rv-pv{flex:1;min-height:0;border:1px solid var(--line)}
.c-rv-pv.m{max-width:440px;width:100%;margin:0 auto}
.c-pin-over{position:absolute;inset:0;z-index:3;cursor:crosshair}
.c-pin-over.ro{cursor:default}
.c-mark{position:absolute;border:2px dashed var(--up-surface-brand);border-radius:6px;pointer-events:none}
.c-mark .c-num{position:absolute;top:-12px;right:-12px;box-shadow:0 0 0 2px #fff}
.c-hist{border-top:1px solid var(--line);padding-top:10px;font-size:14px}
.c-hist summary{cursor:pointer;font-weight:700}
.c-hist-r{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.c-hist-r small{color:var(--sub)}
.c-hist-p{display:flex;align-items:flex-start;gap:8px}
.c-hist-p>span:not(.c-chip){flex:1}
.c-hist-p em{display:block;color:var(--sub);font-style:normal;font-size:13px}
.c-hist-note{margin:0;color:var(--sub)}

/* ---------- 5-5 오픈 ---------- */
.c-open{gap:16px}
.c-open-head{display:flex;align-items:center;gap:14px}
.c-open-head>div{display:flex;flex-direction:column;gap:4px}
.c-bigcheck{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--up-success-text);color:#fff;font-size:28px;font-weight:800}
.c-open-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:16px}
.c-open-grid.one{grid-template-columns:minmax(0,1fr)}
.c-bootfail{display:flex;flex-direction:column;align-items:center;gap:10px}
.c-bootfail b{color:var(--ink);font-size:18px}
.c-inner{padding:20px 22px;display:flex;flex-direction:column;gap:12px}
.c-vsteps{margin:0;padding:0;list-style:none;display:flex;flex-direction:column}
.c-vsteps li{position:relative;display:flex;align-items:flex-start;gap:14px;padding:12px 0;color:var(--up-text-tertiary)}
.c-vsteps li:not(:last-child)::after{content:"";position:absolute;left:13px;top:42px;bottom:-6px;width:2px;background:var(--up-neutral-200)}
.c-vsteps li.done:not(:last-child)::after{background:var(--ink)}
.c-vsteps li>span:not(.c-chip){flex:1;display:flex;flex-direction:column}
.c-vsteps li small{font-size:13px}
.c-stepdot{display:grid;place-items:center;width:28px;height:28px;flex:none;border-radius:50%;background:var(--up-neutral-200);color:var(--up-neutral-600);font-style:normal;font-weight:800;font-size:13px}
.c-vsteps li.done,.c-vsteps li.on{color:var(--ink)}
.c-vsteps li.done .c-stepdot{background:var(--ink);color:var(--up-text-inverse)}
.c-vsteps li.on .c-stepdot{background:var(--up-surface-brand);color:#fff}
.c-prep{background:var(--up-warning-tint);border-color:color-mix(in srgb,var(--up-warning-line) 50%,transparent)}
.c-preplist{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px}
.c-preplist li{display:flex;align-items:center;gap:10px}
.c-preplist li.done{color:var(--sub);text-decoration:line-through}
.c-box-ck{display:grid;place-items:center;width:20px;height:20px;flex:none;border:1.5px solid var(--up-rule-default);border-radius:4px;background:var(--bg);color:#fff;font-size:12px;font-weight:800}
.c-preplist li.done .c-box-ck{background:var(--up-surface-brand);border-color:var(--up-surface-brand)}
.c-row-btns{display:flex;gap:8px;flex-wrap:wrap}
.c-final{display:flex;gap:20px;padding:20px 22px;border-radius:14px;background:var(--soft);align-items:center;flex-wrap:wrap}
.c-final-t{flex:1;min-width:260px;display:flex;flex-direction:column;gap:8px}
.c-final-th{display:flex;gap:12px}
.c-final-th figure{margin:0;width:150px;display:flex;flex-direction:column;gap:6px}
.c-fthumb{height:100px}
.c-final-th figcaption{font-size:12px;color:var(--sub)}

/* ---------- 좁은 화면 ---------- */
@media (max-width:1180px){
  .c-skins{grid-template-columns:repeat(3,minmax(0,1fr))}
  .c-top{grid-template-columns:1fr auto;}
  .c-steps{grid-column:1/-1;grid-row:2;justify-content:center;overflow-x:auto}
}
@media (max-width:899px){
  .c-main{padding:12px}
  .c-notices{padding:12px 12px 0}
  .c-notice{flex-direction:column;align-items:stretch;gap:10px}
  .c-card{padding:20px 16px}
  .c-top{padding:10px 14px;gap:8px}
  .c-steps li span{display:none}
  .c-steps li.on span,.c-steps li.done:last-child span{display:inline}
  .c-steps li+li::before{width:14px;margin:0 6px}
  .c-two,.c-two-r,.c-open-grid{grid-template-columns:minmax(0,1fr)}
  .c-side{position:static}
  .c-grid2,.c-grid3,.c-pcards,.c-ob-steps,.c-ob-cards,.c-ob-choices,.c-sp,.c-sp-steps{grid-template-columns:minmax(0,1fr)}
  .c-skins{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .c-pickbar{flex-direction:column;align-items:stretch}
  .c-foot{flex-wrap:wrap}
  .c-foot .c-note{flex-basis:100%}
  /* 5-4 좁은 폭: 핀을 찍을 때마다 핀 목록(핀마다 145px)이 미리보기 위에서 늘어나 판이 밀렸다(사파리는 스크롤 고정이 없어 화면이 통째로 움직임) —
     위에서부터 머리 · 안내 · 남은 횟수 · 수정 범위(왼쪽 칸) → 미리보기 → 핀 목록 · 전체 의견 · 지난 요청(draft.js 가 이 칸으로 옮긴다) → (아래 고정 바).
     목록이 미리보기 아래에서 자라면 미리보기 자리는 그대로다. 한 줄 세로 격자(minmax(0,1fr))라 안쪽 어느 것도 칸 밖으로 못 나가고, 바깥 여백은 margin 이 아니라 padding 이다 */
  .c-review{grid-template-columns:minmax(0,1fr);height:auto;row-gap:12px}
  .c-rv-left{border-right:0;min-width:0}
  .c-rv-scroll{flex:none;overflow:visible;padding:20px 20px 0}
  .c-rv-low{padding:0 20px 16px}
  .c-rv-pv{height:70vh;flex:none}
  .c-timeline{grid-template-columns:repeat(5,minmax(60px,1fr));overflow-x:auto}
  .c-final-th{overflow-x:auto}
  .c-save,.c-actions [data-faq]{display:none}
}
@media (max-width:520px){ .c-skins{grid-template-columns:minmax(0,1fr)} }
@media (max-width:700px){
  .c-menus-row{grid-template-columns:minmax(0,1fr)}
  .c-menu-name input{height:44px;font-size:16px}
  .c-card.c-menus{padding:16px}
  .c-modal-back:has(> .c-bigview){padding:8px}
  .c-bigview{padding:12px;gap:10px;border-radius:16px}
  .c-big-head{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"title x" "tabs tabs" "tools tools";gap:8px}
  .c-big-tools .c-big-open{display:none}
  .c-tabs.c-big-tabs{-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent);padding-right:24px}      /* 탭이 옆으로 더 있다는 표시 */
  .c-big-tools .c-big-pick{flex:1}
  .c-big-x{width:36px;height:36px;font-size:20px}
}

/* 떠 있는 도움말 버튼 — 확정본 261027: 오른쪽 아래 알약(? + '도움말 · FAQ').
   바닥에 붙은 줄(1-3 · 5-1 · 5-3 폰 · 5-4 폰)이 있는 화면은 줄 위(bottom = --bar-h + 12), 없으면 24px. --bar-h 는 portal.js syncBar 가 잰 줄 높이, --demo-h 는 둘러보기 띠.
   본문(.c-main)은 맨 아래에 알약 높이 + 12px 의 여백을 둬 끝까지 내리면 오른쪽 카드 · 칩 · 글자를 안 덮는다(아래 '도움말 알약 여백') */
:root{--bar-h:0px;--demo-h:0px;--fab:48px;--fab-gap:24px}
.c-helpfab{position:fixed;right:24px;bottom:calc(var(--demo-h,0px) + max(var(--fab-gap),var(--bar-h,0px) + 12px));z-index:40;display:inline-flex;align-items:center;gap:8px;height:var(--fab);padding:0 18px 0 8px;border:0;border-radius:999px;background:var(--ink);color:var(--bg);font:700 14px/1 inherit;white-space:nowrap;box-shadow:0 6px 20px rgba(0,0,0,.18);cursor:pointer}
.c-helpfab i{display:grid;place-items:center;width:calc(var(--fab) - 16px);height:calc(var(--fab) - 16px);border-radius:50%;background:var(--bg);color:var(--ink);font-style:normal;font-size:17px;font-weight:800;line-height:1}
#app[hidden] ~ .c-helpfab,body.in-card .c-helpfab,body.chat-open .c-helpfab,body:has(.c-modal-back) .c-helpfab{display:none}   /* 의견 창이 열려 있으면 도움말 단추가 [보내기] 를 덮는다 */
body.portal .chat{z-index:45}   /* 폰 폭에서 아래 고정 단추줄(z 30)이 의견 창의 [보내기] 를 덮지 않게 — 토스트(60) 아래 */
/* 폰 폭: 도움말 알약은 글자를 두되 작게(높이 40px) — 화면 아래 단추줄(5-1 · 5-3 · 5-4)은 줄이 늘 보이게 고정하고, 알약은 그 줄 위(--bar-h + 12)로 */
@media (max-width:700px){
  :root{--fab:40px;--fab-gap:12px}
  .c-helpfab{right:12px;padding:0 14px 0 6px;gap:6px;font-size:13px}
  .c-helpfab i{font-size:15px}
  .toast{bottom:calc(var(--bar-h) + 16px);z-index:60}
  body[data-screen="materials"],body[data-screen="fix"]{--bar-h:84px}
  body[data-screen="materials"] .c-foot,body[data-screen="fix"] .c-foot{position:fixed;left:0;right:0;bottom:0;z-index:30;margin:0;padding:10px 12px;background:var(--bg);border-top:1px solid var(--line);box-shadow:0 -4px 14px rgba(0,0,0,.08)}
  body[data-screen="materials"] .c-foot .c-note,body[data-screen="fix"] .c-foot .c-note{font-size:12px;line-height:1.35}
}
/* 5-4 아래 고정 바([수정 요청 보내기] · [이 시안으로 확정]) — 한 줄 세로 배치(≤899px)에서는 화면 아래에 늘 붙인다. 아이패드 세로(768)에서는 바가 글 맨 끝에 있어 처음엔 화면 밖이었다.
   맨 아래 내용이 바 · 도움말 단추에 안 가리게 그 높이만큼 review 끝에 빈 자리(--bar-h 는 portal.js syncBar 가 잰 값, 재기 전 첫 값만 112px) */
@media (max-width:899px){
  body[data-screen="draft"]{--bar-h:112px}
  body[data-screen="draft"] .c-rv-foot{position:fixed;left:0;right:0;bottom:0;z-index:30;padding:10px 12px;background:var(--bg);box-shadow:0 -4px 14px rgba(0,0,0,.08)}
  body[data-screen="draft"] .c-review::after{content:'';height:calc(var(--bar-h) + var(--fab) + 24px)}
}
.c-prepck{display:flex;align-items:center;gap:10px;cursor:pointer}.c-prepck input{width:28px;height:28px;accent-color:var(--pri)}

/* 자동 점검(checks.js) — 칸 옆에 바로 보이는 이유: 문제(fix) = 빨강, 참고(hint) = 회색 */
.c-chkbox{display:flex;flex-direction:column;gap:2px}
.c-chkbox:empty{display:none}
.c-prod-f .c-chkbox{grid-column:1/-1}
.c-chk{display:block;font-size:13px;line-height:1.5}
.c-chk.fix{color:var(--up-danger-text);font-weight:600}
.c-chk.hint{color:var(--sub)}
.c-tile.chk-fix{outline:2px solid var(--up-danger-line);outline-offset:-2px}
.c-tile.chk-hint{outline:2px dashed var(--up-rule-default);outline-offset:-2px}
.c-need{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px;font-size:14px}
.c-need li{display:flex;flex-direction:column;gap:2px}
.c-need .c-link{align-self:flex-start;color:var(--ink);font-weight:600}

/* ---------- 261027: 머리말 단계 누르기 · 돌아가기 줄 ---------- */
.c-stepbtn{display:flex;align-items:center;gap:7px;padding:0;border:0;background:none;color:inherit;font:inherit;cursor:pointer;white-space:nowrap}
.c-stepbtn:hover span{text-decoration:underline}
.c-stepbtn:focus-visible{outline:2px solid var(--up-surface-brand);outline-offset:3px;border-radius:6px}
.c-crumb{display:flex;align-items:center;gap:6px 16px;flex-wrap:wrap}
.c-crumb .c-link{font-size:14px}
.c-box.bad{background:var(--up-danger-tint);border-color:color-mix(in srgb,var(--up-danger-line) 50%,transparent);color:var(--up-danger-text)}
.c-box.bad p{font-weight:700}

/* 1-1 온보딩 3장 */
.c-ob-dots{display:flex;justify-content:center;gap:8px;margin:0;padding:0;list-style:none}
.c-ob-dots li i{display:block;width:8px;height:8px;border-radius:50%;background:var(--up-neutral-300)}
.c-ob-dots li.on i{width:24px;border-radius:99px;background:var(--up-surface-brand)}
.c-ob-dots li.done i{background:var(--ink)}
.c-ob-choices{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.c-ob-choice{display:flex;align-items:flex-start;gap:12px;padding:18px;border:1px solid var(--up-rule-default);border-radius:14px;background:var(--bg);cursor:pointer}
.c-ob-choice.on{border:2px solid var(--up-surface-brand);padding:17px;background:var(--up-surface-tint)}
.c-ob-choice input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--pri);flex:none}
.c-ob-choice span{display:flex;flex-direction:column;gap:4px}
.c-ob-choice b{font-size:16px;line-height:1.4}
.c-ob-choice small{color:var(--sub);font-size:13px;line-height:1.5}
.c-ob-warn{margin:0;color:var(--up-warning-text);font-size:14px;font-weight:600}
.c-ob-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:0;padding:0;list-style:none}
.c-ob-cards li{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:16px;border-radius:12px;background:var(--soft)}
.c-ob-cards b{display:flex;align-items:center;gap:8px;font-size:15px}
.c-ob-cards b i{display:inline-grid;place-items:center;width:22px;height:22px;flex:none;border-radius:50%;background:var(--ink);color:var(--up-text-inverse);font-style:normal;font-size:12px}
.c-ob-cards p{margin:0;color:var(--sub);font-size:13px;line-height:1.55}
.c-modal p{max-width:none}
.c-ob-band p{font-weight:600}
.c-ob-btns{display:inline-flex;gap:10px;align-items:center}

/* 5-1 상세 2제품 · 주력 상품 고르기 */
.c-linkrow{display:flex;align-items:center;gap:10px;min-height:46px;flex-wrap:wrap}
.c-linked{display:inline-flex;align-items:center;gap:8px;font-weight:600}
.c-pickmodal{width:min(560px,100%)}
.c-pick-list{display:flex;flex-direction:column;gap:8px;max-height:52vh;overflow:auto}
.c-pick-row{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--bg);color:inherit;font:inherit;text-align:left;cursor:pointer}
.c-pick-row:hover:not(:disabled){border-color:var(--ink)}
.c-pick-row.on{border:2px solid var(--up-surface-brand);padding:9px 11px;background:var(--up-surface-tint)}
.c-pick-row:disabled{opacity:.5;cursor:default}
.c-pick-t{flex:1;min-width:0;display:flex;flex-direction:column}
.c-pick-t b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.c-pick-t small{color:var(--sub);font-size:12px}

/* 5-1-3 제출 팝업 */
.c-submitpop{width:min(860px,100%)}
.c-sp{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(220px,1fr);gap:24px;align-items:start}
.c-sp-main{display:flex;flex-direction:column;gap:12px;min-width:0}
.c-sp-lock p{margin:0}
.c-sp-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0;padding:0;list-style:none}
.c-sp-steps li{display:flex;flex-direction:column;gap:6px;padding:12px;border-radius:12px;background:var(--soft)}
.c-sp-steps b{display:flex;align-items:center;gap:6px;font-size:14px}
.c-sp-steps b i{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--ink);color:var(--up-text-inverse);font-style:normal;font-size:11px}
.c-sp-steps p{margin:0;color:var(--sub);font-size:12px;line-height:1.5}
.c-sp-sum{padding:16px 18px;border:1px solid var(--line);border-radius:14px;background:var(--bg)}
.c-sp-sum ul{margin:8px 0 0;padding:0;list-style:none;display:flex;flex-direction:column}
.c-sp-sum li{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:10px 0;border-top:1px solid var(--line);font-size:14px}
.c-sp-sum li:first-child{border-top:0}
.c-sp-sum li span{color:var(--sub)}
.c-sp-sum li b{text-align:right}
.c-tick{margin-right:4px;color:var(--up-success-text);font-style:normal}

/* 5-4 확정 동의 · 수정 범위 */
.c-agree{align-items:flex-start;padding:12px 14px;border-radius:10px;background:var(--soft);color:var(--ink);line-height:1.55}
.c-agree input{width:20px;height:20px;margin-top:1px;flex:none;accent-color:var(--pri)}
.c-scope p{font-size:13px}
@media (max-width:899px){
  .c-ob-choices,.c-ob-cards,.c-sp,.c-sp-steps{grid-template-columns:minmax(0,1fr)}
  .c-ob-dots{margin-top:2px}
  .c-onboard,.c-submitpop{padding:22px 18px}
  .c-pcard{flex-wrap:wrap}
  .c-pcard-main{flex:1 1 100%}
  .c-pcard>.c-btn{margin-left:auto}
  .c-pcard-t small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}

/* ---------- 둘러보기 모드(portal.html?demo=1 · client/demo.js) — 아래 고정 띠 .c-demo ----------
   띠 높이 = --demo-h. 이미 아래에 붙어 있는 것(5-1 · 5-3 · 5-4 단추줄 · 도움말 단추 · 알림 · 의견 창 · 창)은 띠만큼 위로 올린다 */
body.c-demo-on{--demo-h:56px;padding-bottom:var(--demo-h)}
body.c-demo-on #btnLogout,body.c-demo-on .c-save{display:none}
.c-demo{position:fixed;left:0;right:0;bottom:0;z-index:70;box-sizing:border-box;height:var(--demo-h);display:flex;align-items:center;gap:10px;padding:0 14px;background:var(--ink);color:var(--bg);box-shadow:0 -4px 16px rgba(0,0,0,.2)}
.c-demo-tag{order:0;flex:none;display:flex;flex-direction:column;gap:2px;margin:0;max-width:260px;font-size:12px;line-height:1.3}
.c-demo-tag b{font-size:13px}
.c-demo-tag span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:.75}
.c-demo-nav{order:1;flex:none;height:36px;padding:0 14px;border:1px solid color-mix(in srgb,var(--bg) 45%,transparent);border-radius:999px;background:transparent;color:inherit;font:700 14px/1 inherit;cursor:pointer}
.c-demo-nav:last-child{order:3}
.c-demo-nav:disabled{opacity:.35;cursor:default}
.c-demo-strip{order:2;flex:1;min-width:0;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:2px 0}
.c-demo-strip::-webkit-scrollbar{display:none}
.c-demo-strip button{flex:none;height:34px;padding:0 12px;border:1px solid color-mix(in srgb,var(--bg) 30%,transparent);border-radius:999px;background:transparent;color:inherit;font:600 13px/1 inherit;white-space:nowrap;cursor:pointer}
.c-demo-strip button.on{background:var(--bg);color:var(--ink);border-color:var(--bg)}
.c-demo button:focus-visible{outline:2px solid var(--bg);outline-offset:2px}
body.c-demo-on .c-modal-back{bottom:var(--demo-h)}
body.c-demo-on .c-modal{max-height:calc(100vh - 32px - var(--demo-h))}
body.c-demo-on .c-bigview{height:calc(100vh - 32px - var(--demo-h))}
body.c-demo-on .chat{bottom:var(--demo-h)}
body.c-demo-on.chat-open .c-helpfab{display:none}   /* 의견 창이 열리면 도움말 단추가 [보내기]를 가리지 않게 */
body.c-demo-on .toast{bottom:calc(var(--demo-h) + 24px)}
@media (min-width:900px){ body.c-demo-on .c-review{height:calc(100vh - var(--top-h,65px) - var(--demo-h))} }
/* 폰 · 작은 태블릿: 두 줄(위 = ← 이전 · 지금 화면 · 다음 →, 아래 = 화면 단추 줄) */
@media (max-width:767px){
  body.c-demo-on{--demo-h:100px}
  .c-demo{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:40px 38px;gap:6px 8px;align-content:center;padding:6px 10px}
  .c-demo-nav{order:0;grid-row:1;height:38px;padding:0 12px}
  .c-demo-nav:first-child{grid-column:1}
  .c-demo-nav:last-child{grid-column:3}
  .c-demo-tag{grid-column:2;grid-row:1;max-width:none;align-items:center;text-align:center;min-width:0}
  .c-demo-tag span{max-width:100%}
  .c-demo-strip{grid-column:1/-1;grid-row:2;order:0}
}
@media (max-width:700px){
  body.c-demo-on .toast{bottom:calc(var(--bar-h) + var(--demo-h) + 16px)}
  body.c-demo-on[data-screen="materials"] .c-foot,body.c-demo-on[data-screen="fix"] .c-foot{bottom:var(--demo-h)}
}
@media (max-width:899px){ body.c-demo-on[data-screen="draft"] .c-rv-foot{bottom:var(--demo-h)} }

/* ---------- 홈페이지에서 가져오기 (1-2) · 진행 표시 · 사용자 메뉴 · 비밀번호 · FAQ · 인앱 안내 (batch2) ---------- */
.c-harvest{display:flex;flex-direction:column;gap:10px;margin:0 0 18px;padding:16px 18px;border:1px solid color-mix(in srgb,var(--up-info-line) 40%,transparent);border-radius:12px;background:var(--up-info-tint)}
.c-harvest-t{display:flex;flex-direction:column;gap:2px}
.c-harvest-t b{font-size:16px;font-weight:800}
.c-harvest-t small{color:var(--sub);font-size:13px;line-height:1.5}
.c-harvest-row{display:flex;gap:8px;align-items:stretch}
.c-form .c-harvest-row input{flex:1;min-width:0;height:46px}
.c-harvest-row .c-btn{height:46px;flex:none;min-width:104px}
.c-harvest-msg{margin:0;min-height:1.2em;font-size:14px;line-height:1.5;color:var(--sub)}
.c-harvest-msg:empty{display:none}
.c-harvest-msg.bad{color:var(--up-danger-text);font-weight:600}
.c-harvest-msg.busy{color:var(--ink)}

.c-spin{display:inline-block;flex:none;width:16px;height:16px;border:2px solid color-mix(in srgb,currentColor 25%,transparent);border-top-color:currentColor;border-radius:50%;animation:c-spin .8s linear infinite}
@keyframes c-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.c-spin{animation-duration:2.4s}}
.c-busy{display:inline-flex;align-items:center;justify-content:center;gap:8px;color:var(--sub);cursor:progress}
[data-slot].c-busy{display:flex;min-height:96px;border:1.5px dashed var(--up-rule-default);border-radius:10px;background:var(--soft);font-size:14px;font-weight:600}
.c-tile.c-busy{flex-direction:column;gap:4px;font-size:11px;line-height:1.2;text-align:center;padding:4px;width:auto;min-width:72px}

.c-user{position:relative}
.c-userbtn{max-width:170px;gap:6px;padding:0 10px}
.c-userbtn span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.c-userbtn i{font-style:normal;font-size:11px;color:var(--up-text-tertiary)}
.c-usermenu{position:absolute;right:0;top:calc(100% + 6px);z-index:50;min-width:220px;display:flex;flex-direction:column;padding:6px;background:var(--bg);border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.14)}
.c-usermenu[hidden]{display:none}
.c-usermenu-id{margin:0;padding:8px 10px 10px;border-bottom:1px solid var(--line);color:var(--sub);font-size:12px;word-break:break-all}
.c-usermenu button{height:42px;padding:0 10px;border:0;border-radius:8px;background:transparent;color:var(--ink);font:600 14px/1 inherit;text-align:left;cursor:pointer}
.c-usermenu button:hover,.c-usermenu button:focus-visible{background:var(--soft)}

.c-pwmodal{width:min(440px,100%)}
.c-pwform{display:flex;flex-direction:column;gap:14px}
.c-pwform input[type=password]{width:100%;height:46px;padding:0 14px;border:1px solid var(--up-rule-default);border-radius:var(--r);background:var(--bg);color:var(--ink);font-size:16px}
.c-pwerr{margin:0;min-height:1.3em;color:var(--up-danger-text);font-size:14px;font-weight:600}
.c-pwerr:empty{min-height:0}

.c-faqmodal{width:min(680px,100%)}
.c-faq{display:flex;flex-direction:column;gap:8px}
.c-faq-i{border:1px solid var(--line);border-radius:12px;background:var(--bg)}
.c-faq-i[open]{background:var(--soft)}
.c-faq-i summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;min-height:52px;font-weight:700;font-size:16px;cursor:pointer;list-style:none}
.c-faq-i summary::-webkit-details-marker{display:none}
.c-faq-i summary::after{content:"+";flex:none;color:var(--up-text-tertiary);font-size:20px;font-weight:500}
.c-faq-i[open] summary::after{content:"−"}
.c-faq-i p{margin:0;padding:0 16px 14px;color:var(--sub);line-height:1.7;font-size:15px}
.c-faq-i p+p{margin-top:-4px}

.c-login-inapp{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0;padding:10px 12px;border-radius:10px;background:var(--up-info-tint);font-size:13px;font-weight:600;line-height:1.4}
.c-login-inapp[hidden]{display:none}

/* 인앱 브라우저(카카오톡 · 삼성 인터넷 …)는 주소창이 접히고 펼쳐지며 100vh 가 실제 보이는 높이보다 커진다 — 가능하면 dvh 로, 아래 고정 줄은 안전 영역만큼 띄운다 */
@supports (height:100dvh){
  .c-login,.empty-proj{min-height:100dvh}
}
@media (max-width:700px){
  body[data-screen="materials"] .c-foot,body[data-screen="fix"] .c-foot{padding-bottom:calc(10px + env(safe-area-inset-bottom,0px))}
}
@media (max-width:899px){
  body[data-screen="draft"] .c-rv-foot{padding-bottom:calc(10px + env(safe-area-inset-bottom,0px))}
  .c-userbtn{max-width:118px;padding:0 8px}
  .c-brand b{white-space:nowrap}
  .c-harvest-row{flex-direction:column}
  .c-form .c-harvest-row input{flex:none;width:100%}
  .c-harvest-row .c-btn{width:100%}
  .c-usermenu{position:fixed;left:12px;right:12px;top:58px;min-width:0}
}
@media (min-width:900px) and (max-width:1400px){
  .c-top{gap:12px;padding-left:20px;padding-right:20px}
  .c-steps li+li::before{width:14px;margin:0 6px}
  .c-userbtn{max-width:150px}
}

/* ---------- 7~17 (페르소나 시험 뒤) ---------- */
/* 8: 900~1240 폭에서 상세 제품 카드 두 칸이 왼쪽 칸을 넘쳐 [고르기]가 오른쪽 패널 밑에 깔렸다 — 칸이 줄어들 수 있게 하고, 좁은 폭에선 세로로 쌓는다 */
.c-pcards{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:1239px){ .c-pcards{grid-template-columns:minmax(0,1fr)} }
.c-pcard-t b{max-width:100%}

/* 9: 폰에서도 저장 표시가 보이게(작게) */
@media (max-width:899px){
  .c-save{display:block;font-size:11px;line-height:1.3}
  .c-brand{min-width:0}
}

/* 7: 글자 로고 */
.c-logotext{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--soft)}
.c-logotext span{display:flex;flex-direction:column;gap:2px;min-width:0}
.c-logotext small{color:var(--sub);font-size:12px;line-height:1.5}
.c-logo-none{display:inline-flex;align-items:center;min-height:44px;font-size:14px}

/* 11: 두 창이 부딪혔을 때 */
.c-confmodal{width:min(560px,100%)}
.c-conf{display:flex;flex-direction:column;gap:10px;margin:0;padding:0;list-style:none}
.c-conf li{display:flex;flex-direction:column;gap:3px;padding:10px 12px;border-radius:10px;background:var(--soft);font-size:14px;line-height:1.5;min-width:0}
.c-conf-mine{color:var(--ink);word-break:break-word}
.c-conf-their{color:var(--sub);word-break:break-word}
.c-conf-more{color:var(--sub)}

/* 12: 1-2 대표 사진 바로 점검 */
.c-heronote{display:flex;flex-direction:column;gap:2px}
.c-heronote:empty{display:none}

/* 15: 손가락으로 누르는 것은 44px 이상 */
.c-stepbtn{min-height:44px;min-width:44px}
.c-left li .c-link,.c-need li .c-link,.c-crumb .c-link,.c-link[data-back]{display:inline-flex;align-items:center;min-height:44px}
.c-x{position:relative}
.c-tile .c-x{position:absolute}
.c-x::after{content:"";position:absolute;inset:-9px}
.c-tile .c-x::after{inset:-11px}
.c-check{min-height:44px}
.c-check input{width:22px;height:22px;flex:none}
.c-check-row{display:flex;width:100%;align-items:center;gap:10px;cursor:pointer}
@media (pointer:coarse),(max-width:899px){
  .c-btn{min-height:44px}
  .c-btn.c-sm{height:44px;padding:0 16px}
  .c-chipbtn{height:44px}
}

/* 17: 폰에서 제출 확인 창 — 단추줄이 잘리지 않게 창을 스크롤하고 단추줄은 아래에 붙인다 */
@media (max-width:700px){
  .c-submitpop{padding:20px 16px 0}
  .c-submitpop .c-mact{position:sticky;bottom:0;z-index:1;margin:6px -16px 0;padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));background:var(--bg);border-top:1px solid var(--line)}
  .c-submitpop .c-mact .c-big,.c-submitpop .c-mact .c-big2{flex:1;height:48px;padding:0 12px}
}


/* ---------- 페르소나 2차 뒤 (고객 화면) ---------- */
/* 2: 아래 고정 줄(1-3 [이 스킨으로 시작하기] · 5-1 · 5-3 · 5-4 단추줄) 위로 도움말 단추 · 토스트를 올린다 — --bar-h 는 portal.js syncBar 가 잰 높이(모든 폭).
   1-3 의 줄은 PC 에서도 아래에 붙여 늘 보이게(sticky), 줄이 없는 화면은 맨 아래 내용이 도움말 단추에 안 가리게 여백 */
.toast{bottom:calc(var(--bar-h,0px) + 24px)}
@media (min-width:701px){
  .c-pickbar{position:sticky;bottom:12px;z-index:30;box-shadow:0 6px 24px rgba(0,0,0,.14)}
}
body.c-demo-on .toast{bottom:calc(var(--bar-h,0px) + var(--demo-h) + 24px)}

/* 10: 손가락 · 마우스로 누르는 × 는 44px 상자(눈에 보이는 동그라미만 작게) · 머리말 단추(PC) 44px · 5-3 [문의하기] */
.c-x{width:44px;height:44px;box-sizing:border-box;border:9px solid transparent;background-clip:padding-box;font-size:15px}
.c-x::after{display:none}
.c-tile .c-x{top:0;right:0;width:44px;height:44px;border-width:11px;font-size:13px}
.c-tile .c-x::after{display:none}
@media (min-width:900px){
  .c-top .c-btn{height:44px}
  .c-userbtn{min-height:44px}
  .c-seg button{height:36px}
}
.c-ask{margin-top:10px;height:44px}

/* 8: 1-2 필수 칸이 비었을 때 */
.c-fielderr{color:var(--up-danger-text);font-size:13px;font-weight:600;line-height:1.4}
.c-form input[aria-invalid="true"]{border-color:var(--up-danger-line)}

/* 6: 글자를 크게 · 좁은 화면 — 머리말이 겹치지 않게 줄을 넘기고, 단계 줄은 가로로 밀어 볼 수 있게 · 제출 확인 창 단추줄은 창 안 아래에 붙인다 */
@media (max-width:899px){
  .c-top{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
  .c-brand{flex:1 1 120px;min-width:0}
  .c-actions{flex:0 1 auto;margin-left:auto;flex-wrap:wrap;justify-content:flex-end;gap:6px}
  .c-steps{order:3;flex:1 1 100%;min-width:0;justify-content:flex-start;overflow-x:auto;scrollbar-width:none}
  .c-steps::-webkit-scrollbar{display:none}
  .c-steps li{flex:none}
  .c-steps li:first-child{margin-left:auto}
  .c-steps li:last-child{margin-right:auto}
  .c-steps li+li::before{width:10px;margin:0 3px}
}
@media (max-width:359px){
  .c-steps li.on span,.c-steps li.done:last-child span{display:none}   /* 아주 좁으면 숫자만 — 현재 단계 이름은 맨 위 줄 아래 제목에 있다 */
  .c-userbtn{max-width:96px}
}
.c-submitpop{padding-bottom:0}
.c-submitpop .c-mact{position:sticky;bottom:0;z-index:1;margin:6px -32px 0;padding:12px 32px calc(12px + env(safe-area-inset-bottom,0px));background:var(--bg);border-top:1px solid var(--line)}
@media (max-width:899px){ .c-submitpop .c-mact{margin-left:-18px;margin-right:-18px;padding-left:18px;padding-right:18px} }
@media (max-width:700px){ .c-submitpop .c-mact{margin-left:-16px;margin-right:-16px;padding-left:16px;padding-right:16px} }

/* 6(이어서): 아주 좁은 화면(글자를 키운 폰 포함) — 머리말은 위에서 한 번만(따라다니지 않게), 단계는 숫자만, 5-2 진행 줄은 세로로 */
@media (max-width:520px){
  .c-steps li+li::before{display:none}
  .c-steps li{margin:0 2px}
  .c-timeline{grid-template-columns:minmax(0,1fr);gap:0;overflow:visible}
  .c-timeline li{flex-direction:row;align-items:baseline;justify-content:space-between;gap:8px;padding:8px 0 8px 12px;border-top:0;border-left:4px solid var(--up-neutral-200)}
  .c-timeline li.done{border-color:var(--ink)}
  .c-timeline li.on{border-color:var(--up-surface-brand)}
}
@media (max-width:399px){
  .c-top{position:static}
  .c-steps li.on span,.c-steps li.done:last-child span{display:none}
}

/* ---------- 페르소나 3차 뒤 (고객 화면) ---------- */
/* 6: 홈페이지에서 가져와 채운 칸의 '가져옴' 칩 — 고치면 사라진다 */
.c-got{display:inline-flex;align-items:center;margin-left:6px;padding:1px 8px;border-radius:999px;background:var(--up-surface-tint,var(--soft));color:var(--up-surface-brand,var(--ink));font-size:12px;font-weight:700;font-style:normal;vertical-align:1px}
.c-tag.got{background:var(--up-surface-tint,var(--soft));color:var(--up-surface-brand,var(--ink));font-weight:700}
/* 2: 스킨을 고르기 전의 3단계 — 누르면 안내만 한다(회색) */
.c-stepbtn[aria-disabled="true"]{cursor:not-allowed;opacity:.55}
/* 11: PC 에서 마우스로 누르는 작은 단추도 40px 이상 — PC/모바일 토글 · 5-1 줄 단추 · 1-3 크게 보기 */
.c-seg button{height:40px;min-width:56px}
.c-btn.c-sm{height:40px;padding:0 14px}
@media (pointer:coarse),(max-width:899px){
  .c-seg button{height:44px}
  .c-btn.c-sm{height:44px;padding:0 16px}
}
/* ---------- 페르소나 4차 뒤 (고객 화면) ---------- */
/* 5: 글자를 150% 로 키운 PC — 머리말이 한 줄에 안 들어가면 단추(매뉴얼 · 임시저장 …)가 단계 표시를 덮지 않고 다음 줄로 내려간다.
   폭 판단을 미디어 쿼리 대신 flex-wrap 에 맡긴다(브라우저 확대든 글자 크기든 같게). 900px 아래는 위의 좁은 화면 규칙이 그대로 */
@media (min-width:900px){
  .c-top{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px}
  .c-brand{flex:1 1 160px;min-width:0}
  .c-steps{flex:0 1 auto;min-width:0;max-width:100%;justify-content:flex-start;overflow:visible}
  .c-actions{flex:0 1 auto;margin-left:auto;flex-wrap:wrap;justify-content:flex-end}
}
/* 도움말 알약 여백 — 본문 맨 아래에 알약 높이 + 12px(알약이 뜬 높이 포함). 바닥에 붙은 줄(--bar-h)이 있으면 그 위로 알약이 뜨니 그만큼 더.
   그래서 끝까지 내리면 오른쪽 카드 · 칩 · 글자를 알약이 덮지 않는다. 5-4 는 자기 칸(아래 .c-review · .c-rv-main)이 따로 맞춘다 */
body.portal:not([data-screen="draft"]) .c-main{padding-bottom:calc(max(var(--fab-gap),var(--bar-h,0px) + 12px) + var(--fab) + 12px)}
/* 5-4 PC · 큰 태블릿: 단추 줄은 왼쪽 칸 맨 아래에만 있고(알약은 오른쪽), 알약이 미리보기 오른쪽 아래를 덮지 않게 미리보기 칸 아래에 그만큼 비워 둔다 */
@media (min-width:900px){
  body[data-screen="draft"] .c-rv-main{padding-bottom:calc(var(--demo-h,0px) + var(--fab-gap) + var(--fab) + 12px)}
}
/* 7: 제출한 자료 · 제출 전 한눈에 보기 */
.c-sheet{margin:0 0 18px}
.c-sheet .c-h3{margin:14px 0 8px}
.c-sheet .c-dl dd.pre{white-space:pre-wrap}
.c-sheet .c-thumbs{margin-top:4px}
.c-sheetrow{display:flex;align-items:center;justify-content:flex-end;gap:12px;flex-wrap:wrap;margin-top:22px}   /* 오른쪽 — 왼쪽 아래의 도움말 단추(?)가 가리지 않게 */
.c-sheetmodal{width:min(780px,100%)}
.c-sheetbody{min-width:0}
.c-sheet-h{display:flex;align-items:center;justify-content:space-between;gap:12px}
.c-sheet-h .c-mh{margin:0}

/* ---------- 페르소나 5차 뒤 (고객 화면) ---------- */
/* D: 제출 창 — [제출하기]가 가장 큰 주황 단추, [다시 확인하기]는 테두리 단추(확정본 261027) */
.c-submitpop .c-mact{gap:12px;align-items:center}
@media (max-width:700px){
  .c-submitpop .c-mact .c-sp-back{flex:none}
  .c-submitpop .c-mact .c-sp-go{flex:1;min-width:0;height:50px;padding:0 16px}
}

/* G: 손가락 44px — 5-4 페이지 탭 · 핀 [삭제] · 핀 글자 위 영역 · 5-5 준비물 체크(줄 전체) */
.c-tabs.pill button{height:44px}
.c-pinitem-h .c-link{display:inline-flex;align-items:center;min-height:44px}
.c-pinitem-h .c-del{justify-content:center;min-width:44px;padding:0 6px}
.c-preplist li{min-height:44px}
.c-prepck{flex:1;min-height:44px;width:100%}
.c-prepck input{width:28px;height:28px;flex:none}   /* 5-5 준비물 체크 — 손가락으로 누르는 상자 28px(줄 전체는 44px 그대로) */

/* E: 5-4 핀 글 — 좁은 화면(아이패드 세로 · 폰)에서 화면에 떠 있는 작은 패널. 스크롤 자리가 그대로라 핀을 찍을 때마다 위로 튀지 않는다 */
.c-pinpop{position:fixed;z-index:38;left:50%;bottom:10px;transform:translateX(-50%);width:min(560px,calc(100% - 24px));display:flex;flex-direction:column;gap:8px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--bg);box-shadow:0 10px 32px rgba(0,0,0,.22)}
.c-pinpop.top{top:8px;bottom:auto}
.c-pinpop-h{display:flex;align-items:center;gap:10px}
.c-pinpop-h b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}
.c-pinpop textarea{width:100%;min-height:64px;padding:10px 12px;border:1px solid var(--up-rule-default);border-radius:var(--r);background:var(--bg);color:var(--ink);font:inherit;font-size:16px;line-height:1.5;resize:none}
body:has(.c-pinpop) .c-helpfab{display:none}

/* ---------- 페르소나 7차 뒤 (고객 화면) ---------- */
:root{--demo-h:0px}   /* 둘러보기 띠가 없으면 0 — 아래 여백 계산이 늘 같은 식으로 */
/* 3: 폰 5-1 주력 상품 카드 — 사진 · 이름 · 가격 · × 가 한 줄에 있으면 이름 칸 63px · 가격 칸 45px 로 쪼그라든다.
   좁은 폭에서는 이름이 윗줄 전체 폭, 사진 · 가격이 다음 줄이 되게 격자로 쌓는다(칸을 감싼 .c-prod-f 는 display:contents 로 풀어 안의 칸이 격자에 바로 놓이게) */
@media (max-width:640px),(min-width:900px) and (max-width:1060px){      /* 900~1060 = 오른쪽 패널이 붙어 왼쪽 칸이 좁은 폭(이름 칸 121px) */
  /* 10차: 격자는 글자를 키워 유효 폭이 300 쯤 되면 가격 칸이 53px 로 줄어 "1,290,000원" 이 잘렸다 — 줄바꿈이 되는 flex 로.
     윗줄 = 이름 + ×(이름이 남는 폭 전부), 아랫줄 = 사진(96px) + 가격(최소 110px). 가격이 110px 도 안 남으면 사진 아래로 내려가 한 줄 전체 폭을 쓴다 */
  .c-prod{display:flex;flex-wrap:wrap;align-items:flex-start;gap:8px 12px}
  .c-prod-f{display:contents}
  .c-prod-f>input:nth-of-type(1){order:1;flex:1 1 calc(100% - 56px);min-width:0;width:auto}
  .c-prod>.c-x{order:1;flex:none;align-self:start}
  .c-prod>.c-tile{order:2;flex:none}
  .c-prod-f>input:nth-of-type(2){order:3;flex:1 1 110px;min-width:110px;width:auto;text-overflow:ellipsis}      /* 안내 글("가격 · 선택 …")이 길면 …로 */
  .c-prod-f>.c-chkbox{order:4;flex:1 1 100%}
}

/* 8: 아이패드 세로 5-4 — 도움말 단추(?)가 미리보기 왼쪽 아래를 덮고 고정 바가 판 아래를 덮어 그 자리에는 표시(핀)를 찍을 수 없었다.
   미리보기 아래에 (고정 바 높이 + 둘러보기 띠 + 도움말 단추 + 단추가 뜬 간격)만큼 빈 자리를 둬, 미리보기 맨 아래까지 올려 놓고 누를 수 있게 */
@media (max-width:899px){
  body[data-screen="draft"] .c-rv-main{padding-bottom:calc(var(--bar-h,0px) + var(--demo-h) + var(--fab) + 24px)}
}
/* 8: 둘러보기 띠(아래에 고정)가 1-3 아래 바(sticky) 를 덮었다 — 바는 띠 위에서 12px 띄운다 */
@media (min-width:701px){
  body.c-demo-on .c-pickbar{bottom:calc(var(--demo-h) + 12px)}
}
/* 5-5 결제(PG) 준비 박스 — 직원이 A-8 에서 고른 상태를 완료 · 진행 · 대기로(준비물 체크는 없음) */
.c-pg-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.c-pg-head .c-h2{margin:0}
.c-pgsteps li{padding:8px 0;align-items:center}
.c-pgsteps li:not(:last-child)::after{left:11px;top:32px;bottom:-8px}
.c-pgsteps .c-stepdot{width:24px;height:24px;font-size:11px;background:var(--bg);border:2px solid var(--up-neutral-200)}
.c-pgsteps li.done .c-stepdot{background:var(--ink);border-color:var(--ink)}
.c-pgsteps li.on .c-stepdot{background:var(--bg);border-color:var(--up-surface-brand);color:var(--up-surface-brand)}
.c-pgsteps li small{font-size:12.5px}

/* ---------- 확정본 261027 나란히 비교 뒤 (10/29) ---------- */
/* 미리보기: 새 iframe 은 다 그려질 때까지 보이지 않고(ui.preview), 그려지면 나타난다 */
.c-pv iframe{transition:opacity .15s}
.c-pv iframe.c-pv-wait{opacity:0}

/* 5-1 사진 칸의 × — 큰 흰 원이 사진 가운데를 덮던 것: 모서리의 작은 원(보이는 지름 28px), 누르는 영역은 그대로 44px(바깥으로 6px 나온다) */
.c-tile{overflow:visible}
.c-tile img{border-radius:7px}
.c-tile .c-x{top:-6px;right:-6px;width:44px;height:44px;border-width:8px;font-size:15px;background:rgba(255,255,255,.96);color:#333;box-shadow:inset 0 0 0 1px rgba(0,0,0,.14)}
.c-tile .c-x:hover{background:var(--up-danger-tint);color:var(--up-danger-text)}

/* 5-1 오른쪽 '남은 항목' 줄 간격 48 → 32px(마우스) — 손가락(폰 · 태블릿)은 44px 누르는 칸을 그대로 */
.c-left li .c-link{min-height:28px}
@media (pointer:coarse),(max-width:899px){ .c-left li .c-link{min-height:44px} }
/* 5-1 '있으면 제출' — 처음엔 3개만, [더 보기] */
.c-moreopt{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:10px}
.c-moreopt .c-hint{margin:0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1 1 200px}

/* 5-3 보완 카드 — 사유 한 줄 + 빠진 곳 안내 + [정보 입력하기] / [사진 다시 올리기], 누르면 그 칸만 펼친다 */
.c-fix.redone{border-color:var(--up-info-line,var(--line));background:color-mix(in srgb,var(--up-info-tint) 45%,var(--bg))}
.c-fix-act{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.c-fix-miss{color:var(--ink);font-size:14px;min-width:0}
.c-fix-drop{display:flex;flex-direction:column;align-items:center;gap:2px;width:100%;padding:16px 12px;border:1.5px dashed var(--up-rule-default);border-radius:10px;background:var(--bg);color:var(--ink);font:inherit;cursor:pointer;text-align:center}
.c-fix-drop b{font-size:15px}
.c-fix-drop span{color:var(--sub);font-size:13px}
.c-fix-drop:hover,.c-fix-drop[aria-expanded="true"]{border-color:var(--pri)}
.c-fix-ed{padding-top:12px;border-top:1px dashed var(--line)}
.c-dot.info{background:var(--up-info-text)}

/* 5-4 왼쪽 위 — 남은 무료 수정(큰 숫자) · 수정 범위 칩 · 아래 안내 2줄 */
.c-left-box{padding:16px 18px;border-radius:12px;gap:12px}
.c-left-t{display:flex;flex-direction:column;gap:4px;min-width:0}
.c-left-t>span{font-size:15px;font-weight:600}
.c-left-t small{color:var(--sub);font-size:12px;line-height:1.4}
.c-left-box b{flex:none;font-size:26px;font-weight:800;line-height:1}
.c-scope{display:flex;flex-direction:column;gap:12px;padding:16px;border:1px solid var(--line);border-radius:12px;background:var(--bg)}
.c-scope-h{font-size:14px}
.c-scope-row{display:flex;align-items:center;gap:8px}
.c-scope-l{flex:none;width:44px;color:var(--sub);font-size:13px}
.c-scope-chips{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;min-width:0}
.c-scope-chip{display:inline-flex;align-items:center;height:28px;padding:0 10px;border-radius:999px;font-size:12.5px;font-weight:600;white-space:nowrap}
.c-scope-chip.free{background:var(--up-surface-tint);color:var(--up-text-accent)}
.c-scope-chip.paid{border:1px solid var(--up-rule-default);background:var(--bg);color:var(--ink)}
.c-scope-note{color:var(--sub);font-size:12px}
.c-rv-rules{margin:0;padding:14px 16px;list-style:none;display:flex;flex-direction:column;gap:8px;border-radius:12px;background:var(--soft);font-size:14px}
.c-rv-rules li{display:flex;align-items:baseline;gap:8px}
.c-rv-rules li::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--up-surface-brand);transform:translateY(-2px)}
/* 5-4 폰 — 페이지 탭 두 줄 → 가로로 밀어 보는 한 줄 */
@media (max-width:700px){
  .c-rv-bar .c-tabs{flex:1 1 100%;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-right:0}
  .c-rv-bar .c-tabs::-webkit-scrollbar{display:none}
  .c-rv-bar .c-tabs button{flex:none;white-space:nowrap}
}

/* 폰 머리말 단계 점 — 5개 칸을 똑같은 폭으로(현재 단계 이름만 길어 간격이 들쭉날쭉했다). 아주 좁으면(≤520) 이름은 모두 숨기고 점만 */
@media (max-width:700px){
  .c-steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));justify-items:center;overflow:visible}
  .c-steps li,.c-steps li:first-child,.c-steps li:last-child{margin:0;justify-content:center}
  .c-steps li+li::before{display:none}
  .c-steps .c-stepbtn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:0}      /* 누르는 칸(44px)이 점을 왼쪽에 붙이지 않게 — 가운데 */
}
@media (max-width:520px){
  .c-steps li span,.c-steps li.on span,.c-steps li.done:last-child span{display:none}
}

/* 5-1-3 제출 팝업(확정본) — 위 아이콘 · 오른쪽 위 ✕ · 자물쇠 띠 · 단계 사이 › · [다시 확인하기] 테두리 단추 */
.c-submitpop{position:relative;width:min(960px,100%);padding-top:60px}
.c-sp-x{position:absolute;top:10px;right:12px;display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:transparent;color:var(--sub);cursor:pointer}
.c-sp-x:hover{background:var(--soft);color:var(--ink)}
.c-sp{grid-template-columns:minmax(0,1fr) minmax(260px,.85fr);gap:36px;align-items:stretch}
.c-sp-ico{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--up-surface-tint);color:var(--up-surface-brand)}
.c-sp-lock{display:flex;align-items:center;gap:12px;padding:16px 20px;border-radius:12px;background:var(--up-surface-tint);color:var(--up-text-accent)}
.c-sp-lock span{display:grid;place-items:center;flex:none}
.c-sp-lock b{font-size:15px}
.c-sp-sum{display:flex;align-items:center;padding:8px 22px;border:0;border-radius:14px;background:var(--soft)}
.c-sp-sum ul{margin:0;width:100%}
.c-sp-sum li{padding:16px 0}
.c-sp-h{margin:4px 0 0}
.c-sp-steps{gap:22px}
.c-sp-steps li{position:relative;padding:16px 18px;border:1px solid var(--line);background:var(--bg)}
.c-sp-steps b i{width:24px;height:24px;background:var(--up-surface-brand);color:#fff;font-size:12px}
.c-sp-next{position:absolute;right:-17px;top:50%;transform:translateY(-50%);width:12px;text-align:center;color:var(--up-text-tertiary);font-size:22px;line-height:1}
.c-submitpop .c-mact{justify-content:flex-end}
.c-sp-back{text-decoration:none;min-width:150px;font-size:15px}
.c-sp-go{min-width:170px;padding:0 28px;font-size:16px;height:50px}
@media (max-width:899px){
  .c-sp{grid-template-columns:minmax(0,1fr);gap:16px}
  .c-sp-next{display:none}
  .c-sp-sum{padding:4px 16px}
}
@media (max-width:700px){
  .c-submitpop{padding-top:52px}
  .c-sp-back{min-width:0}
  .c-sp-go{min-width:0}
}

/* 제출 직후 5-2 첫 진입 — "제출 완료" 카드 */
.c-subdone{display:flex;align-items:center;gap:18px;margin-bottom:16px;border-color:var(--up-success-line,var(--line));background:color-mix(in srgb,var(--up-success-tint) 55%,var(--bg))}
.c-subdone-t{flex:1;min-width:0}
.c-subdone-t h2{margin:0 0 4px}
.c-subdone-t p{margin:0;color:var(--sub);font-size:15px}
@media (max-width:700px){
  .c-subdone{flex-wrap:wrap;gap:12px}
  .c-subdone .c-pri{flex:1 1 100%}
}

/* 1-3 PC · 태블릿: 아래 줄([이 스킨으로 시작하기])은 내용이 짧아도 화면 맨 아래에 붙는다(sticky 의 자연 자리 = 화면 아래) — 그래야 도움말 알약이 줄 위(--bar-h + 12)에 뜰 때
   줄이 내용 한가운데에 떠 있어 알약이 줄을 덮는 일이 없다. 줄 위에는 알약이 들어갈 여백을 둔다 */
@media (min-width:701px){
  body.portal[data-screen="skins"] .c-main{display:flex;flex-direction:column;box-sizing:border-box;min-height:calc(100vh - var(--top-h,65px) - var(--demo-h,0px));padding-bottom:12px}
  body[data-screen="skins"] .c-wide{flex:1}
  body[data-screen="skins"] .c-pickbar{margin-top:auto}
  body[data-screen="skins"] .c-menus{margin-bottom:calc(var(--fab) + 24px)}      /* 도움말 알약이 마지막 칸(메뉴)을 덮지 않게 */
}
/* 폰: 글자를 치는 동안(키보드가 올라와 있다)에는 알약이 칸을 덮지 않게 잠깐 숨긴다 */
@media (max-width:700px){
  body:has(.c-main :is(input:not([type=checkbox]):not([type=radio]):not([type=color]),textarea):focus) .c-helpfab{opacity:0;pointer-events:none}
}

/* ---------- 261029: 돌아가기 쓰는 법 · 담당자 문의 ---------- */
/* 머리말 단계: 완료(돌아갈 수 있는) = 점선 밑줄 + 손가락, 올리면 실선 · 말풍선. 제출 뒤 잠긴 단계 = 회색 + 기본 커서 */
.c-stepbtn.back,.c-stepbtn.next{cursor:pointer}
.c-stepbtn.back span{text-decoration:underline dotted;text-underline-offset:4px;text-decoration-thickness:1px}
.c-stepbtn.back:hover span,.c-stepbtn.next:hover span,.c-stepbtn.back:focus-visible span{text-decoration:underline solid;text-decoration-thickness:1.5px}
.c-stepbtn.locked,.c-steps li.done .c-stepbtn.locked{color:var(--up-text-tertiary);opacity:.6;cursor:default}
.c-stepbtn.locked i{background:var(--up-neutral-200);color:var(--up-neutral-600)}
.c-stepbtn.locked:hover span{text-decoration:none}
.c-steptip{position:fixed;z-index:80;max-width:calc(100vw - 16px);padding:7px 12px;border-radius:8px;background:var(--ink);color:var(--up-text-inverse);font-size:13px;font-weight:600;line-height:1.3;white-space:nowrap;pointer-events:none;box-shadow:0 4px 14px rgba(0,0,0,.18)}
.c-steptip[hidden]{display:none}
@media (hover:none){ .c-steptip{display:none} }
/* 5-1 · 5-3 머리의 돌아가기 링크 = 테두리 단추 */
.c-crumb .c-link{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border:1px solid var(--up-rule-default);border-radius:999px;background:var(--bg);color:var(--ink);font-size:14px;font-weight:600;text-decoration:none}
.c-crumb .c-link:hover{background:var(--soft);border-color:var(--ink);text-decoration:none}
@media (pointer:coarse),(max-width:899px){ .c-crumb .c-link{min-height:44px} }
/* 도움말 알약 · 5-2 담당자 카드: 안 읽은 답변 표시 */
.c-helpdot{position:absolute;top:-2px;right:-2px;width:12px;height:12px;border-radius:50%;background:#e5322d;border:2px solid var(--bg)}
.c-helpdot[hidden]{display:none}
.c-ansbadge{flex:none;padding:3px 9px;border-radius:999px;background:#e5322d;color:#fff;font-size:12px;font-weight:700;white-space:nowrap}
.c-ansbadge[hidden]{display:none}
/* 둘러보기 띠: "눌러서 이동" 한 줄 + 단추 글자 */
.c-demo-box{order:2;flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.c-demo-box .c-demo-strip{order:0;flex:none}
.c-demo-hint{font-size:11px;line-height:13px;opacity:.75;padding-left:2px}
body.c-demo-on{--demo-h:64px}
@media (max-width:767px){
  body.c-demo-on{--demo-h:112px}
  .c-demo{grid-template-rows:40px 48px}
  .c-demo-box{grid-column:1/-1;grid-row:2;order:0}
}
/* 머리말 계정 메뉴 — 폰에서는 이메일이 잘리니 아이콘 + "계정" */
.c-userico,.c-userlbl{display:none}
@media (max-width:700px){
  #userEmail{display:none}
  .c-userico{display:inline-block;flex:none}
  .c-userlbl{display:inline}
  .c-userbtn{max-width:none}
}
/* 1-2 폰(한 줄 배치): 아래 고정 [미리보기 보기] 알약 → 바텀시트(화면 70%) 지금 미리보기. 알약은 왼쪽 아래(도움말 알약은 오른쪽 아래) */
.c-pvpill{display:none}
@media (max-width:899px){
  .c-pvpill:not([hidden]){position:fixed;left:12px;bottom:calc(var(--demo-h,0px) + 12px);z-index:35;display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 18px 0 14px;border:0;border-radius:999px;background:var(--up-surface-brand);color:#fff;font:700 14px/1 inherit;white-space:nowrap;box-shadow:0 6px 20px rgba(0,0,0,.22);cursor:pointer}
}
body:has(.c-modal-back) .c-pvpill{display:none}
.c-modal-back:has(> .c-pvsheet){align-items:flex-end;padding:0}
.c-modal.c-pvsheet{width:100%;max-width:none;height:70vh;height:70dvh;max-height:none;gap:10px;padding:14px 16px calc(14px + env(safe-area-inset-bottom,0px));border-radius:20px 20px 0 0;overflow:hidden}
.c-pvsheet-hd{display:flex;align-items:center;justify-content:space-between;gap:10px}
.c-pvsheet-hd>div{display:flex;flex-direction:column;min-width:0}
.c-pvsheet-hd small{color:var(--sub);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.c-pvsheet-body{flex:1 1 auto;min-height:0;border:1px solid var(--line)}
.c-legend.c-pvsheet-lg{display:grid;grid-template-columns:1fr 1fr;gap:6px 10px;font-size:13px}
.c-pvsheet-lg li{gap:6px}
.c-pvsheet-lg b{min-width:0}
.c-pvsheet-lg span{display:none}
/* 토스트를 위쪽에(폰 — 아래 단추를 덮지 않게, 예: 비밀번호를 정한 뒤 온보딩 ③ 의 [이전] · [시작하기]) */
.toast.top{top:calc(env(safe-area-inset-top,0px) + 12px);bottom:auto!important;z-index:70}

/* 문의 기능 준비 중(portal.js INQUIRY_ON) — 문의 단추 숨김 */
.c-no-inquiry [data-ask] { display: none !important; }