/* [틀 배치 + 화면별 조각 모양] 머리 줄·왼쪽 메뉴·아래 탭·본문 두 칸(폰→PC) + 보장 막대·보장 표·입력 묶음·시작하기·견본 부품.
   고치면 → 틀 부분은 모든 화면, '보장 막대'·'표 옆으로 밀기'·'입력 묶음' 부분은 보장분석(과 같은 부품을 쓰는 시안 견본). */
/* 설계사 도구 v1 — shell.css : 공통 틀(머리 줄·왼쪽 메뉴·아래 탭·본문 칸)과 화면 배치.
   바탕은 디자인시스템_v4\시안\shell.css. 값은 tokens.css의 var(--…)만 씀.
   폰(390) 먼저 → PC 1024 이상에서 왼쪽 묶음 메뉴 + 넓힌 본문(두 칸). 1440·1910에서는 본문을 가운데로(한쪽만 넓은 여백 금지, 규격 4-7). */
body{background:var(--bg);margin:0}
.app{min-height:100vh;padding-bottom:calc(var(--hit-l) + var(--s-6))}
.side{display:none}
.body{min-width:0}
.appbar{position:sticky;top:0;z-index:10;background:var(--bg);padding:0 var(--s-2) 0 var(--gutter);border-bottom:var(--bw) solid var(--line)}
.appbar .grow{flex:1;min-width:0}
.appbar .title{font-size:var(--fs-t3);line-height:var(--lh-t3);font-weight:var(--fw-m);color:var(--t1);letter-spacing:var(--ls-title)}
.appbar .title-wrap{display:grid;gap:0}
.appbar .btn-back{margin-left:calc(var(--s-2) - var(--gutter))}
.trust{display:flex;flex-wrap:wrap;gap:var(--s-1) var(--s-3)}
.main{padding:var(--s-5) var(--gutter) 0;display:grid;gap:var(--s-6);outline:none}
.main>*{min-width:0}
.col{display:grid;gap:var(--s-6);min-width:0;align-content:start}
.sec{display:grid;gap:var(--s-3);min-width:0}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-2);flex-wrap:wrap}
.hero{display:grid;gap:var(--s-1)}
.hero .label{font-size:var(--fs-body);color:var(--t2)}
.who{display:grid;gap:var(--s-2);padding:var(--s-3) var(--gutter);border-bottom:var(--bw) solid var(--line);background:var(--bg)}
.who .facts{display:flex;flex-wrap:wrap;gap:var(--s-1) var(--s-2)}
.cta{display:grid;gap:var(--s-2)}
.mini{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-2)}
.mini .stat{padding:var(--s-2) var(--s-3);text-align:left}
.mini .stat b{display:block;font-size:var(--fs-t3);font-weight:var(--fw-m);color:var(--t1);font-variant-numeric:tabular-nums}
.avatar{width:40px;height:40px;border-radius:var(--r-full);background:var(--fill);display:grid;place-items:center;font-size:var(--fs-body);font-weight:var(--fw-m);color:var(--t2);flex:none}
.why{font-size:var(--fs-cap);color:var(--t3)}
.row-main{font-size:var(--fs-body);color:var(--t1);font-weight:var(--fw-m)}
.right{margin-left:auto;text-align:right;flex:none}
.empty-in{display:grid;gap:var(--s-2);justify-items:center}
.empty .cap{max-width:var(--measure)}

