/* 홈페이지 키트 화면. 왼쪽에서 고르고 오른쪽에서 본다.
   미리보기는 shadow root 안에서 그려지므로 여기 규칙이 부품에 새지 않는다(그 반대도 마찬가지). */

.sk{display:grid; grid-template-columns:256px minmax(0,1fr); min-height:100vh; align-items:start;}
@media (max-width:860px){ .sk{grid-template-columns:1fr;} }

/* ── 왼쪽 선택 패널 ── */
.sk-side{position:sticky; top:0; height:100vh; overflow-y:auto; padding:20px 18px 32px;
  background:var(--card); border-right:1px solid var(--line);}
@media (max-width:860px){ .sk-side{position:static; height:auto; border-right:0; border-bottom:1px solid var(--line);} }
.sk-side h1{font-size:16px; font-weight:800; letter-spacing:-.02em;}
.sk-side .eyebrow{font-size:10.5px; font-weight:800; color:var(--accent); letter-spacing:.1em; text-transform:uppercase;}
.sk-side .back{display:inline-block; margin-top:12px; font-size:11.5px; font-weight:700; color:var(--sub);}
.sk-side .back:hover{color:var(--accent); text-decoration:none;}

/* 그룹이 여섯 개나 세로로 이어져서, 구분선이 없으면 전부 한 덩어리로 읽힌다.
   위에 선을 긋고 라벨을 선 위에 얹어 "여기부터 다른 종류"임을 보이게 한다. */
.sk-grp{margin-top:16px; padding-top:14px; border-top:1px solid var(--line);}
.sk-lab{font-size:10.5px; font-weight:800; color:var(--sub); letter-spacing:.08em; text-transform:uppercase;}
.sk-grp > .sk-lab{margin-bottom:8px; display:flex; align-items:center; gap:6px;}
.sk-grp > .sk-lab::after{content:''; flex:1; height:1px; background:var(--line); opacity:.55;}

/* 팔레트 고르기 */
#sk-cq{width:100%; font-family:inherit; font-size:12.5px; font-weight:600; color:var(--ink);
  background:var(--bg); border:1px solid var(--line); border-radius:8px; padding:8px 10px;}
#sk-cq:focus{outline:2px solid var(--accent); outline-offset:-1px;}
#sk-cq::placeholder{color:var(--sub); opacity:1;}
/* 컨셉 목록은 "고르는" 자리라 한 줄이 손가락·눈에 하나씩 잡혀야 한다.
   처음엔 gap:3px / padding:6px 이라 한 줄 17px — 목록이 아니라 한 덩어리로 읽혔다.
   44px 까지 올렸다가 이번엔 버튼이 커 보여 34px 로 내렸다. 줄이 갈라져 보이는 선은 지키되
   덩어리로는 안 보이는 지점이 그쯤이다. 상자 높이는 이 값에서 계산하므로 여기만 바꾸면 된다. */
/* 목록이 몇 개짜리인지 위에 적어 둔다 — 없으면 화면에 보이는 만큼이 전부인 줄 안다. */
.sk-hitn{margin-top:8px; font-size:10.5px; font-weight:700; color:var(--sub); letter-spacing:.01em;}
/* 상자는 딱 다섯 줄 높이에서 잠근다 — 더보기를 눌러도 상자가 안 커지고 안에서만 스크롤한다.
   예전엔 max-height 가 320px 이라 5줄(252px)에서 한 번 더 커지면서 아래 항목이 통째로 밀렸다. */
.sk-hits{--sk-row:34px; --sk-gap:5px;
  margin-top:6px; display:flex; flex-direction:column; gap:var(--sk-gap);
  max-height:calc(var(--sk-row)*5 + var(--sk-gap)*4 + 4px);
  overflow-y:auto; padding:2px 3px 2px 0;}
/* 목록이 길어졌으니 스크롤 막대를 보이게 둔다 — 더 있다는 신호다 */
.sk-hits::-webkit-scrollbar{width:8px;}
.sk-hits::-webkit-scrollbar-thumb{background:var(--line); border-radius:999px;}
.sk-hits::-webkit-scrollbar-track{background:transparent;}
/* 줄 높이를 고정하고 flex:none 을 준다 — 안 그러면 목록을 펼쳤을 때 줄들이 눌려 납작해진다. */
.sk-hit{display:flex; align-items:center; gap:8px; width:100%; flex:none; height:var(--sk-row);
  font-family:inherit; font-size:12px;
  font-weight:600; line-height:1.4; text-align:left; color:var(--ink); background:var(--bg);
  border:1px solid var(--line); border-radius:7px; padding:0 10px; cursor:pointer; overflow:hidden;}
.sk-hit b{flex:none; min-width:19px; font-size:9.5px; font-weight:800; color:var(--sub);
  font-variant-numeric:tabular-nums;}
