/* =====================================================================
   theme-commission.css — /theme-commission/ (간단 버전) 전용 스타일.

   style.css 의 토큰(--bg/--surface/--line/--ink/--font-*)과 컴포넌트
   (.panel/.btn/.field/.faq/.toast/.sect-head …)를 그대로 쓰고 부족한 것만 더한다.
   레이아웃·스티키 미리보기 규칙은 theme-builder.css 에서 검증된 것을 따른다
   (960px 기준 2열 → 그 아래는 상단 스티키 52vh + 폰 가로 스냅).

   ⚠️ 이서윤체(var(--font-kakao))는 "카카오톡 화면에 보이는 글자"에만 쓴다.
      우리 UI(제목·라벨·색코드)는 --font-ui / --font-mono.
   ===================================================================== */

/* ------------------------------ 레이아웃 ----------------------------- */
.tc-layout {
  display: grid;
  gap: clamp(20px, 3vw, 28px);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
.tc-main { min-width: 0; }
.tc-main > section + section { margin-top: clamp(36px, 5vw, 56px); }
.tc-main > section, .tc-preview { scroll-margin-top: 84px; }

.tc-tolong { margin-top: 14px; font-size: 13px; color: var(--ink-3); }
.tc-tolong a { color: var(--c); text-decoration: none; border-bottom: 1px solid rgba(var(--c-rgb), 0.4); }
.tc-tolong a:hover { border-bottom-color: var(--c); }

/* 미리보기는 화면 크기와 무관하게 **위에 고정**하고, 설정은 그 아래에서 바꾼다.
   grid 행 안에 두면 sticky 이동 범위가 자기 행으로 갇히므로 흐름 배치를 쓴다. */
@media (min-width: 960px) {
  .tc-layout { display: block; }
  .tc-main { margin-top: clamp(20px, 3vw, 28px); }
  .tc-preview { position: sticky; top: 60px; z-index: 25; }
  .tc-preview__panel {
    background: color-mix(in srgb, var(--surface) 95%, transparent);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line-2);
  }
  /* 세 화면을 한 줄에 — 접히면 세로로 쌓여 고정 영역이 화면을 다 먹는다 */
  .tcp { flex-wrap: nowrap; justify-content: center; }
  .tcp .phone { flex: 0 0 auto; width: min(190px, 21vh); max-width: none; }
}

/* 좁은 화면: 위에 얇게 붙여 고정한다. 색을 바꾸는 동안 미리보기가 계속 보이는 게
   이 페이지의 핵심이라, 화면 절반 이하를 내주더라도 사라지지 않게 한다. */
@media (max-width: 959px) {
  .tc-preview {
    position: sticky;
    top: 52px;
    z-index: 25;
    margin: 0 calc(-1 * clamp(16px, 4vw, 32px));
    padding: 0 clamp(16px, 4vw, 32px);
  }
  .tc-preview__panel {
    max-height: 52vh;
    display: flex;
    flex-direction: column;
    background: color-mix(in srgb, var(--surface) 95%, transparent);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line-2);
  }
  .tc-preview__panel .stack-head { margin-bottom: 8px; }
  .tcp {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    /* ⚠️ flex-wrap · gap 은 여기서 정해도 소용없다 — 아래쪽 기본 `.tcp` 규칙이
       같은 특이도로 나중에 와서 덮어쓴다. 파일 맨 끝에서 다시 지정한다. */
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .tcp::-webkit-scrollbar { display: none; }
  .tcp .phone {
    flex: 0 0 auto;
    width: min(178px, 20vh);
    max-width: none;
    scroll-snap-align: center;
  }
  .tc-preview .tc-note { display: none; }
}

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

.tc-note {
  color: var(--ink-3);
  font-size: 12px;
  line-height: 1.65;
  margin-top: 14px;
}
.tc-note b { color: var(--ink-2); font-weight: 500; }
.tc-note a { color: var(--c); text-decoration: none; }
.tc-note a:hover { text-decoration: underline; }

/* ============================= 폰 목업 =============================== */
.tcp {
  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);
}
.phone__frame {
  border: 1px solid var(--line-2);
  border-radius: 22px;
  padding: 4px;
  background: var(--surface-2);
}
.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; } }