/* 보장 막대 목록 (분야별 지금 보장) */
.cov{list-style:none;margin:0;padding:0;border:var(--bw) solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.cov li{display:grid;grid-template-columns:minmax(72px,96px) 1fr auto;align-items:center;gap:var(--s-3);min-height:var(--hit-l);padding:var(--s-2) var(--s-4);border-bottom:var(--bw) solid var(--line)}
.cov li:last-child{border-bottom:0}
.cov li.is-empty{background:var(--red-fill)}
.cov li.is-empty .cov-name,.cov li.is-empty .cov-val{color:var(--red)}
.cov .cov-name{color:var(--t1);font-weight:var(--fw-m)}
.cov .cov-val{font-variant-numeric:tabular-nums;color:var(--t2);text-align:right;white-space:nowrap}
.cov .cov-val.t-red{color:var(--red)}
.cov .cov-note{grid-column:2/-1;font-size:var(--fs-cap);color:var(--t3);margin-top:calc(var(--s-1) * -1)}

.kv{display:grid;grid-template-columns:auto 1fr;gap:var(--s-2) var(--s-4);margin:0}
.kv dt{color:var(--t3);font-size:var(--fs-body)}
.kv dd{margin:0;color:var(--t1);font-weight:var(--fw-m);text-align:right;font-variant-numeric:tabular-nums}

/* 표 옆으로 밀기 (폰) — 첫 칸 고정 */
.tbl-x{overflow-x:auto;border:var(--bw) solid var(--line);border-radius:var(--r-lg)}
.tbl-x .tbl{min-width:640px}
.tbl-x .tbl th:first-child,.tbl-x .tbl td:first-child{position:sticky;left:0;z-index:1;min-width:112px;background:var(--fill)}
.tbl-x .tbl .row-empty td:first-child{background:var(--red-fill)}
.tbl .grp td{background:var(--card);color:var(--t3);font-size:var(--fs-cap);font-weight:var(--fw-m);height:36px}
.tbl .grp td:first-child{background:var(--card)}
.swipe-hint{display:inline-flex;align-items:center;gap:var(--s-1);font-size:var(--fs-cap);font-weight:var(--fw-m);color:var(--blue)}

/* 입력 묶음 · 붙여넣기 칸 */
.stack{display:grid;gap:var(--s-2)}
.prog{display:flex;align-items:center;gap:var(--s-3)}
.prog .meter{flex:1}
.check-row{display:flex;align-items:center;gap:var(--s-3);min-height:var(--hit-pc);cursor:pointer}
.check-row input:not(.switch){width:20px;height:20px;margin:0;accent-color:var(--blue)}
.row2{display:grid;gap:var(--s-3);grid-template-columns:repeat(2,minmax(0,1fr))}
.field-row{display:grid;gap:var(--s-3)}
.added{list-style:none;margin:0;padding:0}
.added li{display:flex;align-items:center;gap:var(--s-2);min-height:var(--hit-pc);border-bottom:var(--bw) solid var(--line)}
.added li:last-child{border-bottom:0}
.unknown{margin:0;padding-left:var(--s-5);display:grid;gap:var(--s-1);color:var(--t2);font-size:var(--fs-body)}
.parsed{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-1)}
.parsed li{display:flex;justify-content:space-between;gap:var(--s-3);color:var(--t2)}

/* 시작하기(혼자 쓰는 화면) */
.is-solo .side,.is-solo .tabbar{display:none!important}
.is-solo .app{display:block;padding-bottom:0}
.solo{display:grid;justify-items:center;padding:var(--s-6) 0 var(--s-8)}
.solo-in{width:100%;max-width:440px;display:grid;gap:var(--s-6)}
.steps3{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-3)}
.steps3 li{display:flex;gap:var(--s-3);align-items:flex-start}

/* 띠(예시 모드·준비 중) · 견본 */
.band{padding:var(--s-3) var(--gutter) 0}
.band .notice{flex-wrap:wrap}
.sample{display:grid;gap:var(--s-3)}
.sample-in{display:grid;gap:var(--s-6);border-top:var(--bw) solid var(--line);padding-top:var(--s-4)}
.sample-in>.main{padding:0}

/* 전체 메뉴(폰) */
.menu-list .mgroup ul{padding-left:36px}