.sk-hit span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.sk-hit:hover{border-color:var(--accent); color:var(--accent);}
.sk-hit.on{background:var(--soft); border-color:var(--accent);}

/* 현재 팔레트 스와치 — 5칸은 table 말고 그리드로(20%씩 유동, 세로 이음매 없음) */
.sk-sw{margin-top:9px; display:grid; grid-template-columns:repeat(5,minmax(0,1fr));
  border:1px solid var(--line); border-radius:8px; overflow:hidden;}
.sk-sw i{display:block; height:26px;}
.sk-swn{margin-top:6px; font-size:11px; color:var(--sub); overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap;}
.sk-pal{margin-top:7px; width:100%; font-family:inherit; font-size:12px; font-weight:600;
  color:var(--ink); background:var(--bg); border:1px solid var(--line); border-radius:8px; padding:7px 9px;}

/* 칩 줄 (모드·업종·변형·페이지) */
.sk-chips{display:flex; flex-wrap:wrap; gap:5px;}
.sk-chip{font-family:inherit; font-size:11.5px; font-weight:700; color:var(--sub);
  background:var(--bg); border:1px solid var(--line); border-radius:999px;
  padding:5px 12px; cursor:pointer; white-space:nowrap;}
.sk-chip:hover{border-color:var(--accent); color:var(--accent);}
.sk-chip.on{background:var(--ink); color:var(--bg); border-color:var(--ink);}
/* 업종 14개 · 템플릿 5개를 세로줄로 깔면 그것만으로 한 판을 스크롤해야 했다.
   업종은 셀렉트에 넣고, 템플릿은 이름을 줄여 칩 한두 줄에 앉힌다.
   설명은 고른 하나만 아래에 띄운다 — 열네 줄이 전부 설명을 달면 목록이 아니라 벽이 된다. */
.sk-sel{margin-top:0; width:100%; font-family:inherit; font-size:12.5px; font-weight:700;
  color:var(--ink); background:var(--bg); border:1px solid var(--line); border-radius:8px;
  padding:9px 10px; cursor:pointer;}
.sk-sel:hover{border-color:var(--accent);}
.sk-note{margin-top:8px; border:1px solid var(--ink); border-radius:8px; padding:9px 11px;
  font-size:11px; line-height:1.55;}
.sk-note b{display:block; font-size:11.5px; font-weight:800; color:var(--ink); margin-bottom:3px;}
.sk-note span{color:var(--sub);}
.sk-vnote{margin-top:8px; font-size:10.5px; line-height:1.55; color:var(--sub);}
.sk-vnote b{color:var(--ink); font-weight:800;}

/* 팔레트는 355개다 — 다섯 줄만 깔고 나머지는 눌러서 꺼낸다 */
.sk-more{margin-top:6px; width:100%; font-family:inherit; font-size:10.5px; font-weight:700;
  color:var(--sub); background:transparent; border:1px dashed var(--line); border-radius:7px;
  padding:6px 9px; cursor:pointer;}
.sk-more:hover{border-color:var(--accent); color:var(--accent);}

/* ── 오른쪽 본문 ── */
.sk-main{min-width:0; padding:20px 24px 60px;}

/* 회사 정보는 미리보기 아래에 홀로 남는 덩어리라 왼쪽 끝에 붙으면 흘러내린 것처럼 보인다.
   미리보기(가운데 정렬)와 같은 축으로 맞춘다. 다른 페이지의 푸터는 그대로 둔다. */
.sk-main .sitefoot{text-align:center; max-width:1040px; margin-inline:auto; padding-top:28px;
  border-top:1px solid var(--line);}

/* ── 단독 화면(?solo=1) ──
   키트 껍데기를 전부 걷고 시안만 남긴다. 같은 페이지라 상태가 주소째 넘어오고,
   부품 CSS 는 여전히 shadow root 안에 있으므로 여기 규칙이 시안에 새지 않는다. */
.sk-solo .sk{grid-template-columns:1fr;}
.sk-solo .sk-side,
.sk-solo .sk-bar,
.sk-solo .sk-stack,
.sk-solo .sk-wt,
.sk-solo .sitefoot{display:none;}
.sk-solo .sk-main{padding:0;}
.sk-solo .sk-win{border:0; border-radius:0; box-shadow:none; max-width:none;}
.sk-solo #sk-all{padding:16px;}
@media (max-width:520px){ .sk-main{padding:12px 10px 44px;} .sk-side{padding:14px 14px 24px;} }
.sk-bar{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:14px;}
.sk-crumb{font-size:13px; font-weight:700; color:var(--ink); min-width:0;}
.sk-crumb em{font-style:normal; font-weight:500; color:var(--sub);}
.sk-bar .sk-spacer{flex:1 1 auto;}
.sk-copy{font-family:inherit; font-size:11.5px; font-weight:700; color:var(--sub);
  background:var(--card); border:1px solid var(--line); border-radius:999px; padding:6px 13px; cursor:pointer;}
