/* 뜨개 스튜디오 — 틀과 공용 부품(src/pages/studio.ts 가 싣는다). 색·글꼴은 사이트 토큰(src/web.ts :root).
   모드만 쓰는 모양은 여기 말고 그 모드 모듈의 css 글자에 둔다(README.md). 폰 = 720px 이하. */
.st{--bar:52px;--st-save-r:0px;--float:rgba(255,255,255,.97);--ring:0 0 0 1px var(--hair);height:100%;display:grid;grid-template-rows:var(--bar) minmax(0,1fr);background:var(--wall);color:var(--ink);font-size:14px;line-height:1.4;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
.st [hidden]{display:none!important}
.st button{font:inherit;color:inherit;letter-spacing:inherit}
.st button,.st a{touch-action:manipulation}
.st .ic{display:inline-flex;flex:none}
.st .ic svg,.st svg.ic-svg{display:block;max-width:none}
.st .num{font-variant-numeric:tabular-nums}

/* 윗줄 */
.st-top{display:flex;align-items:center;gap:10px;padding:0 max(12px,env(safe-area-inset-right)) 0 max(12px,env(safe-area-inset-left));background:var(--wall);border-bottom:1px solid var(--hair);min-width:0;position:relative;z-index:20}
.st-logo{flex:none;display:block;width:50px}
.st-logo img{width:100%;height:auto}
.st-modes{flex:1 1 auto;min-width:0;align-self:stretch;display:flex;justify-content:flex-start;gap:4px;margin-left:8px;overflow-x:auto;scrollbar-width:none}
.st-modes::-webkit-scrollbar{display:none}
.st-modes a{display:inline-flex;align-items:center;gap:7px;flex:none;padding:0 12px;color:var(--ink3);text-decoration:none;font-weight:500;font-size:15px;white-space:nowrap;box-shadow:inset 0 -2px 0 transparent}
.st-modes a .ic{opacity:.6}
.st-modes a .short{display:none}
.st-modes a:hover{color:var(--ink)}
.st-modes a[aria-selected="true"]{color:var(--ink);font-weight:650;box-shadow:inset 0 -2.5px 0 var(--ink)}
.st-modes a[aria-selected="true"] .ic{opacity:1}
.st-modes a:focus-visible{outline-offset:-4px}
.st-home{display:none!important}
.st-acts{flex:none;display:flex;align-items:center;gap:6px}
.st-btn{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 12px;border-radius:10px;border:1px solid var(--hair);background:var(--paper);font-weight:600;cursor:pointer;white-space:nowrap}
.st-btn:hover{border-color:var(--ink3)}
.st-btn[aria-pressed="true"]{background:var(--hair2);border-color:var(--hair2)}
.st-btn.pri{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.st-btn:disabled,.st-ibtn:disabled{opacity:.4;cursor:default}
.st-ibtn{display:inline-flex;align-items:center;justify-content:center;flex:none;width:36px;height:36px;padding:0;border-radius:10px;border:0;background:transparent;color:var(--ink2);cursor:pointer}
.st-ibtn:hover{background:var(--hair2);color:var(--ink)}
.st-ibtn.sm{width:32px;height:32px}
.st-ibtn[aria-pressed="true"]{background:var(--ink);color:var(--paper)}

/* 가운데 — 캔버스와 떠 있는 도구, 아래 받침 */
.st-main{display:grid;grid-template-rows:minmax(0,1fr) auto;min-height:0}
.st-stage{position:relative;min-height:0;overflow:hidden;background-color:var(--paper);background-image:radial-gradient(rgba(27,23,20,.07) 1px,transparent 1px);background-size:16px 16px}
.st-canvas,.st-figure{position:absolute;inset:0}
.st-canvas canvas{display:block;width:100%;height:100%;max-width:none;touch-action:none;outline:none}
.st-canvas canvas:focus-visible{outline:2px solid var(--thread);outline-offset:-2px}
.st-figure{overflow:auto;-webkit-overflow-scrolling:touch}
.st-float{position:absolute;z-index:3;display:flex;gap:6px;align-items:center;max-width:calc(100% - 24px)}
/* 옆으로 넘기는 줄 — 안쪽 여백을 두어 칩 테두리 링·그림자가 잘리지 않게(자리는 여백만큼 당겨 그대로), 여백은 누름을 캔버스로 넘긴다 */
.st-float.tl,.st-float.bl{box-sizing:border-box;max-width:calc(100% - 16px);padding:4px 4px 10px;overflow-x:auto;scrollbar-width:none;pointer-events:none}
.st-float.tl>*,.st-float.bl>*{pointer-events:auto}
.st-float.tl{left:8px;top:8px}
.st-float.bl{left:8px;bottom:66px}
.st-float.br{right:12px;bottom:76px}
.st-float::-webkit-scrollbar,.st-pbar::-webkit-scrollbar{display:none}
.st-float:empty,.st-rail:empty,.st-pbar:empty{display:none}
.st-chip{display:inline-flex;align-items:center;gap:6px;flex:none;height:40px;padding:0 14px;border-radius:20px;border:0;background:var(--float);box-shadow:var(--e1),var(--ring);font-weight:600;white-space:nowrap;cursor:pointer}
.st-chip .ic{color:var(--ink3)}
.st-chip[aria-expanded="true"]{box-shadow:var(--e1),0 0 0 1.5px var(--ink)}
.st-rail{position:absolute;z-index:3;left:12px;top:64px;display:grid;gap:2px;max-height:calc(100% - 76px);overflow-y:auto;scrollbar-width:none;padding:4px;border-radius:22px;background:var(--float);box-shadow:var(--e1),var(--ring)}
.st-rail button{display:inline-flex;align-items:center;justify-content:center;flex:none;width:40px;height:40px;padding:0;border:0;border-radius:18px;background:transparent;color:var(--ink2);cursor:pointer}
.st-rail button:hover{background:var(--hair2)}
.st-rail button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.st-rail button:disabled{opacity:.3;cursor:default;background:transparent}
.st-rail hr{height:1px;margin:3px 8px;border:0;background:var(--hair)}
.st-pbar{position:absolute;z-index:3;left:50%;bottom:12px;transform:translateX(-50%);display:flex;gap:6px;max-width:calc(100% - 24px);padding:6px;border-radius:20px;background:var(--float);box-shadow:var(--e2),var(--ring);overflow-x:auto;scrollbar-width:none}
.st-tile{display:inline-flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;padding:0;border-radius:12px;border:1px solid var(--hair);background:var(--paper);color:var(--ink);cursor:pointer}
.st-tile.w{width:60px}
.st-tile:hover{border-color:var(--ink3)}
.st-tile[aria-pressed="true"]{border-color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.st-tile.more{background:var(--hair2);border-color:transparent;color:var(--ink2)}
.st-bar{display:inline-flex;align-items:center;gap:2px;flex:none;padding:3px;border-radius:14px;background:var(--float);box-shadow:var(--e1),var(--ring)}
.st-bar hr{width:1px;height:20px;margin:0 3px;border:0;background:var(--hair)}
.st-zoom{display:inline-flex;align-items:center;height:36px;border-radius:18px;background:var(--float);box-shadow:var(--e1),var(--ring)}
.st-zoom button{display:inline-flex;align-items:center;justify-content:center;width:34px;height:36px;padding:0;border:0;border-radius:18px;background:transparent;cursor:pointer}
.st-zoom .zf{width:auto;padding:0 2px}
.st-zoom b{min-width:3.2em;text-align:center;font-weight:600;font-size:13px;font-variant-numeric:tabular-nums}

/* 세그먼트·숫자 칸·팝오버 */
.st-seg{display:inline-flex;gap:2px;padding:3px;border-radius:12px;background:var(--hair2)}
.st-seg button{min-height:34px;min-width:44px;padding:0 12px;border:0;border-radius:9px;background:transparent;color:var(--ink2);font-weight:500;cursor:pointer;white-space:nowrap}
.st-seg button[aria-pressed="true"]{background:var(--paper);color:var(--ink);font-weight:650;box-shadow:0 1px 2px rgba(40,28,18,.12)}
.st-seg button:disabled{opacity:.4;cursor:default}
.st-field{display:grid;gap:6px;min-width:0}
.st-field>span{font-size:13px;color:var(--ink3)}
.st-field .box{display:flex;align-items:center;height:44px;border-radius:12px;border:1px solid var(--hair);background:var(--paper)}
.st-field .box:focus-within{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.st-field input{flex:1;min-width:0;width:100%;height:100%;border:0;background:transparent;color:var(--ink);font:600 16px/1 var(--sans);font-variant-numeric:tabular-nums;text-align:center;outline:none;padding:0;-moz-appearance:textfield;appearance:textfield;user-select:text;-webkit-user-select:text}
.st-field input::-webkit-outer-spin-button,.st-field input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.st-field .box button{display:inline-flex;align-items:center;justify-content:center;flex:none;width:40px;height:100%;padding:0;border:0;background:transparent;color:var(--ink2);cursor:pointer;border-radius:12px}
.st-field .u{flex:none;padding-right:12px;font-size:13px;color:var(--ink3)}
.st-pop,.st-menu{position:fixed;z-index:40;max-width:calc(100vw - 16px);max-height:calc(100dvh - 16px);overflow:auto;padding:10px;border-radius:16px;background:var(--paper);box-shadow:var(--e2),var(--ring)}
.st-pop{display:grid;gap:10px}
.st-pop:focus{outline:none}
.st-pop.sheet{left:0!important;right:0;top:auto!important;bottom:0;max-width:none;max-height:70dvh;border-radius:20px 20px 0 0;padding:16px 16px calc(16px + env(safe-area-inset-bottom))}
.st-pop .row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.st-pop .acts{display:flex;justify-content:flex-end;gap:8px}
.st-pop .ask{font-weight:600;padding:2px 2px 0}
.st-menu{display:grid;gap:2px;min-width:200px;padding:6px}
.st-menu [role="menuitem"]{display:flex;align-items:center;gap:10px;width:100%;min-height:40px;padding:0 10px;border:0;border-radius:10px;background:transparent;font-weight:500;text-align:left;cursor:pointer}
.st-menu [role="menuitem"]:hover{background:var(--hair2)}
.st-menu a[role="menuitem"]{color:var(--ink);text-decoration:none}
.st-mgroup{display:grid;gap:6px;padding:10px 10px 8px;border-top:1px solid var(--hair2)}
.st-mlabel{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink3)}
.st-mlabel img{width:20px;height:20px;border-radius:5px}
.st-langs,.st-stores{display:flex;flex-wrap:wrap;gap:6px}
.st-langs a,.st-stores a{display:inline-flex;align-items:center;min-height:32px;padding:0 10px;border-radius:9px;border:1px solid var(--hair);color:var(--ink2);text-decoration:none;font-size:13px;font-weight:500}
.st-langs a[aria-current]{border-color:var(--ink);color:var(--ink);font-weight:650}
.st-langs a:hover,.st-stores a:hover{border-color:var(--ink3);color:var(--ink)}

/* 계산 서랍 — 데스크톱은 캔버스 왼쪽에 뜬 판, 폰은 아래 시트 */
.st-drawer{position:absolute;z-index:5;left:12px;top:12px;bottom:12px;width:340px;max-width:calc(100% - 24px);overflow:auto;border-radius:20px;background:var(--paper);box-shadow:var(--e2),var(--ring);user-select:text;-webkit-user-select:text}
.st-stage.calc .st-canvas,.st-stage.calc .st-float,.st-stage.calc .st-rail,.st-stage.calc .st-pbar{display:none}
.st-stage.calc .st-figure{left:364px}

/* 아래 받침 — 서술형 도안·실 */
.st-dock{position:relative;background:var(--wall);border-top:1px solid var(--hair);min-width:0}
.st-grab{display:none}
.st-dtabs{display:flex;align-items:center;gap:2px;height:40px;padding:0 max(8px,env(safe-area-inset-right)) 0 max(8px,env(safe-area-inset-left))}
.st-dtabs [role="tab"]{height:32px;padding:0 10px;border:0;border-radius:9px;background:transparent;color:var(--ink3);font-weight:500;cursor:pointer}
.st-dtabs [role="tab"][aria-selected="true"]{color:var(--ink);font-weight:650;background:var(--hair2)}
.st-dtabs #st-copy{margin-left:auto}
.st-dtabs #st-dock-toggle .ic{transition:transform .15s ease-out}
.st-dtabs #st-dock-toggle[aria-expanded="true"] .ic{transform:rotate(180deg)}
.st-panes{height:min(34dvh,260px);border-top:1px solid var(--hair2);padding-bottom:env(safe-area-inset-bottom)}
.st-pane{height:100%;overflow:auto;-webkit-overflow-scrolling:touch;padding:4px max(14px,env(safe-area-inset-right)) 12px max(14px,env(safe-area-inset-left));user-select:text;-webkit-user-select:text}
.st-pane[hidden]{display:none}
.st-written{list-style:none;margin:0;padding:0}
.st-written li{display:grid;grid-template-columns:minmax(4.6em,max-content) minmax(0,1fr);gap:12px;padding:8px 0;border-top:1px solid var(--hair2);line-height:1.5}
.st-written li:first-child{border-top:0}
.st-written b{font-weight:650;white-space:nowrap;font-variant-numeric:tabular-nums}
.st-written .c{color:var(--ink3);white-space:nowrap}
.st-written .c.warn{color:var(--thread);font-weight:600}
.st-yarn{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.st-yarn td{padding:6px 4px;border-top:1px solid var(--hair2);vertical-align:middle}
.st-yarn tr:first-child td{border-top:0}
.st-yarn td.s{width:44px}
.st-yarn td.n{text-align:right;white-space:nowrap;font-weight:600}
.st-yarn td.b{width:30%;padding-left:12px}
.st-yarn .bar{display:block;height:4px;border-radius:2px;background:var(--hair2);overflow:hidden}
.st-yarn .bar i{display:block;height:100%;border-radius:2px;background:var(--ink3)}
.st-yarn td.p{width:3.6em;text-align:right;color:var(--ink3)}
.st-yarn .sw{display:inline-block;width:22px;height:22px;border-radius:6px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);vertical-align:middle}

/* 토스트 */
.st-toasts{position:fixed;z-index:60;left:0;right:0;top:calc(var(--bar) + 12px);display:grid;justify-items:center;gap:6px;pointer-events:none}
.st-toast{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 14px;border-radius:18px;background:var(--ink);color:var(--paper);font-weight:600;font-size:13.5px;box-shadow:var(--e2);animation:st-in .16s ease-out}
.st-toast.out{opacity:0;transition:opacity .2s linear}
.st-toast.act{pointer-events:auto;padding-right:6px}
.st-toast button{min-height:28px;padding:0 10px;margin-left:4px;border:0;border-radius:14px;background:rgba(255,255,255,.16);color:inherit;font:inherit;cursor:pointer}
.st-toast button:focus-visible{outline:2px solid var(--paper);outline-offset:1px}
@keyframes st-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.st-toast{animation:none}.st-toast.out,.st-panes,.st-dtabs #st-dock-toggle .ic{transition:none!important}}

@media (min-width:721px){
 .st-panes{display:grid;grid-template-columns:minmax(0,1fr) 340px;height:min(26dvh,220px)}
 .st-panes .st-pane+.st-pane{border-left:1px solid var(--hair2)}
 /* 펼치면 두 판이 나란히 — 탭은 판 제목이 된다(실 제목은 오른쪽 판 위, 복사는 서술형 판 오른쪽 끝) */
 .st-dock.open .st-dtabs{padding-left:0}
 .st-dock.open .st-dtabs [role="tab"]{padding:0 14px;background:transparent!important;color:var(--ink);font-weight:650;cursor:default;text-align:left}
 .st-dock.open .st-dtabs [data-pane="written"]{flex:1}
 .st-dock.open .st-dtabs #st-copy{order:1;margin:0 6px 0 0}
 .st-dock.open .st-dtabs [data-pane="yarn"]{order:2;width:298px}
 .st-dock.open .st-dtabs #st-dock-toggle{order:3}
}
/* 넓은 화면 — 확대 단추를 아래 띠 줄에 */
@media (min-width:1000px){.st-float.br{bottom:22px}}
/* 낮은 가로 화면(폰을 눕힌 것) — 윗줄·도구를 줄여 무대를 남긴다 */
@media (min-width:721px) and (max-height:560px){
 .st{--bar:44px}
 .st-modes a{font-size:14px}
 .st-btn,.st-ibtn{height:34px}
 .st-float.tl{top:4px}
 .st-rail{top:54px;max-height:calc(100% - 62px)}
 .st-rail button{width:34px;height:34px}
 .st-chip{height:36px}
 .st-panes{height:40dvh}
}
@media (max-width:720px){
 .st{--bar:48px;position:relative}
 .st-top{gap:4px;position:static}
 .st-logo{width:40px}
 .st-modes{margin-left:0}
 .st-modes a{padding:0 9px;gap:5px;font-size:14.5px}
 /* 모드가 여럿이면 로고를 더 보기 메뉴로 넘기고 탭 셋(아이콘 + 짧은 이름)이 폰 폭에 들게 */
 .st:not([data-modes="1"]) .st-logo{display:none}
 .st:not([data-modes="1"]) .st-home{display:flex!important}
 .st:not([data-modes="1"]) .st-modes a .full{display:none}
 .st:not([data-modes="1"]) .st-modes a .short{display:inline}
 .st-btn{padding:0 9px}
 .st-btn span{display:none}
 /* 저장은 무대 오른쪽 위에 뜬 둥근 단추(시안) */
 /* --st-save-r = 저장 단추가 무대 오른쪽 위에서 차지하는 폭(오른쪽 끝부터) — 위쪽 칩 줄·계산 그림이 그만큼 비운다 */
 .st{--st-save-r:52px}
 #st-save{position:absolute;z-index:6;right:12px;top:calc(var(--bar) + 12px);width:40px;height:40px;padding:0;justify-content:center;border-radius:20px;box-shadow:var(--e1)}
 .st-float.tl{max-width:calc(100% - 16px - var(--st-save-r))}
 .st-float.br{bottom:76px}
 .st-zoom .zo,.st-zoom .zi{display:none}
 .st-zoom .zf{padding:0 12px}
 .st-rail{top:60px;max-height:calc(100% - 140px)}
 .st-pbar{left:12px;right:12px;transform:none;max-width:none}
  /* 계산 시트는 늘 무대의 62%(계산마다 같은 높이 — 위 38% 그림 자리와 붙게) */
 .st-drawer{left:0;right:0;top:auto;bottom:0;width:auto;max-width:none;height:62%;border-radius:20px 20px 0 0}
 .st-stage.calc .st-figure{left:0;bottom:62%}
 .st-stage.calc~.st-dock{display:none}
 /* 아래 받침 — 탭 줄을 끌어 높이를 바꾼다(app.js 가 판 높이를 단계로) */
 .st-dtabs{height:46px;padding-top:6px;gap:4px;touch-action:none}
 .st-dtabs [role="tab"]{height:40px;padding:0 12px;border-radius:0;background:transparent!important;font-size:15px;box-shadow:inset 0 -2px 0 transparent}
 .st-dtabs [role="tab"][aria-selected="true"]{box-shadow:inset 0 -2px 0 var(--ink)}
 .st-grab{display:block;position:absolute;left:50%;top:5px;width:36px;height:4px;margin-left:-18px;border-radius:2px;background:var(--hair)}
 .st-panes{transition:height .22s cubic-bezier(.2,.8,.2,1)}
 .st-dock.drag .st-panes{transition:none}
}
/* 좁은 폰 — 탭 셋이 들게 여백·글자를 줄이고, 더 좁으면 고르지 않은 탭의 아이콘을 뺀다 */
@media (max-width:380px){
 .st-top{padding:0 max(8px,env(safe-area-inset-right)) 0 max(8px,env(safe-area-inset-left))}
 .st-modes{gap:0}
 .st-modes a{padding:0 7px;gap:4px;font-size:14px}
 #st-calc{padding:0 7px}
}
@media (max-width:340px){
 .st:not([data-modes="1"]) .st-modes a:not([aria-selected="true"]) .ic{display:none}
}
/* iOS Safari 가 입력칸을 누를 때 확대하지 않게 — 폰(눕혀도)·터치 화면은 16px 이상 */
@media (max-width:720px),(pointer:coarse){
 .st input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),.st select,.st textarea{font-size:16px!important}
}