/* =====================================================================
   theme-builder.css — /theme-builder/ 전용 추가 스타일.
   style.css 의 토큰(--bg/--surface/--line/--ink/--font-*)과 컴포넌트
   (.panel/.btn/.field/.faq/.toast …)를 그대로 쓰고, 여기서는 부족한 것만 더한다.

   ⚠️ 이서윤체(var(--font-kakao))는 "카카오톡 화면에 보이는 글자"에만 쓴다.
      우리 UI(제목·라벨·버튼·설명)는 기본 --font-ui(Pretendard).
      굵기가 400 하나뿐이라 목업 안에서는 font-weight 를 올리지 않고
      크기·색으로만 위계를 준다.
   ===================================================================== */

/* ------------------------------ 레이아웃 ----------------------------- */
.tb-layout {
  display: grid;
  gap: clamp(20px, 3vw, 28px);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
.tb-main { min-width: 0; }
.tb-main > section + section { margin-top: clamp(36px, 5vw, 56px); }
/* 상단 고정 헤더(약 64px) 아래로 제목이 숨지 않게 */
.tb-main > section, .tb-preview { scroll-margin-top: 84px; }

/* 2열 + 사이드 고정. 1100px 이면 1024 노트북에서 sticky 가 아예 꺼져 미리보기가
   화면에서 사라졌다(실측). 폭을 유동으로 바꾸고 기준을 960px 로 낮춘다. */
@media (min-width: 960px) {
  .tb-layout { grid-template-columns: minmax(0, 1fr) clamp(320px, 31vw, 484px); }
  .tb-main { order: 1; }
  .tb-preview { order: 2; position: sticky; top: 76px; }
  /* 패널 머리말·주석은 고정하고 폰 목업만 안에서 스크롤한다.
     (뷰포트가 낮아도 패널이 화면 밖으로 잘리지 않게 한다) */
  .tbp {
    max-height: calc(100vh - 252px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    padding-right: 4px;
  }
}

/* 좁은 화면: 옆에 둘 자리가 없으니 **위에 얇게 붙여 고정**한다.
   색을 바꾸는 동안 미리보기가 계속 보이는 게 이 페이지의 핵심이라,
   화면의 절반 이하를 내주더라도 사라지지 않게 하는 편이 낫다.
   폰은 가로로 넘겨 보고(스냅), 높이는 뷰포트에 맞춰 줄인다. */
@media (max-width: 959px) {
  .tb-preview {
    position: sticky;
    top: 52px;
    z-index: 25;
    margin: 0 calc(-1 * clamp(16px, 4vw, 32px));
    padding: 0 clamp(16px, 4vw, 32px);
  }
  .tb-preview__panel {
    max-height: 52vh;
    display: flex;
    flex-direction: column;
    background: color-mix(in srgb, var(--surface) 95%, transparent);
    backdrop-filter: blur(10px);
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.28);
  }
  .tb-preview__panel .stack-head { margin-bottom: 8px; }
  .tbp {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .tbp::-webkit-scrollbar { display: none; }
  /* 9:17.4 비율이라 높이는 폭 × 1.93. 20vh 로 잡으면 캡션 포함 ~44vh 안에 들어온다 */
  .tbp .phone {
    flex: 0 0 auto;
    width: min(178px, 20vh);
    max-width: none;
    scroll-snap-align: center;
  }
  .tb-preview .tb-note { display: none; }   /* 고정 영역에서는 설명문을 접는다 */
}

.tb-preview__panel { min-width: 0; }

.tb-note {
  color: var(--ink-3);
  font-size: 12px;
  line-height: 1.65;
  margin-top: 14px;
}
.tb-note b { color: var(--ink-2); font-weight: 500; }

/* ============================= 폰 목업 =============================== */
.tbp {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
}
.phone {
  container-type: inline-size;
  flex: 1 1 200px;
  max-width: 216px;
  min-width: 0;
  margin: 0;
}
.phone figcaption {
  margin-top: 8px;
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  text-transform: uppercase;
}
.phone__frame {
  border: 1px solid var(--line-2);
  border-radius: 22px;
  padding: 4px;
  background: var(--surface-2);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
}
.phone__screen {
  --u: 1cqi;
  border-radius: 18px;
  overflow: hidden;
  aspect-ratio: 9 / 17.4;
  display: flex;
  flex-direction: column;
  position: relative;
  font-family: var(--font-kakao);
  font-weight: 400;
  line-height: 1.35;
  -webkit-font-smoothing: antialiased;
}
.phone__screen * { font-weight: 400; }

@media (min-width: 960px) and (max-width: 1099px) {
  .phone { max-width: 210px; }
}
@media (max-width: 560px) {
  .phone { flex: 1 1 100%; max-width: 250px; }
}

/* ---- 상태바 (OS 영역: 카톡 글자가 아니므로 UI 폰트 유지) ---- */
.k-status {
  flex: 0 0 auto;
  background: var(--k-status-bg);
  color: var(--k-header-ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(var(--u) * 2.4) calc(var(--u) * 4) calc(var(--u) * 1.2);
  font-family: var(--font-mono);
  font-size: calc(var(--u) * 3.4);
}
.k-status__i { display: flex; align-items: center; gap: calc(var(--u) * 1); }
.k-status__i i { display: block; background: currentColor; opacity: 0.85; }
.k-sig  { width: calc(var(--u) * 3.4); height: calc(var(--u) * 2.4); clip-path: polygon(0 100%,20% 100%,20% 60%,0 60%,0 100%,30% 100%,30% 40%,50% 40%,50% 100%,60% 100%,60% 20%,80% 20%,80% 100%,90% 100%,90% 0,100% 0,100% 100%); }
.k-wifi { width: calc(var(--u) * 3.2); height: calc(var(--u) * 2.4); clip-path: polygon(50% 100%, 0 35%, 15% 22%, 50% 55%, 85% 22%, 100% 35%); }
.k-bat  { width: calc(var(--u) * 5); height: calc(var(--u) * 2.4); border-radius: calc(var(--u) * 0.6); }

/* ---- 상단바 ---- */
.k-appbar {
  flex: 0 0 auto;
  background: var(--k-header-bg);
  color: var(--k-header-ink);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 2);
  padding: calc(var(--u) * 2) calc(var(--u) * 3.4) calc(var(--u) * 2.6);
}
.k-appbar__back { font-size: calc(var(--u) * 6); line-height: 0.7; opacity: 0.9; }
.k-appbar__title {
  font-family: var(--font-kakao);
  font-size: calc(var(--u) * 4.6);
  letter-spacing: -0.01em;
  margin-right: auto;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.k-appbar--main .k-appbar__title { font-size: calc(var(--u) * 5.4); }
.k-appbar__ico { display: flex; gap: calc(var(--u) * 1.1); align-items: center; }
.k-dot { width: calc(var(--u) * 1.3); height: calc(var(--u) * 1.3); border-radius: 50%; background: currentColor; opacity: 0.75; }

/* ---- 상단 탭(전체/즐겨찾기/생일) ---- */
.k-tabs {
  flex: 0 0 auto;
  background: var(--k-header-bg);
  display: flex;
  gap: calc(var(--u) * 4);
  padding: 0 calc(var(--u) * 3.6) calc(var(--u) * 2.4);
}
.k-tab {
  font-family: var(--font-kakao);
  font-size: calc(var(--u) * 3.8);
  color: var(--k-browse-tab);
  padding-bottom: calc(var(--u) * 1.2);
}
.k-tab.is-on {
  color: var(--k-browse-tab-on);
  box-shadow: inset 0 calc(var(--u) * -0.7) 0 var(--k-browse-tab-on);
}

/* ---- 채팅방 ---- */
.k-chat {
  flex: 1 1 auto;
  background: var(--k-chat-bg);
  padding: calc(var(--u) * 2.6) calc(var(--u) * 3) calc(var(--u) * 2);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;   /* 실제 카톡처럼 최신 메시지가 아래에 붙는다 */
  gap: calc(var(--u) * 2.6);
  overflow: hidden;
}
.k-date { display: flex; justify-content: center; }
.k-date span {
  font-family: var(--font-kakao);
  font-size: calc(var(--u) * 2.9);
  color: var(--k-chat-ink);
  opacity: 0.72;
  background: color-mix(in srgb, var(--k-chat-ink) 12%, transparent);
  padding: calc(var(--u) * 0.7) calc(var(--u) * 2.4);
  border-radius: 99px;
}
.k-row { display: flex; gap: calc(var(--u) * 1.8); align-items: flex-start; }
.k-row--me { justify-content: flex-end; }
.k-col { display: flex; flex-direction: column; gap: calc(var(--u) * 1); min-width: 0; max-width: 78%; }
.k-col--r { align-items: flex-end; }
.k-avatar {
  flex: 0 0 auto;
  width: calc(var(--u) * 8);
  height: calc(var(--u) * 8);
  border-radius: 35%;
  background: color-mix(in srgb, var(--k-chat-ink) 22%, transparent);
}
.k-name {
  font-family: var(--font-kakao);
  font-size: calc(var(--u) * 3);
  color: var(--k-chat-ink);
  opacity: 0.82;
}
.k-line { display: flex; align-items: flex-end; gap: calc(var(--u) * 1.4); min-width: 0; }
.k-line--r { justify-content: flex-end; }
.k-bubble {
  font-family: var(--font-kakao);
  font-size: calc(var(--u) * 3.5);
  line-height: 1.42;
  padding: calc(var(--u) * 2) calc(var(--u) * 2.6);
  border-radius: calc(var(--u) * 3.4);
  min-width: 0;
  word-break: break-word;
}
.k-bubble--you { background: var(--k-you-fill); color: var(--k-you-ink); border-top-left-radius: calc(var(--u) * 0.8); }
.k-bubble--me  { background: var(--k-me-fill);  color: var(--k-me-ink);  border-top-right-radius: calc(var(--u) * 0.8); }
.k-time {
  flex: 0 0 auto;
  font-family: var(--font-kakao);
  font-size: calc(var(--u) * 2.5);
  color: var(--k-chat-ink);
  opacity: 0.68;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 0.8);
  white-space: nowrap;
}
.k-unread {
  font-family: var(--font-mono);
  font-size: calc(var(--u) * 2.5);
  color: var(--k-unread);
  opacity: 1;
}

/* ---- 입력창 ---- */
.k-input {
  flex: 0 0 auto;
  background: var(--k-input-bg);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 2);
  padding: calc(var(--u) * 2.4) calc(var(--u) * 3);
}
.k-input__plus {
  flex: 0 0 auto;
  width: calc(var(--u) * 6.4);
  height: calc(var(--u) * 6.4);
  border-radius: 50%;
  background: var(--k-input-menu-btn);
  color: var(--k-input-menu);
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: calc(var(--u) * 4.4);
  line-height: 1;
}
.k-input__box {
  flex: 1 1 auto;
  font-family: var(--font-kakao);
  font-size: calc(var(--u) * 3.3);
  color: var(--k-input-ink);
  opacity: 0.6;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.k-input__send {
  flex: 0 0 auto;
  width: calc(var(--u) * 6.4);
  height: calc(var(--u) * 6.4);
  border-radius: 50%;
  background: var(--k-input-send-btn);
  display: grid;
  place-items: center;
}
.k-input__send svg { width: 62%; height: 62%; fill: var(--k-input-send-ico); }

/* ---- 목록 ---- */
.k-list {
  flex: 1 1 auto;
  background: var(--k-bg);
  overflow: hidden;
  padding-bottom: calc(var(--u) * 1);
}
.k-cell {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 2.4);
  padding: calc(var(--u) * 2.2) calc(var(--u) * 3.6);
  background: var(--k-cell);
  border-bottom: 1px solid var(--k-cell-border);
}
.k-cell.is-pressed { background: var(--k-cell-pressed); }
.k-cell--me { background: var(--k-cell2); padding-top: calc(var(--u) * 3); padding-bottom: calc(var(--u) * 3); }
.k-avatar--lg { width: calc(var(--u) * 11); height: calc(var(--u) * 11); }
.k-cell .k-avatar { background: color-mix(in srgb, var(--k-title) 20%, transparent); }
.k-cell__txt { display: flex; flex-direction: column; gap: calc(var(--u) * 0.6); min-width: 0; }
.k-cell__name {
  font-family: var(--font-kakao);
  font-size: calc(var(--u) * 3.7);
  color: var(--k-title);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.k-cell.is-pressed .k-cell__name { color: var(--k-title-pressed); }
.k-cell__desc {
  font-family: var(--font-kakao);
  font-style: normal;
  font-size: calc(var(--u) * 3);
  color: var(--k-desc);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.k-cell.is-pressed .k-cell__desc { color: var(--k-desc-pressed); }
.k-cell--me .k-cell__desc { color: var(--k-para); }
.k-sect {
  font-family: var(--font-kakao);
  font-size: calc(var(--u) * 2.9);
  color: var(--k-section);
  padding: calc(var(--u) * 2.4) calc(var(--u) * 3.6) calc(var(--u) * 1.2);
  background: var(--k-bg);
}

/* ---- 하단 탭바 ---- */
.k-tabbar {
  flex: 0 0 auto;
  background: var(--k-tabbar);
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: calc(var(--u) * 2.2) calc(var(--u) * 1) calc(var(--u) * 3);
}
.k-tabbtn { position: relative; display: block; width: calc(var(--u) * 6); height: calc(var(--u) * 6); }
.k-tabbtn svg {
  width: 100%; height: 100%;
  fill: none;
  stroke: var(--k-tabico);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.k-tabbtn.is-on svg { stroke: var(--k-tabico-on); }
.k-badge {
  position: absolute;
  top: calc(var(--u) * -1);
  right: calc(var(--u) * -1.6);
  min-width: calc(var(--u) * 3.6);
  height: calc(var(--u) * 3.6);
  padding: 0 calc(var(--u) * 0.9);
  border-radius: 99px;
  background: var(--k-badge);
  color: var(--k-badge-ink);
  font-family: var(--font-mono);
  font-size: calc(var(--u) * 2.4);
  display: grid;
  place-items: center;
}

/* ---- 알림바 · 대화 공유바 · 잠금화면 ---- */
.k-notif {
  flex: 0 0 auto;
  background: var(--k-notif-bg);
  color: var(--k-notif-ink);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 2);
  padding: calc(var(--u) * 2.2) calc(var(--u) * 3.2);
}
.k-notif .k-avatar { width: calc(var(--u) * 7); height: calc(var(--u) * 7); background: color-mix(in srgb, var(--k-notif-ink) 24%, transparent); }
.k-notif__txt { display: flex; flex-direction: column; min-width: 0; gap: calc(var(--u) * 0.4); }
.k-notif__name { font-family: var(--font-kakao); font-size: calc(var(--u) * 3.1); }
.k-notif__msg  { font-family: var(--font-kakao); font-size: calc(var(--u) * 2.8); opacity: 0.8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.k-pass {
  flex: 1 1 auto;
  background: var(--k-pass-bg);
  color: var(--k-pass-ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(var(--u) * 5) calc(var(--u) * 4) calc(var(--u) * 3);
  gap: calc(var(--u) * 3.4);
}
.k-pass__title { font-family: var(--font-kakao); font-size: calc(var(--u) * 3.8); }
.k-pass__dots { display: flex; gap: calc(var(--u) * 3); }
.k-pass__dots i {
  width: calc(var(--u) * 3.2); height: calc(var(--u) * 3.2);
  border-radius: 50%;
  border: 1px solid currentColor;
}
.k-pass__dots i.is-on { background: currentColor; }
.k-keypad {
  width: 100%;
  margin-top: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(var(--u) * 2);
}
.k-key {
  background: var(--k-keypad-bg);
  color: var(--k-keypad-ink);
  border-radius: calc(var(--u) * 2);
  padding: calc(var(--u) * 2.2) 0;
  text-align: center;
  font-family: var(--font-mono);
  font-size: calc(var(--u) * 3.8);
}
.k-key.is-pressed { background: var(--k-keypad-pressed-bg); color: var(--k-keypad-pressed-ink); }
.k-pattern { width: 60%; height: calc(var(--u) * 0.8); border-radius: 99px; background: var(--k-pattern); }

.k-share {
  flex: 0 0 auto;
  background: var(--k-share-bg);
  color: var(--k-share-ink);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 2);
  padding: calc(var(--u) * 2.4) calc(var(--u) * 3.2);
}
.k-share__name { font-family: var(--font-kakao); font-size: calc(var(--u) * 3.1); margin-right: auto; }
.k-share__btn {
  font-family: var(--font-kakao);
  font-size: calc(var(--u) * 2.9);
  color: var(--k-share-btn);
  border: 1px solid currentColor;
  border-radius: 99px;
  padding: calc(var(--u) * 0.7) calc(var(--u) * 2.2);
}

/* ============================= 프리셋 ================================ */
.tb-presets {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
}
.tb-preset {
  display: block;
  width: 100%;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  padding: 11px 12px 12px;
  transition: border-color 0.15s var(--ease), transform 0.15s var(--ease);
}
.tb-preset:hover { border-color: var(--line-2); transform: translateY(-2px); }
.tb-preset.is-on { border-color: rgba(var(--c-rgb), 0.75); box-shadow: inset 0 0 0 1px rgba(var(--c-rgb), 0.35); }
.tb-preset__sw { display: flex; height: 22px; border-radius: 3px; overflow: hidden; margin-bottom: 9px; }
.tb-preset__sw i { flex: 1; }
.tb-preset__n { display: block; font-size: 13px; color: var(--ink); }
.tb-preset__src {
  display: inline-block;
  margin-top: 5px;
  font-size: 10.5px;
  letter-spacing: 0.02em;
  color: var(--ink-3);
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: 1px 7px;
}
.tb-preset__src[data-conf="verified"] { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, transparent); }

.tb-themename { margin-top: 16px; max-width: 380px; }
.tb-themename label { display: block; font-size: 12.5px; color: var(--ink-2); margin-bottom: 6px; }

/* ============================ 색 지정 UI ============================= */
.tb-groups { display: grid; gap: 10px; }
.tb-grp {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
}
.tb-grp > summary {
  list-style: none;
  cursor: pointer;
  padding: 13px 15px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--ink);
}
.tb-grp > summary::-webkit-details-marker { display: none; }
.tb-grp > summary::after {
  content: '';
  margin-left: auto;
  width: 8px; height: 8px;
  border-right: 1.4px solid var(--ink-3);
  border-bottom: 1.4px solid var(--ink-3);
  transform: rotate(45deg);
  transition: transform 0.18s var(--ease);
}
.tb-grp[open] > summary::after { transform: rotate(-135deg); }
.tb-grp > summary:hover { background: var(--surface-2); }
.tb-grp__n {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: 1px 7px;
}
.tb-grp__mini { display: flex; gap: 3px; }
.tb-grp__mini i { width: 12px; height: 12px; border-radius: 2px; border: 1px solid var(--line); }
.tb-grp__body { border-top: 1px solid var(--line); }

.fld {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 9px 13px;
  border-bottom: 1px solid var(--line);
}
.fld:last-child { border-bottom: 0; }
.fld:hover { background: var(--surface-2); }
.fld.is-warn { box-shadow: inset 3px 0 0 var(--no); }

.fld__sw {
  position: relative;
  flex: 0 0 auto;
  width: 30px; height: 30px;
  border-radius: var(--r);
  border: 1px solid var(--line-2);
  overflow: hidden;
  cursor: pointer;
  background-image:
    linear-gradient(45deg, rgba(128,128,128,0.35) 25%, transparent 25%, transparent 75%, rgba(128,128,128,0.35) 75%),
    linear-gradient(45deg, rgba(128,128,128,0.35) 25%, transparent 25%, transparent 75%, rgba(128,128,128,0.35) 75%);
  background-size: 10px 10px;
  background-position: 0 0, 5px 5px;
}
.fld__sw input[type="color"] {
  position: absolute; inset: -6px;
  width: calc(100% + 12px); height: calc(100% + 12px);
  border: 0; padding: 0; cursor: pointer; opacity: 0;
}
.fld__chip { position: absolute; inset: 0; pointer-events: none; }

.fld__txt { flex: 1 1 130px; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.fld__label { font-size: 13px; color: var(--ink); line-height: 1.3; }
.fld__key {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fld__key[data-kind="artwork"] { color: color-mix(in srgb, var(--ok) 70%, var(--ink-3)); }

.fld__hex {
  flex: 0 0 86px;
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 6px 7px;
  min-width: 0;
}
.fld__hex:focus-visible { outline: none; border-color: rgba(var(--c-rgb), 0.7); }
.fld__hex.is-bad { border-color: var(--no); }

.fld__a {
  flex: 0 0 58px;
  font-family: var(--font-mono);
  font-size: 12px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 6px 6px;
  min-width: 0;
}
.fld__aw { flex: 0 0 auto; display: flex; align-items: center; gap: 4px; font-size: 10px; color: var(--ink-3); }

.fld__rst {
  flex: 0 0 auto;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--r);
  color: var(--ink-3);
  opacity: 0;
  transition: opacity 0.15s var(--ease);
}
.fld:hover .fld__rst, .fld__rst:focus-visible, .fld.is-dirty .fld__rst { opacity: 1; }
.fld__rst:hover { color: var(--ink); border-color: var(--line-2); }
.fld__rst svg { width: 13px; height: 13px; }

.fld__msg {
  flex: 1 1 100%;
  font-size: 11.5px;
  color: var(--no);
  line-height: 1.5;
}
.fld__note {
  flex: 1 1 100%;
  font-size: 11px;
  color: var(--ink-3);
  line-height: 1.5;
}

.tb-auto {
  padding: 11px 13px 13px;
  border-top: 1px solid var(--line);
  background: var(--bg-2);
}
.tb-auto h4 { margin: 0 0 6px; font-size: 11.5px; font-weight: 500; color: var(--ink-2); letter-spacing: 0.02em; }
.tb-auto ul { display: grid; gap: 4px; }
.tb-auto li { font-size: 11px; color: var(--ink-3); line-height: 1.5; }
.tb-auto code { font-family: var(--font-mono); font-size: 10px; color: var(--ink-2); }

/* =========================== 가독성 점검 ============================= */
.tb-checks { display: grid; gap: 8px; }
.tb-chk {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  padding: 10px 13px;
}
.tb-chk__demo {
  flex: 0 0 auto;
  min-width: 92px;
  text-align: center;
  border-radius: var(--r);
  padding: 9px 10px;
  font-size: 12.5px;
  border: 1px solid var(--line);
}
.tb-chk__txt { flex: 1 1 auto; min-width: 0; }
.tb-chk__name { font-size: 13px; color: var(--ink); }
.tb-chk__hint { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; line-height: 1.45; }
.tb-chk__ratio {
  flex: 0 0 auto;
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.tb-chk__ratio small { font-size: 10px; color: var(--ink-3); display: block; text-align: right; letter-spacing: 0.06em; }
.tb-chk--bad  { border-color: color-mix(in srgb, var(--no) 55%, transparent); }
.tb-chk--bad  .tb-chk__ratio { color: var(--no); }
.tb-chk--warn { border-color: color-mix(in srgb, #eab308 45%, transparent); }
.tb-chk--warn .tb-chk__ratio { color: #eab308; }
.tb-chk--ok   .tb-chk__ratio { color: var(--ok); }

@media (max-width: 480px) {
  .tb-chk { flex-wrap: wrap; }
  .tb-chk__demo { flex: 1 1 100%; }
}

/* ============================== 의뢰서 =============================== */
.tb-form__grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.tb-f { display: block; min-width: 0; }
.tb-f--wide { grid-column: 1 / -1; }
.tb-f > span {
  display: flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--ink-2); margin-bottom: 6px;
}
.tb-f > span em {
  font-style: normal;
  font-size: 10px;
  color: var(--c);
  border: 1px solid rgba(var(--c-rgb), 0.4);
  border-radius: 99px;
  padding: 0 6px;
}
@media (max-width: 560px) { .tb-form__grid { grid-template-columns: minmax(0, 1fr); } }

.tb-select, .tb-f textarea {
  width: 100%;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  color: var(--ink);
  font: inherit;
  font-size: 13.5px;
  padding: 9px 11px;
}
.tb-f textarea { resize: vertical; line-height: 1.6; min-height: 92px; }
.tb-select:focus-visible, .tb-f textarea:focus-visible { outline: none; border-color: rgba(var(--c-rgb), 0.7); }
.tb-count { display: block; text-align: right; margin-top: 4px; font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3); }

.tb-dl { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.tb-warn {
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--no);
  line-height: 1.5;
}
.tb-warn[hidden] { display: none; }

.tb-howto {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.tb-howto h3 { font-size: 14px; font-weight: 500; color: var(--ink); margin-bottom: 10px; }
.tb-howto ol { display: grid; gap: 7px; counter-reset: s; padding: 0; list-style: none; }
.tb-howto li {
  position: relative;
  padding-left: 24px;
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.6;
}
.tb-howto li::before {
  counter-increment: s;
  content: counter(s);
  position: absolute; left: 0; top: 1px;
  width: 17px; height: 17px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  display: grid; place-items: center;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-3);
}
.tb-howto li b { color: var(--ink); font-weight: 500; }
.tb-howto code { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-2); }

.tb-contact {
  margin-top: 14px;
  padding: 11px 13px;
  border: 1px dashed var(--line-2);
  border-radius: var(--r-lg);
  background: var(--bg-2);
  font-size: 13.5px;
  color: var(--ink);
  line-height: 1.6;
  word-break: break-all;
}
.tb-contact a { color: var(--c); text-decoration: none; }
.tb-contact a:hover { text-decoration: underline; }
.tb-contact em { font-style: normal; display: block; margin-top: 5px; font-size: 11.5px; color: var(--ink-3); }

/* ===================================================================== *
   터치 기기 (pointer: coarse) — style.css 와 같은 원칙.
   ① hover 로만 드러나던 UI 를 상시 노출 (터치엔 hover 가 없어 도달 불가였다)
   ② 손가락으로 잡기 어려운 히트 영역을 넓힌다
   ===================================================================== */
@media (pointer: coarse) {
  /* 항목별 "초기화" 버튼은 hover 로만 보였다 → 항상 보이게 */
  .fld__rst { opacity: 1; width: 40px; height: 40px; }
  .fld__rst svg { width: 16px; height: 16px; }
  .tb-dl .btn { padding: 12px 16px; }   /* 공용 .btn 을 이 페이지 안에서만 키운다 */

  /* 색 견본·입력칸을 손가락 크기로 */
  .fld { padding: 12px 13px; }
  .fld__sw { width: 38px; height: 38px; }
  .fld__hex { flex-basis: 96px; padding: 10px 8px; }
  .fld__a { flex-basis: 66px; padding: 10px 6px; }

  /* 그룹 펼침·프리셋은 최소 44px 높이 확보 */
  .tb-grp > summary { padding: 16px 15px; }
  .tb-preset { padding: 13px 13px 14px; }

  /* hover 연출은 터치에서 의미가 없다 */
  .fld:hover { background: none; }
  .tb-preset:hover { transform: none; }
  .tb-grp > summary:hover { background: none; }
}