.sk-copy:hover{border-color:var(--accent); color:var(--accent);}

/* 부품 스택 표시 — 지금 이 페이지가 무엇으로 만들어졌는지 */
.sk-stack{display:flex; flex-wrap:wrap; align-items:center; gap:4px; margin-bottom:14px; font-size:11px;}
/* 누르면 미리보기의 그 부품으로 간다 — 그러니 눌러지는 것처럼 보여야 한다. */
.sk-bk{display:inline-flex; align-items:center; gap:5px; background:var(--card);
  border:1px solid var(--line); border-radius:6px; padding:4px 9px; color:var(--sub);
  font-family:inherit; font-size:11px; cursor:pointer; line-height:1.5;}
.sk-bk:hover{border-color:var(--accent); color:var(--accent);}
.sk-bk:hover code{color:var(--accent);}
.sk-bk:focus-visible{outline:2px solid var(--accent); outline-offset:1px;}
.sk-bk code{font-family:Consolas,'D2Coding',monospace; font-size:10.5px; font-weight:700; color:var(--ink);}
.sk-bk.kit code{color:var(--accent);}
.sk-arw{color:var(--line); font-size:10px;}

/* 브라우저 창 목업 — 미리보기가 "홈페이지"로 읽히게 하는 장치 */
.sk-win{border:1px solid var(--line); border-radius:12px; overflow:hidden;
  background:var(--card); box-shadow:var(--shadow); margin:0 auto; max-width:100%;
  transition:max-width .22s ease;}
@media (prefers-reduced-motion: reduce){ .sk-win{transition:none;} }
.sk-wt{display:flex; align-items:center; gap:7px; padding:9px 12px; border-bottom:1px solid var(--line);
  background:var(--bg);}
.sk-dot{width:9px; height:9px; border-radius:50%; background:var(--line); flex:none;}
.sk-url{flex:1; min-width:0; margin-left:5px; font-size:10.5px; color:var(--sub);
  background:var(--card); border:1px solid var(--line); border-radius:999px; padding:3px 11px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-family:Consolas,'D2Coding',monospace;}
.sk-view{display:block; overflow-x:hidden;}

/* 훑어보기 — 한 변형의 모든 페이지를 나란히 */
.sk-all{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:16px;}
.sk-cell{border:1px solid var(--line); border-radius:10px; overflow:hidden; background:var(--card);}
.sk-ch{display:flex; align-items:baseline; gap:7px; padding:9px 12px; border-bottom:1px solid var(--line);
  font-size:12px; font-weight:700; cursor:pointer;}
.sk-ch span{margin-left:auto; font-size:10px; font-weight:600; color:var(--sub);
  font-family:Consolas,'D2Coding',monospace;}
.sk-ch:hover{color:var(--accent);}
.sk-cv{height:360px; overflow:hidden; position:relative;}
.sk-cv > div{position:absolute; top:0; left:0; width:1100px; transform:scale(.34); transform-origin:0 0;}

.sk-empty{padding:44px; text-align:center; color:var(--sub); font-size:13px;
  border:1px dashed var(--line); border-radius:12px;}
.sk-toast{position:fixed; left:50%; bottom:26px; transform:translateX(-50%);
  background:var(--ink); color:var(--bg); font-size:12.5px; font-weight:700;
  padding:9px 18px; border-radius:999px; opacity:0; pointer-events:none; transition:opacity .18s;}
.sk-toast.on{opacity:1;}

/* 앱 모드 — 브라우저 창 대신 폰 테두리를 두른다. 같은 화면도 폰 안에 들어가면
   "모바일로 줄인 웹"이 아니라 "앱"으로 읽힌다. 테두리는 바깥 화면 색이라 여기서 칠한다. */
.sk-win.phone{position:relative; border-radius:38px; padding:10px;
  background:var(--ink); border-color:var(--ink);}
.sk-win.phone .sk-wt{display:none;}
.sk-win.phone .sk-view{border-radius:29px; overflow:hidden;}
/* 노치와 홈 인디케이터 — 폰이라는 신호 */
.sk-win.phone::before{content:''; position:absolute; top:10px; left:50%; transform:translateX(-50%);
  width:104px; height:22px; border-radius:0 0 13px 13px; background:var(--ink); z-index:2;}
.sk-win.phone::after{content:''; position:absolute; bottom:16px; left:50%; transform:translateX(-50%);
  width:104px; height:4px; border-radius:999px; background:var(--bg); opacity:.55; z-index:2;}