/* ---------------------------- 채팅방 --------------------------------- */
.scr-chat { background: var(--kc-chat-bg); }
/* 사양서 이미지처럼 말풍선은 위쪽에 모이고 입력창은 아래에 붙는다 */
.kc-chat {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: calc(var(--u) * 5);
  padding: calc(var(--u) * 8) calc(var(--u) * 4);
  overflow: hidden;
}
.kc-row { display: flex; flex-direction: column; align-items: flex-start; gap: calc(var(--u) * 1.4); min-width: 0; }
.kc-row--me { align-items: flex-end; }
/* 상대방 이름 · 나 — 카카오톡이 직접 그리는 고정 회색 (#7C7B7C @ 40%) */
.kc-name {
  font-family: var(--font-kakao);
  font-size: calc(var(--u) * 3.4);
  color: var(--kc-gray);
  padding: 0 calc(var(--u) * 1);
}
.kc-line { display: flex; align-items: flex-end; gap: calc(var(--u) * 1.6); min-width: 0; }
.kc-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.8);
  border-radius: calc(var(--u) * 4);
  border: max(1px, calc(var(--u) * 0.5)) solid transparent;
  background-size: cover;
  background-position: center;
  /* 목업 안 문구는 고정 문자열이라 줄바꿈시키지 않는다(사양서 이미지와 동일하게 한 줄).
     넘치더라도 .kc-chat 의 overflow:hidden 이 잘라준다. */
  white-space: nowrap;
}
.kc-bubble--you {
  background-color: var(--kc-you-fill);
  border-color: var(--kc-you-line);
  color: var(--kc-you-ink);
  background-image: var(--kc-img-bubble, none);
}
.kc-bubble--me {
  background-color: var(--kc-me-fill);
  border-color: var(--kc-me-line);
  color: var(--kc-me-ink);
  background-image: var(--kc-img-bubble, none);
}
.kc-unread {
  font-family: var(--font-kakao);
  font-size: calc(var(--u) * 3);
  color: var(--kc-unread);
}
.kc-input {
  flex: 0 0 auto;
  padding: calc(var(--u) * 3) calc(var(--u) * 3.4) calc(var(--u) * 4);
}
.kc-input__pill {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: calc(var(--u) * 2);
  background: var(--kc-input-bg);
  border-radius: 99px;
  padding: calc(var(--u) * 1.6) calc(var(--u) * 1.8);
  min-height: calc(var(--u) * 11);
}
.kc-input__plus {
  flex: 0 0 auto;
  width: calc(var(--u) * 7.6);
  height: calc(var(--u) * 7.6);
  border-radius: 50%;
  /* 사양서 이미지 실측: 입력창 위 검정 약 20% */
  background: rgba(0, 0, 0, 0.2);
  color: var(--kc-accent);
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: calc(var(--u) * 5);
  line-height: 1;
}
.kc-input__send {
  flex: 0 0 auto;
  width: calc(var(--u) * 7.6);
  height: calc(var(--u) * 7.6);
  border-radius: 50%;
  background: var(--kc-accent);
  color: var(--kc-send-ico);
  display: grid;
  place-items: center;
}
.kc-input__send svg { width: 66%; height: 66%; }

