:root{
  --ground:#FFFCF6; --surface:#FFFFFF; --ink:#1E2230; --muted:#5B6070; --soft:#4A4F5C;
  --lead:#2E3340; --line:#ECE6DA; --line2:#E4DED2; --chip:#F1ECE2;
  --blue:#2F5D9E; --blue-d:#1F4478; --blue-l:#EEF4FB; --sun:#E08A1E; --sun-l:#FFF3D6;
  --lv1-bg:#E3F2E8; --lv1:#23663D; --lv2-bg:#FFF0CC; --lv2:#7A5200; --lv3-bg:#FCE1E4; --lv3:#8C1F33;
  --r:18px;
  --display:'Gowun Batang', serif;
  --body:'Noto Sans KR', system-ui, sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--body);-webkit-tap-highlight-color:transparent}
a{color:var(--blue);text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
img{max-width:100%}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
h1,h2,h3{margin:0}
.display{font-family:var(--display);font-weight:700}

/* ---------- shell ---------- */
.app{min-height:100vh;display:flex;flex-direction:column}
.topbar{display:none}
.main{flex:1;padding-bottom:84px}
.bottomnav{position:fixed;left:0;right:0;bottom:0;height:72px;background:#fff;border-top:1px solid var(--line);
  display:grid;grid-template-columns:repeat(5,1fr);align-items:center;text-align:center;font-size:11px;z-index:20}
.bottomnav a{display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--muted)}
.bottomnav a.on{color:var(--blue);font-weight:700}
.bottomnav .fab{width:52px;height:52px;border-radius:26px;background:var(--sun);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 10px rgba(224,138,30,.35);margin:0 auto}
.pad{padding:0 20px}
.wrap{padding:6px 20px}
.hdr{display:flex;align-items:center;gap:8px;padding:14px 12px 6px}
.hdr h1{font-family:var(--display);font-size:21px;flex:1}
.iconbtn{width:44px;height:44px;border:none;background:transparent;border-radius:12px;display:flex;align-items:center;justify-content:center;color:var(--ink)}
.iconbtn:hover{background:var(--chip)}