/* 토스트(떠 있는 것 = 그림자 1종) · 바텀시트 */
.toast-host{position:fixed;left:0;right:0;bottom:calc(var(--hit-l) + var(--s-4) + env(safe-area-inset-bottom));display:grid;justify-items:center;gap:var(--s-2);z-index:50;pointer-events:none;padding:0 var(--gutter)}
.toast-host .toast{pointer-events:auto;max-width:100%}
.sheet .sheet-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s-2)}
.sheet-body{display:grid;gap:var(--s-4);padding-bottom:var(--s-4)}

/* PC 1024 이상: 왼쪽 묶음 메뉴 + 본문 */
@media (min-width:1024px){
  body{background:var(--bg-sub)}
  .app{display:grid;grid-template-columns:var(--side-w) minmax(0,1fr);padding-bottom:0}
  .side{display:flex;flex-direction:column;gap:var(--s-2);position:sticky;top:0;height:100vh;overflow:auto;background:var(--bg-sub);border-right:var(--bw) solid var(--line);padding:var(--s-3)}
  .side .brand{font-size:var(--fs-body);font-weight:var(--fw-b);color:var(--t1);padding:var(--s-2) 0 var(--s-3)}
  .side .mgroup>summary{min-height:var(--hit-pc)}
  .side .mgroup ul{padding-left:var(--s-5)}
  .side .mgroup ul a[aria-current="page"]{color:var(--blue);font-weight:var(--fw-m);background:var(--blue-fill);border-radius:var(--r-md)}
  .side .foot{margin-top:auto;display:grid;gap:var(--s-2);padding-top:var(--s-3);border-top:var(--bw) solid var(--line)}
  .tabbar{display:none}
  .toast-host{bottom:var(--s-6)}
  .appbar{background:var(--card);padding-inline:max(var(--s-6),calc((100% - var(--main-max)) / 2 + var(--s-6)))}
  .appbar .btn-back{margin-left:calc(var(--s-2) * -1)}
  .who{padding:var(--s-4) max(var(--s-6),calc((100% - var(--main-max)) / 2 + var(--s-6)));background:var(--card)}
  .band{padding:var(--s-4) max(var(--s-6),calc((100% - var(--main-max)) / 2 + var(--s-6))) 0}
  .main{padding:var(--s-6);max-width:var(--main-max);width:100%;margin-inline:auto;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;gap:var(--s-6)}
  .main>.span{grid-column:1/-1}
  .col{gap:var(--s-7)}
  .main .panel{background:var(--card);border:var(--bw) solid var(--line);border-radius:var(--r-lg);padding:var(--s-6)}
  .mini{grid-template-columns:repeat(4,minmax(0,1fr))}
  .cta{grid-template-columns:auto auto;justify-content:start;align-items:center}
  .cta>.btn-block{width:auto}
  .cta .bundle-n,.cta .bundle-list,.cta .bundle-more,.cta .btn-why{grid-column:1/-1}
  .btn-56{--h:var(--hit-m)}
  .swipe-hint{display:none}
  .tbl-x .tbl{min-width:0}
  .solo{padding-top:var(--s-8)}
  .solo-in{background:var(--card);border:var(--bw) solid var(--line);border-radius:var(--r-lg);padding:var(--s-7)}
  .sheet{left:50%;right:auto;bottom:auto;top:50%;transform:translate(-50%,-50%);width:min(480px,calc(100% - var(--s-8)));border-radius:var(--r-lg);padding:var(--s-4) var(--s-6) 0}
  .sheet .grab{display:none}
  .sample-in .main{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
.appbar h1.title{margin:0}
.m0{margin:0}
.mgroup ul a{gap:var(--s-2)}
.mgroup ul a .badge{margin-left:auto}
.steps3 .ic{margin-top:var(--s-1)}
.main.solo{grid-template-columns:minmax(0,1fr);max-width:none}
.who-facts{gap:var(--s-2)}
.side .secure{white-space:normal}
.side .foot .btn{justify-content:flex-start;padding-inline:0}
.sample,.sample-in,.sample-in .main,.sample-in .col,.sample-in .sec{min-width:0}
.sample-in .doc{overflow-wrap:anywhere;max-width:100%}
:root[data-theme="dark"] .preview{background:var(--fill)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .preview{background:var(--fill)}}
/* 격자 칸이 긴 글 때문에 화면 밖으로 밀리지 않게(최소 폭 0) */
.sec,.col,.hero,.stack,.sample,.sample-in{grid-template-columns:minmax(0,1fr)}
.chip{min-width:var(--hit-pc);justify-content:center}
/* 시안 견본에 쓰이는 부품(디자인시스템_v4\시안\shell.css 2차에서 그대로) */
.sigpad{position:relative;height:200px;border:var(--bw-focus) dashed var(--line-strong);border-radius:var(--r-lg);background:var(--card);display:grid;place-items:center}
.sigpad svg{width:70%;height:60%;fill:none;stroke:var(--t1);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.sigpad .cap{position:absolute;left:var(--s-4);bottom:var(--s-3)}
.doc{background:var(--fill);border-radius:var(--r-md);padding:var(--s-4);font-size:var(--fs-body);line-height:var(--lh-body);color:var(--t1);white-space:pre-wrap;margin:0;font-family:var(--font)}
.done-row{color:var(--t3)}
.done-row .row-main{color:var(--t3);text-decoration:line-through}
.drop{display:grid;gap:var(--s-2);justify-items:start;padding:var(--s-4);border:var(--bw-focus) dashed var(--line-strong);border-radius:var(--r-lg);background:var(--card)}
.drop .kinds{display:flex;flex-wrap:wrap;gap:var(--s-1) var(--s-3);margin:0;padding:0;list-style:none}
.drop .kinds li{display:inline-flex;align-items:center;gap:var(--s-1);font-size:var(--fs-body);color:var(--t2)}
.pick{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-2)}
.pick-card{display:grid;gap:var(--s-2);align-content:start;text-align:left;padding:var(--s-3);border:var(--bw) solid var(--line);border-radius:var(--r-lg);background:var(--card);cursor:pointer;min-height:var(--hit-pc)}
.pick-card.is-sel{border:var(--bw-focus) solid var(--blue);padding:calc(var(--s-3) - 1px)}
.pick-card .thumb{height:64px;border-radius:var(--r-md);background:var(--fill);display:grid;place-items:center}
.pick-card .thumb svg{width:56px;height:40px;fill:none;stroke:var(--t3);stroke-width:1.5;stroke-linecap:round}
.pick-card.is-sel .thumb svg{stroke:var(--blue)}
.pick-card .nm{font-size:var(--fs-body);font-weight:var(--fw-m);color:var(--t1)}
.preview{border:var(--bw) solid var(--line);border-radius:var(--r-lg);background:var(--kakao-bg);padding:var(--s-4)}
.preview .pv{background:var(--card);border-radius:var(--r-lg);padding:var(--s-4);display:grid;gap:var(--s-2);max-width:280px}
@media (min-width:1024px){.pick{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* 11/2 밤: 고객 목록(#/customers) · 왼쪽 위 = 첫 화면 · 고객 삭제(빨간 글자) */
.side a.brand{text-decoration:none;display:block;border-radius:var(--r-md)}
.menu-top{display:flex;align-items:center;gap:var(--s-3);min-height:var(--hit-l);padding:var(--s-2) var(--s-2);margin:0 calc(var(--s-2) * -1);border-radius:var(--r-md);color:var(--t1);text-decoration:none;background:var(--fill)}
.menu-top .ic-l{color:var(--blue)}
.menu-top .cnt{font-size:var(--fs-cap);color:var(--t3);font-variant-numeric:tabular-nums}
.menu-top[aria-current="page"]{color:var(--blue)}
.appbar .appbar-home{margin-left:calc(var(--s-2) - var(--gutter));color:var(--t2);flex:none}
.appbar .appbar-home + .btn-back{margin-left:0}
.btn.del-txt{color:var(--red);justify-self:start}
.del-zone{border-top:var(--bw) solid var(--line);padding-top:var(--s-4)}
.vlist{position:relative;list-style:none;margin:0;padding:0}
.vlist>li{position:absolute;left:0;right:0;height:72px;display:flex;align-items:center;border-bottom:var(--bw) solid var(--line)}
.vlist>li>a,.vlist>li>label{display:flex;align-items:center;gap:var(--s-3);width:100%;height:100%;color:inherit;text-decoration:none;cursor:pointer;min-width:0}
.vlist .grow{flex:1;min-width:0}
.vlist .row-main,.vlist .why{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vlist input[type=checkbox]{width:22px;height:22px;margin:0 var(--s-1);accent-color:var(--blue);flex:none}
.vlist li.is-sel{background:var(--fill)}
.selbar{position:sticky;bottom:calc(var(--hit-l) + env(safe-area-inset-bottom) + var(--s-2));z-index:5;display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2);padding:var(--s-2) var(--s-3);background:var(--card);border:var(--bw) solid var(--line-strong);border-radius:var(--r-lg)}
.selbar .grow{flex:1;min-width:0}
@media (min-width:1024px){
  .appbar .appbar-home{display:none}
  .appbar .appbar-home + .btn-back{margin-left:calc(var(--s-2) * -1)}
  .selbar{bottom:var(--s-4)}
  .main.cust-main{grid-template-columns:minmax(0,1fr);max-width:880px}
}
/* 폰: 집 단추가 생겨 머리 줄이 좁아짐 → 뒤로는 화살표만(이름은 aria-label) · 목록 둘째 줄은 두 줄까지 */
@media (max-width:480px){.appbar .btn-back .help-txt{display:none}.appbar .btn-back{min-width:var(--hit-m);justify-content:center;padding-inline:0}}
.vlist .why{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.35}
/* 누적 막대(계약별 구간 · 오래된 계약 왼쪽 · 갱신형 빨강) — screens\coverage\tab_sum.js CV.segs */
.meter.stack{display:flex;gap:2px}
.meter.stack>i{flex:none;border-radius:0}
.meter.stack>i.is-renew{background:var(--dot-red)}
/* 메모 서랍 단추(고객 카드) — 폰: 오른쪽 아래(아래 탭 위) · PC: 오른쪽 가장자리 세로 탭 */
.memo-tab{position:fixed;right:var(--s-4);bottom:calc(var(--hit-l) + env(safe-area-inset-bottom) + var(--s-4));z-index:15;display:inline-flex;align-items:center;gap:var(--s-1);min-height:var(--hit-pc);padding:0 var(--s-4);border:var(--bw) solid var(--line-strong);border-radius:var(--r-full);background:var(--card);color:var(--t1);font-size:var(--fs-body);font-weight:var(--fw-m);cursor:pointer}
.memo-inline{min-height:var(--hit-pc)}
@media (min-width:1024px){.memo-tab{right:0;bottom:auto;top:40%;flex-direction:column;padding:var(--s-3) var(--s-2);border-radius:var(--r-md) 0 0 var(--r-md);border-right:0}.memo-tab span{writing-mode:vertical-rl}}
/* 개조 11/5: 머리 줄 [붙여넣기]·[메모] — 폰에서는 아이콘만(이름은 aria-label), 제목이 눌리지 않게 */
.appbar .btn-pa{flex:none}
@media (max-width:480px){.appbar .btn-pa .help-txt{display:none}.appbar .btn-pa{min-width:44px;justify-content:center;padding-inline:0}.appbar .btn-pa[data-memo]{display:none}} /* 폰: 머리 줄이 좁아 메모 단추는 숨김(보장분석 화면엔 줄 안 메모 단추가 있음) */
@media (max-width:480px){.appbar .title-wrap{min-width:0}.appbar .title-wrap .saved{display:block;white-space:normal}} /* 개조 11/5: 폰 머리 줄 단추가 늘어도 제목이 단추 밑으로 안 깔리게 */