/* ---------------------------- 홈화면 --------------------------------- */
.scr-home { background: var(--kc-home-bg); }
.kc-topbar { flex: 0 0 auto; height: calc(var(--u) * 13); background: var(--kc-bar); }
.kc-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--u) * 3);
  padding: calc(var(--u) * 5) calc(var(--u) * 5) calc(var(--u) * 4);
  overflow: hidden;
}
.kc-profile {
  flex: 0 0 auto;
  width: calc(var(--u) * 20);
  height: calc(var(--u) * 20);
  border-radius: calc(var(--u) * 2);
  background-color: var(--kc-profile-bg);
  background-image: var(--kc-img-profile, none);
  background-size: cover;
  background-position: center;
  overflow: hidden;
  display: grid;
  place-items: end center;
  margin-bottom: calc(var(--u) * 2);
}
.kc-profile svg { width: 88%; height: 88%; fill: var(--kc-profile-person); }
/* 프로필 이미지를 올리면 기본 실루엣은 감춘다 */
.kc-profile.has-img svg { display: none; }
.kc-point { font-family: var(--font-kakao); font-size: calc(var(--u) * 3.6); color: var(--kc-point); }
.kc-allink { font-family: var(--font-kakao); font-size: calc(var(--u) * 5); color: var(--kc-ink); }
.kc-tabbar {
  flex: 0 0 auto;
  background: var(--kc-bar);
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: calc(var(--u) * 2.6) calc(var(--u) * 1) calc(var(--u) * 3.2);
}
.kc-tabbtn { position: relative; display: block; width: calc(var(--u) * 6.4); height: calc(var(--u) * 6.4); }
.kc-tabbtn svg {
  display: block;              /* inline 이면 baseline 여백 때문에 1px 삐져나온다 */
  width: 100%; height: 100%;
  fill: none;
  stroke: var(--kc-tabico);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.kc-badge {
  position: absolute;
  top: calc(var(--u) * -1.4);
  right: calc(var(--u) * -2.4);
  min-width: calc(var(--u) * 3.8);
  height: calc(var(--u) * 3.8);
  padding: 0 calc(var(--u) * 1);
  border-radius: 99px;
  background: var(--kc-badge);
  color: var(--kc-badge-ink);
  font-family: var(--font-mono);
  font-size: calc(var(--u) * 2.4);
  display: grid;
  place-items: center;
}
.kc-dot {
  position: absolute;
  top: calc(var(--u) * -0.6);
  right: calc(var(--u) * -0.6);
  width: calc(var(--u) * 2);
  height: calc(var(--u) * 2);
  border-radius: 50%;
  background: var(--kc-badge);
}

/* --------------------------- 잠금화면 -------------------------------- */
.scr-lock {
  background-color: var(--kc-lock-bg);
  background-image: var(--kc-img-lock, none);
  background-size: cover;
  background-position: center;
  align-items: center;
  justify-content: center;
  padding: calc(var(--u) * 5);
}
/* 카카오톡이 직접 그리는 고정 영역 — 흰 카드 + 검정/회색 글자 */
.kc-card {
  width: 100%;
  background: #FFFFFF;
  border-radius: calc(var(--u) * 2.4);
  padding: calc(var(--u) * 6) calc(var(--u) * 4);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u) * 2.4);
}
.kc-card__t { font-family: var(--font-kakao); font-size: calc(var(--u) * 5.4); color: #181919; }
.kc-card__s { font-family: var(--font-kakao); font-size: calc(var(--u) * 3); color: #8B8B8A; text-align: center; }
.kc-slots { display: flex; align-items: center; gap: calc(var(--u) * 3.4); margin-top: calc(var(--u) * 2); }
.kc-slot {
  display: block;
  width: calc(var(--u) * 3.6);
  height: calc(var(--u) * 3.6);
  border-radius: 99px;
  /* 아직 누르지 않은 자리 = 짝대기 */
  background: var(--kc-slot-empty);
  transform: scaleY(0.22);
}
.kc-slot--on {
  /* 이미 누른 자리 = 채워진 원 */
  background: var(--kc-slot-on);
  transform: none;
}

/* ============================ 색 지정 UI ============================= */
.tc-fields { overflow: hidden; }

.fld {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  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: 32px; height: 32px;
  border-radius: var(--r);
  border: 1px solid var(--line-2);
  overflow: hidden;
  cursor: pointer;
}
.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 150px; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.fld__label { font-size: 13.5px; 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__key[data-kind="fixed"] { color: var(--ink-3); }

.fld__hex {
  flex: 0 0 90px;
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  color: var(--ink);
  padding: 7px 8px;
  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__hex[disabled] { opacity: 0.55; cursor: not-allowed; }

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

.fld__none {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 5px;
  font-size: 11px; color: var(--ink-3);
  cursor: pointer;
  user-select: none;
}
.fld__none input { accent-color: var(--c); width: 14px; height: 14px; }

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

/* 고정 항목 — 손댈 수 없다는 걸 눈으로 알 수 있게 */
.fld--fixed { background: var(--bg-2); }
.fld--fixed:hover { background: var(--bg-2); }
.fld__lock {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: 2px 8px;
}
.fld__ro {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-2);
}

/* 묶음 안내 배너 */
.tc-hint {
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-2);
  font-size: 11.5px;
  color: var(--ink-3);
  line-height: 1.6;
}
.tc-hint b { color: var(--ink-2); font-weight: 500; }
.tc-hint code { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-2); }
.tc-hint--warn { box-shadow: inset 3px 0 0 #eab308; }

/* ========================== 이미지 첨부 ============================== */
.tc-drops {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.tc-drop {
  border: 1px dashed var(--line-2);
  border-radius: var(--r-lg);
  background: var(--surface);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color 0.15s var(--ease), background 0.15s var(--ease);
}
.tc-drop.is-over { border-color: rgba(var(--c-rgb), 0.85); background: rgba(var(--c-rgb), 0.07); }
.tc-drop.has-file { border-style: solid; }
.tc-drop__head { display: flex; align-items: baseline; gap: 8px; }
.tc-drop__t { font-size: 13.5px; color: var(--ink); }
.tc-drop__k {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--ink-3);
  margin-left: auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 55%;
}
.tc-drop__desc { font-size: 11.5px; color: var(--ink-3); line-height: 1.55; }
.tc-drop__zone {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 68px;
  border-radius: var(--r);
  background: var(--bg-2);
  padding: 10px;
  cursor: pointer;
  text-align: left;
  width: 100%;
  border: 0;
  color: inherit;
  font: inherit;
}
.tc-drop__zone:focus-visible { outline: 2px solid rgba(var(--c-rgb), 0.7); outline-offset: 2px; }
.tc-drop__thumb {
  flex: 0 0 auto;
  width: 52px; height: 52px;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background-size: cover;
  background-position: center;
  background-color: var(--surface-2);
  display: grid;
  place-items: center;
  color: var(--ink-3);
}
.tc-drop__thumb svg { width: 20px; height: 20px; }
.tc-drop__info { min-width: 0; flex: 1 1 auto; }
.tc-drop__name {
  display: block;
  font-size: 12.5px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tc-drop__meta { display: block; font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3); margin-top: 3px; }
.tc-drop__cta { font-size: 12px; color: var(--ink-2); line-height: 1.5; }
.tc-drop__cta b { color: var(--c); font-weight: 500; }
.tc-drop__acts { display: flex; gap: 8px; }
.tc-drop__acts .linkbtn { font-size: 11.5px; }
.tc-drop__warn { font-size: 11.5px; color: #eab308; line-height: 1.5; }
.tc-drop__warn[hidden] { display: none; }
.tc-drop__err { font-size: 11.5px; color: var(--no); line-height: 1.5; }
.tc-drop__err[hidden] { display: none; }
.tc-drop input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

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

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

/* ============================== 의뢰서 =============================== */
.tc-form__grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.tc-f { display: block; min-width: 0; }
.tc-f--wide { grid-column: 1 / -1; }
.tc-f > span {
  display: flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--ink-2); margin-bottom: 6px;
}
.tc-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) { .tc-form__grid { grid-template-columns: minmax(0, 1fr); } }

.tc-select, .tc-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;
}
.tc-f textarea { resize: vertical; line-height: 1.6; min-height: 92px; }
.tc-select:focus-visible, .tc-f textarea:focus-visible { outline: none; border-color: rgba(var(--c-rgb), 0.7); }
.tc-count { display: block; text-align: right; margin-top: 4px; font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3); }

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