/* ---------- pieces ---------- */
.logo{display:flex;align-items:center;gap:10px}
.logo span{font-family:var(--display);font-weight:700;font-size:22px}
.chip{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 14px;border-radius:19px;background:#fff;border:1px solid var(--line2);color:var(--ink);font-size:14px;white-space:nowrap}
.chip.on{border:2px solid var(--lead);font-weight:700}
.dot{width:12px;height:12px;border-radius:6px;border:1.5px solid var(--lead);flex-shrink:0}
.chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.seg{display:inline-flex;background:var(--chip);border-radius:12px;padding:3px}
.seg button{white-space:nowrap;height:36px;padding:0 14px;border:none;border-radius:10px;background:transparent;font-size:14px;color:var(--soft)}
.seg button.on{background:#fff;color:var(--ink);font-weight:700;box-shadow:0 1px 2px rgba(30,34,48,.12)}
.lv{display:inline-block;padding:1px 8px;border-radius:8px;font-size:12px;font-weight:700}
.lv-하{background:var(--lv1-bg);color:var(--lv1)} .lv-중{background:var(--lv2-bg);color:var(--lv2)} .lv-상{background:var(--lv3-bg);color:var(--lv3)}
.btn{height:52px;border-radius:16px;border:none;background:var(--blue);color:#fff;font-size:16px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 20px}
.btn:hover{background:var(--blue-d)}
.btn.line{background:#fff;color:var(--ink);border:1.5px solid var(--lead)}
.btn.line:hover{background:var(--chip)}
.btn.sm{height:42px;font-size:14px;border-radius:12px;padding:0 14px}
.btn[disabled]{opacity:.45;cursor:default}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r)}
.muted{color:var(--muted)}
.search{display:flex;align-items:center;gap:8px;height:46px;padding:0 14px;border-radius:14px;background:#fff;border:1px solid var(--line2)}
.search input{flex:1;border:none;outline:none;background:transparent;font:inherit;font-size:15px;color:var(--ink);min-width:0}
select.sel,input.sel{height:42px;border-radius:12px;border:1px solid var(--line2);background:#fff;font:inherit;font-size:14px;padding:0 10px;color:var(--ink)}

/* ---------- home ---------- */
.hello p{margin:0;font-size:14px;color:var(--muted)}
.hello h1{margin-top:4px;font-family:var(--display);font-size:26px;line-height:1.3}
.actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.action{display:flex;flex-direction:column;justify-content:space-between;min-height:160px;padding:16px;border-radius:20px;background:#fff;border:2px solid var(--lead);color:var(--ink)}
.action.blue{background:var(--blue);border-color:var(--blue);color:#fff}
.action b{font-size:17px} .action small{display:block;font-size:13px;margin-top:2px;opacity:.85}
.panes{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;background:var(--lead);padding:3px;border-radius:10px;width:78px;height:52px}
.panes i{display:block}
.sec-h{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:10px}
.sec-h h2{font-size:16px}
.hscroll{display:flex;gap:12px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px}
.hscroll::-webkit-scrollbar{display:none}
.mini{width:136px;flex-shrink:0;color:var(--ink)}
.mini img{width:136px;height:136px;border-radius:16px;object-fit:cover;display:block;background:#eee}
.mini b{display:block;font-size:14px;font-weight:500;margin-top:8px}
.mini span{font-size:12px;color:var(--muted)}
.resume{display:flex;align-items:center;gap:12px;padding:12px;border-radius:16px;background:var(--sun-l);color:var(--ink)}
.resume img{width:48px;height:48px;border-radius:10px;background:#fff;object-fit:cover}
.bar{height:6px;border-radius:3px;background:#F1E2BC;margin-top:6px}.bar i{display:block;height:6px;border-radius:3px;background:var(--sun)}

/* ---------- library ---------- */
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.tile{color:var(--ink);background:#fff;border-radius:18px;padding:8px;border:1px solid var(--line);display:block}
.tile:hover{border-color:var(--blue)}
.tile .im{position:relative}
.tile .im img.main{width:100%;aspect-ratio:1;border-radius:12px;display:block;object-fit:contain;background:#fff}
.tile .im img.th{position:absolute;right:6px;bottom:6px;width:46px;height:46px;border-radius:10px;border:2px solid #fff;object-fit:cover;background:#eee}
.tile b{display:block;font-size:14px;margin:8px 4px 2px}
.tile .meta{display:flex;gap:6px;align-items:center;margin:0 4px 4px;font-size:12px;color:var(--muted)}
.empty{padding:40px 0;text-align:center;color:var(--muted)}

/* ---------- detail ---------- */
.viewer{position:relative;border-radius:22px;overflow:hidden;background:#fff;border:1px solid var(--line)}
.viewer .stage{aspect-ratio:1;display:flex;align-items:center;justify-content:center}
.viewer .stage img,.viewer .stage svg{width:100%;height:100%;object-fit:contain;display:block}
.viewer .seg{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);background:rgba(255,255,255,.95);box-shadow:0 2px 8px rgba(30,34,48,.18);border-radius:22px}
.viewer .seg button{border-radius:18px}
.viewer .seg button.on{background:var(--blue);color:#fff}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;text-align:center}
.stats div{padding:10px 4px;border-radius:14px;background:#fff;border:1px solid var(--line)}
.stats b{display:block;font-size:18px}.stats span{font-size:11px;color:var(--muted)}
.films{display:flex;flex-wrap:wrap;gap:10px;font-size:13px;color:var(--soft)}
.films span{display:inline-flex;align-items:center;gap:5px}
.sw{width:16px;height:16px;border-radius:4px;border:1.5px solid var(--lead);display:inline-block}
.note{padding:12px 14px;border-radius:14px;background:var(--blue-l);font-size:13px;line-height:1.6}
.sticky{position:sticky;bottom:72px;padding:12px 20px;background:var(--ground);border-top:1px solid var(--line);display:flex;gap:10px;z-index:5}
.sticky .btn{flex:1}
.plist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;font-size:14px;max-height:520px;overflow:auto}
.plist li{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:10px;cursor:pointer}
.plist li:hover,.plist li.on{background:var(--blue-l)}
.num{width:24px;height:24px;border-radius:12px;background:var(--blue);color:#fff;font-size:12px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.num.in{background:var(--sun);color:var(--ink)}
.palette{display:flex;flex-wrap:wrap;gap:6px}
.palette button{width:30px;height:30px;border-radius:8px;border:1.5px solid var(--lead)}
.palette button.on{outline:3px solid var(--blue);outline-offset:1px}
dl.calc{margin:0;display:grid;grid-template-columns:1fr auto;row-gap:8px;font-size:14px}
dl.calc dt{color:var(--soft)} dl.calc dd{margin:0;font-weight:700;text-align:right}
.editor{display:none}

/* ---------- photo ---------- */
.steps{list-style:none;margin:4px 20px 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:6px;font-size:11px;color:var(--muted);text-align:center}
.steps li i{display:block;height:4px;border-radius:2px;background:var(--line2);margin-bottom:5px}
.steps li.on i{background:var(--blue)} .steps li.cur{color:var(--ink);font-weight:700}
.drop{aspect-ratio:1;border-radius:18px;border:2px dashed var(--line2);background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--muted);text-align:center;padding:20px}
.selbox{position:relative;touch-action:none;user-select:none;border-radius:16px;overflow:hidden;background:#222}
.selbox canvas{display:block;width:100%}
.selbox .box{position:absolute;border:2px dashed var(--sun);border-radius:50%;box-shadow:0 0 0 2000px rgba(0,0,0,.35);pointer-events:none}
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.two figure{margin:0}.two figcaption{font-size:12px;color:var(--muted);text-align:center;margin-top:6px}
.prev{aspect-ratio:1;border-radius:16px;background:#fff;border:1px solid var(--line);overflow:hidden}
.prev svg{width:100%;height:100%;display:block}
input[type=range]{width:100%;accent-color:var(--blue);height:28px}
.sizes{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.sizes button{min-height:52px;border-radius:12px;border:1px solid var(--line2);background:#fff;font-size:13px;line-height:1.3}
.sizes button.on{border:2px solid var(--blue);background:var(--blue-l);font-weight:700}
.busy{display:flex;align-items:center;justify-content:center;gap:8px;color:var(--muted);font-size:14px;padding:12px}

/* ---------- cut ---------- */
.dev{display:flex;align-items:center;gap:12px;padding:14px}
.dev .ic{width:48px;height:48px;border-radius:14px;background:var(--blue-l);display:flex;align-items:center;justify-content:center}
.okdot{width:8px;height:8px;border-radius:4px;background:#2E9E5B;display:inline-block}
.sheets{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.sheet{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;background:#fff;border:1px solid var(--line);cursor:pointer}
.sheet.on{border:2px solid var(--blue)}
.sheet.done{background:#F4F1EA}
.mat{background:#DCEFF9;border:2px solid #9CC6E0;border-radius:8px}
.mat svg{display:block;width:100%;height:auto}
.toggle{display:flex;align-items:center;justify-content:space-between;min-height:48px;font-size:14px}
.toggle input{width:22px;height:22px;accent-color:var(--blue)}

.toast{position:fixed;left:50%;bottom:96px;transform:translateX(-50%);background:var(--ink);color:#fff;padding:12px 18px;border-radius:12px;font-size:14px;z-index:50;opacity:0;transition:opacity .2s;pointer-events:none;max-width:90vw;text-align:center}
.toast.show{opacity:1}

/* ---------- layouts (mobile first) ---------- */
.cut-pc,.photo-pc{display:flex;flex-direction:column;gap:14px}
:root{color-scheme:light}

/* ---------- PC ---------- */
@media (min-width: 960px){
  .bottomnav{display:none}
  .main{padding-bottom:40px}
  .topbar{display:flex;flex-wrap:wrap;align-items:center;gap:16px;padding:12px 28px;background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
  .topbar nav{display:flex;gap:4px;font-size:15px}
  .topbar nav a{padding:10px 14px;border-radius:10px;color:var(--ink)}
  .topbar nav a.on{background:var(--blue-l);color:var(--blue-d);font-weight:700}
  .topbar .search{flex:1 1 260px;max-width:420px;background:#F7F3EC;border:none}
  .topbar .cta{margin-left:auto;height:44px;padding:0 18px;border-radius:12px;background:var(--sun);color:var(--ink);font-weight:700;display:flex;align-items:center;gap:6px}
  .wrap{max-width:1360px;margin:0 auto;padding:24px 28px}
  .m-only{display:none!important}
  .pc-row{display:flex;flex-wrap:wrap;gap:24px;align-items:flex-start}
  .pc-side{flex:1 1 210px;max-width:240px;position:sticky;top:90px}
  .pc-main{flex:999 1 560px;min-width:0}
  .grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:18px}
  .catlist{display:flex;flex-direction:column;gap:2px;font-size:14px}
  .catlist a{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-radius:10px;color:var(--ink)}
  .catlist a.on{background:#fff;border:2px solid var(--lead);font-weight:700}
  .catlist a span{display:flex;align-items:center;gap:8px}
  .editor{display:flex;flex-wrap:wrap;gap:20px;align-items:flex-start}
  .editor .left{flex:1 1 220px;max-width:260px;padding:16px}
  .editor .center{flex:999 1 480px;min-width:0;padding:20px}
  .editor .right{flex:1 1 300px;max-width:340px;display:flex;flex-direction:column;gap:16px}
  .detail-m{display:none}
  .sticky{display:none}
  .home-pc .actions{grid-template-columns:repeat(2,minmax(0,360px))}
  .photo-pc{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 340px;gap:20px;align-items:start}
  .cut-pc{display:grid!important;grid-template-columns:minmax(0,1fr) 380px;gap:24px;align-items:start}
  .toast{bottom:32px}
}
@media (max-width: 959px){ .pc-only{display:none!important} }


/* ---------- added: size input, actions, work, kit, guide ---------- */
.sizes.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.sizes .custom{min-height:52px;border-radius:12px;border:1px solid var(--line2);background:#fff;font-size:13px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.sizes .custom.on{border:2px solid var(--blue);background:var(--blue-l);font-weight:700}
.sizes .custom span{display:flex;align-items:center;gap:2px;font-size:11px}
.sizes .custom input{width:38px;border:none;border-bottom:1px solid var(--line2);background:transparent;font:inherit;font-size:13px;text-align:center;padding:0}
.acts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.act{display:flex;flex-direction:column;align-items:center;gap:3px;padding:12px 6px;border-radius:14px;background:#fff;border:1px solid var(--line);color:var(--ink);text-align:center}
.act:hover{border-color:var(--blue)}
.act svg{color:var(--blue)} .act b{font-size:14px} .act small{font-size:11px;color:var(--muted)}
.right .acts{grid-template-columns:repeat(3,minmax(0,1fr))}
.work-pc,.kit-pc{display:flex;flex-direction:column;gap:14px}
.work-stage{aspect-ratio:1;max-width:620px;margin:0 auto}
.work-stage svg{width:100%;height:100%;display:block}
.work-stage path[data-n]{cursor:pointer}
.stepper{display:flex;align-items:center;border:1px solid var(--line2);border-radius:12px;overflow:hidden;background:#fff}
.stepper button{width:44px;height:44px;border:none;background:var(--chip);font-size:20px}
.stepper input{width:56px;height:44px;border:none;text-align:center;font:inherit;font-size:16px;font-weight:700;-moz-appearance:textfield}
.segl{display:inline-flex;align-items:center;height:36px;padding:0 14px;border-radius:10px;font-size:14px;color:var(--soft);white-space:nowrap}
.segl.on{background:#fff;color:var(--ink);font-weight:700;box-shadow:0 1px 2px rgba(30,34,48,.12)}
.gsteps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.gsteps li{display:flex;gap:12px;padding:14px;border-radius:16px;background:#fff;border:1px solid var(--line)}
.gnum{width:30px;height:30px;border-radius:15px;background:var(--blue);color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.gsteps b{font-size:15px} .gsteps p{margin:4px 0 0;font-size:14px;line-height:1.65;color:var(--soft)}
.gfaq{display:flex;flex-direction:column;gap:8px}
.gfaq details{padding:14px} .gfaq summary{font-weight:700;cursor:pointer;min-height:24px}
.gfaq p{margin:8px 0 0;font-size:14px;line-height:1.65;color:var(--soft)}
.linkbtn{border:none;background:none;color:var(--blue);font-size:12px;padding:4px;margin-left:auto}
@media (min-width:960px){
  .work-pc{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:24px;align-items:start}
  .kit-pc{display:grid;grid-template-columns:380px minmax(0,1fr);gap:24px;align-items:start}
}

/* ---------- print ---------- */
.printpage{display:none}
@media print{
  body *{visibility:hidden}
  .printpage,.printpage *{visibility:visible}
  .printpage{display:block;position:absolute;left:0;top:0;width:100%}
  @page{size:A4;margin:12mm}
}