.tc-howto { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.tc-howto h3 { font-size: 14px; font-weight: 500; color: var(--ink); margin-bottom: 10px; }
.tc-howto ol { display: grid; gap: 7px; counter-reset: s; padding: 0; list-style: none; }
.tc-howto li {
  position: relative;
  padding-left: 24px;
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.6;
}
.tc-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);
}
.tc-howto li b { color: var(--ink); font-weight: 500; }
.tc-howto code { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-2); }

.tc-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;
}
.tc-contact a { color: var(--c); text-decoration: none; }
.tc-contact a:hover { text-decoration: underline; }
.tc-contact em { font-style: normal; display: block; margin-top: 5px; font-size: 11.5px; color: var(--ink-3); }

/* ===================================================================== *
   터치 기기 — style.css / theme-builder.css 와 같은 원칙.
   hover 로만 드러나던 UI 를 상시 노출하고 히트 영역을 넓힌다.
   ===================================================================== */
@media (pointer: coarse) {
  .fld__rst { opacity: 1; width: 40px; height: 40px; }
  .fld__rst svg { width: 16px; height: 16px; }
  .tc-dl .btn { padding: 12px 16px; }
  .fld { padding: 13px 14px; }
  .fld__sw { width: 40px; height: 40px; }
  .fld__hex { flex-basis: 100px; padding: 11px 8px; }
  .fld:hover { background: none; }
  .tc-drop__zone { min-height: 80px; }
}

/* ===================================================================== *
   2026-07 개편 — 의뢰 흐름 정리
   · 색·그림 지정은 선택 사항이라 기본은 접혀 있다
   · 첨부란은 별도 섹션이 아니라 해당 색 항목 아래에 붙는다
   · 미리보기는 PC 3개 나란히 / 모바일 한 장씩 슬라이드
   ===================================================================== */

/* --------------------------- 신청 전 안내 ---------------------------- */
.tc-guard {
  margin-top: 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  max-width: 74ch;
}
.tc-guard > summary {
  padding: 12px 15px;
  cursor: pointer;
  font-size: 13.5px;
  color: var(--ink);
  list-style: none;
  display: flex; align-items: center; gap: 8px;
}
.tc-guard > summary::-webkit-details-marker { display: none; }
.tc-guard > summary::after {
  content: '▾';
  margin-left: auto;
  color: var(--ink-3);
  transition: transform 0.18s var(--ease);
}
.tc-guard[open] > summary::after { transform: rotate(180deg); }
.tc-guard__body { padding: 0 15px 14px; }
.tc-guard__body p {
  font-size: 12.5px; line-height: 1.7; color: var(--ink-2);
  margin-bottom: 8px;
}
.tc-guard__body p:last-child { margin-bottom: 0; }
.tc-guard__body b { color: var(--ink); font-weight: 500; }

/* ------------------------ 미리보기 화면 탭 --------------------------- */
.tcp-tabs { display: none; gap: 6px; margin-bottom: 10px; }
@media (max-width: 959px) {
  .tcp-tabs { display: flex; }
  .tcp-tabs button {
    flex: 1 1 0;
    min-width: 0;
    padding: 7px 4px;
    font-size: 11.5px;
    color: var(--ink-3);
    background: none;
    border: 1px solid var(--line);
    border-radius: var(--r);
  }
  .tcp-tabs button[aria-current="true"] {
    color: var(--c-ink);
    background: var(--c);
    border-color: var(--c);
  }
  /* 탭이 한 줄 늘었으므로 목업은 그만큼 낮춰야 캡션까지 들어간다
     (폰 높이 = 폭 × 1.933 + 캡션 ≒ 폭 × 2.05) */
  .tcp .phone { width: min(200px, 19vh); }

  /* 위쪽 모바일 블록에서 정한 flex-wrap·gap 이 기본 `.tcp` 규칙에 덮여 있었다
     (같은 특이도 + 나중 선언). 여기서 다시 못 박는다 — 이게 없으면 세 화면이
     가로로 넘어가지 않고 세로로 쌓여 잘린다. */
  .tcp { flex-wrap: nowrap; gap: 12px; justify-content: flex-start; }
}

/* --------------------------- 마스터 토글 ----------------------------- */
.tc-master {
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  background: var(--surface);
  margin-bottom: clamp(28px, 4vw, 40px);
}
.tc-master__row {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 15px 17px;
  cursor: pointer;
}
.tc-master__row input { accent-color: var(--c); width: 17px; height: 17px; margin-top: 1px; flex: 0 0 auto; }
.tc-master__row b { display: block; font-size: 14px; font-weight: 500; color: var(--ink); }
.tc-master__row small { display: block; margin-top: 4px; font-size: 12.5px; color: var(--ink-3); line-height: 1.6; }
.tc-master__row small b { display: inline; font-size: inherit; color: var(--ink-2); }

/* 토글을 켜기 전에는 색·그림 섹션을 통째로 접는다 */
.tc-main[data-custom="off"] .tc-custom { display: none; }

/* ------------------- 색 항목에 딸린 첨부란 --------------------------- */
.fld__drops { flex: 1 1 100%; margin-top: 10px; }
.fld__drops--multi {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 148px), 1fr));
}
.fld__drops .tc-drop { padding: 11px 12px; }
.fld__drops .tc-drop__desc { margin-bottom: 8px; }

.fld--imgonly, .fld--choice { align-items: flex-start; }
.fld--imgonly .fld__txt, .fld--choice .fld__txt { flex: 1 1 100%; }

.fld__opts { flex: 1 1 100%; display: grid; gap: 8px; margin-top: 8px; }
@media (min-width: 560px) { .fld__opts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fld__opt {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  cursor: pointer;
}
.fld__opt:hover { border-color: var(--line-2); }
.fld__opt input { accent-color: var(--c); width: 15px; height: 15px; margin-top: 1px; flex: 0 0 auto; }
.fld__opt b { display: block; font-size: 13px; font-weight: 500; color: var(--ink); }
.fld__opt small { display: block; margin-top: 3px; font-size: 11.5px; color: var(--ink-3); line-height: 1.5; }
.fld__opt:has(input:checked) { border-color: rgba(var(--c-rgb), 0.6); background: rgba(var(--c-rgb), 0.06); }

/* ------------------------ 목업 보강 요소 ----------------------------- */
.kc-topbar {
  display: flex; align-items: center;
  padding: 0 calc(var(--u) * 5);
}
.kc-topbar__t { font-family: var(--font-kakao); font-size: calc(var(--u) * 4.4); color: var(--kc-ink); }

.kc-me { display: flex; align-items: center; gap: calc(var(--u) * 3.4); }
.kc-me .kc-profile { margin-bottom: 0; }
.kc-friends {
  width: 100%;
  margin-top: calc(var(--u) * 1);
  padding-top: calc(var(--u) * 3);
  border-top: 1px solid var(--kc-gray, rgba(124, 123, 124, 0.4));
  display: flex; flex-direction: column; gap: calc(var(--u) * 3);
}
.kc-friend { display: flex; align-items: center; gap: calc(var(--u) * 3); }
.kc-friend .kc-allink { font-size: calc(var(--u) * 3.8); }
.kc-profile--sm {
  width: calc(var(--u) * 11);
  height: calc(var(--u) * 11);
  border-radius: calc(var(--u) * 1.4);
  margin-bottom: 0;
}

/* 채팅방 배경 그림 · 캐릭터 */
.scr-chat {
  background-color: var(--kc-chat-bg);
  background-image: var(--kc-img-chat, none);
  background-size: cover;
  background-position: center;
}
.scr-chat::after {
  content: '';
  position: absolute; inset: 0;
  background-image: var(--kc-img-char, none);
  background-size: contain;
  background-position: center bottom;
  background-repeat: no-repeat;
  pointer-events: none;
}

/* 말풍선 배치 — '한쪽'이면 내 말풍선도 왼쪽에 붙는다 */
.tcp[data-bubble="left"] .kc-row--me { align-items: flex-start; }
.tcp[data-bubble="left"] .kc-line { flex-direction: row-reverse; }

/* 그림을 올린 탭 아이콘 · 암호 자릿수는 기본 글리프를 감춘다 */
.kc-tabbtn { background-size: contain; background-position: center; background-repeat: no-repeat; }
.kc-tabbtn.has-img svg { display: none; }
.kc-tabbtn:nth-child(1).has-img { background-image: var(--kc-img-tab1, none); }
.kc-tabbtn:nth-child(2).has-img { background-image: var(--kc-img-tab2, none); }
.kc-tabbtn:nth-child(3).has-img { background-image: var(--kc-img-tab3, none); }
.kc-tabbtn:nth-child(4).has-img { background-image: var(--kc-img-tab4, none); }
.kc-tabbtn:nth-child(5).has-img { background-image: var(--kc-img-tab5, none); }

.kc-slot.has-img {
  background-color: transparent;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  transform: none;
  width: calc(var(--u) * 4.4);
  height: calc(var(--u) * 4.4);
}
.kc-slot.has-img { background-image: var(--kc-img-slot-empty, none); }
.kc-slot--on.has-img { background-image: var(--kc-img-slot-on, none); }

/* 브랜드명이 소문자라 사이트 공통의 대문자 변환을 이 페이지에서만 끈다 */
.hero .eyebrow { text-transform: none; letter-spacing: 0.1em; font-size: 11px; }