/* =====================================================================
   ThingsOne v2 — "Signal" skin
   Pure-white product grammar: huge whitespace · gray product plates ·
   bento grid · black pill CTAs · one blue accent · typographic restraint.
   Dark lives in exactly two places: the home hero and the footer.
   ===================================================================== */
:root{
  --canvas:#FAF8F4;           /* warm cream */
  --plate:#F1EEE7;            /* warm product / tile plate */
  --plate-deep:#E9E5DC;
  --ink:#1A1917;              /* warm near-black */
  --ink-muted:#6E6A61;        /* warm gray */
  --hairline:color-mix(in srgb,#1A1917 11%,transparent);
  --serif:Georgia,"Times New Roman","Nanum Myeongjo",serif;
  --radius-tile:22px;
  --shadow-warm:0 30px 60px -34px rgba(64,52,36,.34);
  --accent-ink:#0A5FCC;       /* darker blue — passes AA text contrast on the cream canvas */
}

body{background:var(--canvas)}

/* screen-reader-only utility — a11y section headings without visual change */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* 폴드/좁은 폰(≤400px): nowrap 이 화면을 밀어내는 버튼만 접히게 한다.
   ※ 이전 셀렉터 `.cta-band .btn`은 마크업에 존재하지 않는 유령 클래스였다(전체 grep 0건).
     그래서 이 사이트의 유일한 모바일 nowrap 예외가 실효 0인 채로 남아 있었고,
     실측 결과 /en/support/reviews 가 345px에서 14px, 320px 39px, 280px 79px 가로로 넘쳤다
     (원인: .btn-naver "See reviews on the Naver Store" 고유폭 318px > 가용폭).
   ※ 대상은 .btn-naver 뿐이다. .btn 은 실측 최대 130px("자세히 보기"/"View details")라
     280px 에서도 넘치지 않으므로 예외가 필요 없고, 넣으면 오히려 "자세히"/"보기" 로
     2줄이 되어 규칙을 위반한다. 예외는 실제로 넘치는 것에만 건다. */
@media (max-width:400px){
  .btn-naver{white-space:normal;text-align:center}
}

/* ── Editorial Luxury type: English/number = serif, Korean = Pretendard ──
   (Georgia carries no Hangul glyphs, so Korean automatically falls through) */
.showcase-title,.cats .section-title,.ai-sol .section-title,.brand-title,.cat-hero-title,.bt-stat strong,.ed-num,.break-band h2,.manifesto,.pd-name{
  font-family:var(--serif);font-weight:400;letter-spacing:-.018em}
.bt-tile h3,.pt-card h3{
  font-family:var(--serif);font-weight:700;letter-spacing:-.01em}
/* home hero: same serif-descender room as cat-hero-title. line-height 1.05 in the
   split-line .headln{overflow:hidden} box was clipping g/p tails on English words
   ("ThingsOne"/"Lineup"); 1.18 + pad gives the descenders room. */
.showcase-title{line-height:1.18;padding-bottom:.06em}

/* ── double-bezel surfaces: hairline outer + inset highlight, warm shadow ── */
.bt-tile,.pt-card,.st-node,.inq-form,.inq-view,.board-detail,.as-card,.rev-naver,.kw-strip,.sup-note,.sup-empty-card,.as-steps li{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}
.bt-tile,.pt-card{border:1px solid var(--hairline)}
.cat-hero{padding-top:calc(var(--header-h) + clamp(46px,6.5vw,82px))}

/* ── subpage hero: dark band → airy light editorial head ─────────────── */
.cat-hero{background:var(--canvas);color:var(--ink);
  padding:calc(var(--header-h) + clamp(30px,4.6vw,58px)) 0 clamp(22px,3vw,38px)}
.cat-hero-bg{display:none}
.cat-hero-title{color:var(--ink);font-size:clamp(1.9rem,3.4vw,2.75rem);letter-spacing:-.035em}
/* line-height 1.06 was clipping serif descenders (g/y/p); give them room. max-width lets long titles wrap while short ones stay on one line.
   ※ text-wrap:balance 는 여기서 선언하지 않는다 — .cat-hero-title 은 h1 이라 [2] 시스템이 이미 준다.
     중복 선언을 두면 [2]를 바꿔도 이 줄이 옛 값을 붙들어 단일 소스가 깨진다. */
.cat-hero-title{line-height:1.18;max-width:900px;padding-bottom:.05em}
/* ★영문 히어로 제목만 캡을 넓힌다.
   900px 캡이 부모 가용폭(1144px)보다 좁아, 한 줄에 들어가는 제목까지 2줄로 접혔다.
   실측(1440px): en aiot 필요 1017px · rtls 1043px · scenario 991px → 전부 2줄.
   한국어는 필요 723px 라 캡에 걸리지 않으므로 건드리지 않는다(전역 완화 불필요).
   1144px 미만에서는 컨테이너가 먼저 폭을 제한하므로 좁은 화면 영향 없음. */
body.lang-en .cat-hero-title{max-width:1060px}
.cat-hero-tag{color:var(--ink-muted);font-size:clamp(14px,1.35vw,16px);max-width:840px;line-height:1.6;}
.cat-crumb{color:var(--ink-muted)}
.cat-crumb a{color:var(--ink-muted)}
.cat-crumb a:hover{color:var(--accent-ink)}
.cat-crumb b{color:var(--ink)}
.hero-kicker{border-color:var(--hairline);color:var(--accent-ink);background:color-mix(in srgb,var(--accent) 6%,#fff)}

/* hero product visual on white */
.sol-band{padding-bottom:clamp(18px,2.6vw,34px)}

/* tab bar sits flush on white */
.cat-subnav{border-top:1px solid var(--hairline)}

/* ── plates: unify every product surface to the gray plate ───────────── */
.product-thumb{background:var(--plate)}
.pd-rel-thumb{background:var(--plate)}
.ed-media{background:var(--plate);border-radius:var(--radius-tile)}
.ed-media::after{border-color:color-mix(in srgb,#101114 5%,transparent)}
.ed-media img{filter:drop-shadow(0 22px 28px rgba(20,24,32,.16))}
.cat-tile-media{background:var(--plate)}
.cat-tile-media::before{background:radial-gradient(circle,color-mix(in srgb,var(--accent) 8%,transparent),transparent 62%);opacity:.9}
.cat-tile-media img{filter:drop-shadow(0 14px 20px rgba(20,24,32,.16))}
.pd-media-glow{opacity:.35}

/* section body rhythm */
.sub-body{background:var(--canvas);padding:clamp(30px,4.4vh,54px) 0 clamp(60px,8vh,100px)}

/* ── bento grid ──────────────────────────────────────────────────────── */
.bt-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;max-width:1080px;margin:0 auto}
.bt-tile{position:relative;display:flex;flex-direction:column;gap:10px;overflow:hidden;
  border-radius:var(--radius-tile);background:var(--plate);padding:clamp(24px,2.6vw,34px);
  transition:transform .4s var(--ease-micro),box-shadow .4s}
.bt-tile:hover{box-shadow:0 24px 48px -26px rgba(20,24,32,.25)}
.bt-2{grid-column:span 2}.bt-3{grid-column:span 3}.bt-4{grid-column:span 4}.bt-6{grid-column:span 6}
@media (max-width:860px){.bt-2,.bt-3{grid-column:span 3}.bt-4,.bt-6{grid-column:span 6}}
@media (max-width:560px){.bt-2,.bt-3,.bt-4,.bt-6{grid-column:span 6}}
.bt-kicker{font-family:var(--mono);font-size:11px;letter-spacing:.13em;color:var(--accent-ink);font-weight:600}
.bt-tile h3{font-size:clamp(1.1rem,1.6vw,1.35rem);font-weight:800;letter-spacing:-.02em;line-height:1.3}
.bt-tile p{font-size:14px;line-height:1.72;color:var(--ink-muted);max-width:44ch}
/* product visual inside a tile — always in flow: never covers text, never clipped */
.bt-visual{margin-top:auto;display:flex;justify-content:center;align-items:center;padding-top:8px}
.bt-visual img{width:auto;max-width:min(220px,86%);max-height:150px;object-fit:contain;
  filter:drop-shadow(0 18px 24px rgba(20,24,32,.18));transition:transform .5s var(--ease-c)}
/* wide tiles: text column + visual column, both in normal flow */
/* copy top-aligns so a split tile's kicker/title line up with the plain tiles in
   its row; the image stays vertically centered next to it */
.bt-split{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(14px,2vw,26px);align-items:start}
.bt-split .bt-copy{display:flex;flex-direction:column;gap:10px;min-width:0;height:100%}
.bt-split .bt-copy .bt-go{margin-top:auto}
.bt-split .bt-visual{margin-top:0;padding-top:0;align-self:center}
.bt-split .bt-visual img{max-width:min(260px,100%);max-height:190px}
@media (max-width:560px){
  .bt-split{grid-template-columns:1fr}
  .bt-split .bt-visual{padding-top:10px}
}
/* stat tile */
/* stat tiles top-align too, so their kicker/number line up with sibling tiles in the row */
.bt-stat{align-items:flex-start;justify-content:flex-start}
.bt-stat strong{font-size:clamp(34px,4vw,50px);font-weight:800;letter-spacing:-.03em;color:var(--ink);line-height:1}
.bt-stat span{font-size:13px;color:var(--ink-muted)}
/* dark tile — the single dark moment on a light page */
.bt-dark{background:linear-gradient(150deg,#15171c,#0d0f13);color:#fff}
.bt-dark h3{color:#fff}
.bt-dark p{color:rgba(255,255,255,.66)}
.bt-dark .bt-kicker{color:#8fd0e8}
/* link tile arrow */
.bt-link{color:inherit}
.bt-go{margin-top:auto;padding-top:12px;display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:700;color:var(--accent-ink)}
.bt-go svg{width:15px;height:15px;transition:transform .3s var(--ease-micro)}

/* ── editorial rows on white: flatten the tinted plate, tighten type ──── */
.ed-row{border-top-color:var(--hairline)}
.ed-num{-webkit-text-stroke:1.3px color-mix(in srgb,#101114 26%,transparent)}
.ed-txt h2{letter-spacing:-.03em}

/* ── break band: full-bleed → inset rounded media block (Apple-style) ── */
.break-band{width:auto;margin:clamp(38px,6vh,70px) max(20px,calc(50% - 572px)) 0;
  border-radius:28px;padding:clamp(52px,8vh,92px) 24px}
.break-band::before{border-radius:28px}
.break-band h2{font-size:clamp(1.2rem,2vw,1.65rem)}

/* ── light chrome details ────────────────────────────────────────────── */
.kw-strip{background:var(--plate);border-color:transparent}
.kw-chip{background:#fff;border-color:var(--hairline)}
.st-node{box-shadow:none}
.st-node-hub{background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 5%,#fff),#fff)}
.sup-note,.sup-empty-card,.inq-form,.inq-view,.board-detail,.rev-naver,.as-card,.as-steps li{box-shadow:none}
.pt-card{box-shadow:none}
.pt-card:hover{box-shadow:0 22px 44px -24px rgba(20,24,32,.2)}
.faq-list{border-top-color:var(--ink)}
.inq-field input,.inq-field textarea{background:var(--plate)}
.inq-unlock input[type=password]{background:var(--plate)}

/* scroll progress: thinner, ink-colored — quieter chrome */
.scroll-progress{height:2px;background:var(--ink)}

/* products index + home tiles pick up the plate automatically via tokens */
.lineup-index{background:var(--canvas)}

/* ── editorial feature photo (composited real-product lifestyle shots) ── */
.feature-photo{margin:clamp(20px,2.8vw,38px) auto clamp(6px,1vw,14px);max-width:1080px;
  border-radius:var(--radius-tile);overflow:hidden;line-height:0;
  box-shadow:0 34px 66px -38px rgba(64,52,36,.4),inset 0 1px 0 rgba(255,255,255,.4)}
.feature-photo img{width:100%;height:auto;display:block}
.feature-photo.portrait{max-width:660px}
.feature-cap{margin:12px auto 0;max-width:1080px;font-size:13px;color:var(--ink-muted);text-align:center}
/* 기능 아이콘 행 — 시안의 회색 라운드 사각 아이콘 4개를 이미지가 아니라 SVG+텍스트로 만든다.
   (사진만 실사진, 문자는 전부 실제 텍스트라 확대·번역·검색·스크린리더가 전부 살아 있다) */
.feat-icons{display:flex;justify-content:center;flex-wrap:wrap;gap:clamp(18px,3.4vw,54px);
  margin:clamp(18px,2.6vw,34px) auto clamp(4px,1vw,10px);padding:0;list-style:none;max-width:1080px}
.feat-icons li{display:flex;flex-direction:column;align-items:center;gap:10px;min-width:64px}
.feat-ico{display:grid;place-items:center;width:clamp(52px,5.4vw,64px);aspect-ratio:1;
  border-radius:14px;background:color-mix(in srgb,var(--ink) 8%,transparent);color:var(--ink-muted)}
.feat-ico svg{width:58%;height:58%}
.feat-ico-lab{font-size:clamp(12px,1.05vw,13.5px);font-weight:600;color:var(--ink);
  letter-spacing:-.01em;white-space:nowrap}
@media (max-width:520px){
  /* 4개가 한 줄에 다 들어가도록 — 두 줄로 접히면 시안의 리듬이 깨진다 */
  .feat-icons{gap:12px;justify-content:space-between}
  .feat-icons li{flex:1 1 0;min-width:0;gap:8px}
  .feat-ico{width:clamp(46px,13vw,56px);border-radius:12px}
  .feat-ico-lab{font-size:11.5px;white-space:normal;text-align:center;word-break:keep-all}
}

/* company facts: 셀 격자 → 스탯 타일+원장형(.facts-stats/.facts-ledger, flagship.css)으로 대체됨 (7/21) */

/* ── SmartThings diagram: app/cloud icons · brand-logo badge · upgraded connectors ── */
.st-app-ico{position:relative;display:grid;place-items:center;width:56px;height:56px;border-radius:15px;background:#fff;
  border:1px solid var(--hairline);box-shadow:0 8px 20px -10px rgba(26,115,232,.45)}
.st-app-ico svg{width:32px;height:32px}
.st-app-cloud .st-cloud-badge{position:absolute;right:-8px;bottom:-8px;width:24px;height:24px;background:#fff;border-radius:50%;padding:2px;box-shadow:0 2px 6px -2px rgba(0,0,0,.2)}
/* connectors removed (7/21 운영자 피드백: 선 효과가 저가로 보임) — 티어 간격은 .st-diagram row-gap이 담당 */

/* ── modern notice board ── */
.board-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:14px;gap:12px}
.board-head h2{font-family:var(--serif);font-size:clamp(1.3rem,2.2vw,1.7rem);color:var(--ink);letter-spacing:-.02em}
.board-count{font-family:var(--mono);font-size:13px;color:var(--ink-muted)}
.board-list{border-top:1px solid var(--hairline)}
.board-row{gap:16px;padding:20px 8px}
.board-main{flex:1;display:flex;flex-direction:column;gap:5px;min-width:0}
.board-main .board-title{white-space:normal;font-size:16px;line-height:1.4;color:var(--ink)}
.board-main .board-date{font-size:12px}
.board-arrow{flex:0 0 auto;width:20px;height:20px;color:var(--ink-muted);transition:transform .2s var(--ease-out-strong),color .2s}
.board-row:hover .board-arrow{color:var(--accent-ink)}

/* bento tile with a real photo (fills width, rounded) instead of a floating cutout */
.bt-visual.bt-photo{margin-top:auto;padding-top:12px;width:100%}
.bt-visual.bt-photo img{width:100%;max-width:100%;max-height:none;height:auto;border-radius:13px;object-fit:cover;
  box-shadow:0 14px 30px -18px rgba(40,34,26,.4)}
.bt-tile:hover .bt-visual.bt-photo img{transform:none}

/* ed-media holding a full photo (per-item AI feature shots) fills the frame, no plate/float */
.ed-media.ed-photo{background:transparent;padding:0}
.ed-media.ed-photo img{width:100%;height:100%;max-height:100%;object-fit:cover;filter:none;border-radius:inherit}

/* scenario "situational modes" — 3 clean scene cards, real (crisp) HTML labels, no baked-in text */
.ed-media.mode-triptych{aspect-ratio:auto;background:transparent;padding:0;border:0;box-shadow:none;
  border-radius:0;overflow:visible;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.ed-media.mode-triptych::after{display:none}
.ed-media.mode-triptych{align-items:start}
.mode-card{margin:0;border-radius:14px;overflow:hidden;background:#fff;border:1px solid var(--hairline);
  box-shadow:0 12px 28px -20px rgba(20,24,32,.4)}
/* 카드 정렬([6] 원칙) — 영문에서만 제목 2줄 자리를 예약해 서브라벨 시작선을 맞춘다.
   실측: "Away"(1줄) "Sleep"(1줄) "Coming home"(2줄) 이라 세 번째 서브라벨만 16~20px 밀렸다.
   한국어는 외출/취침/귀가 전부 1줄이라 예약이 필요 없고, 걸면 죽은 줄만 남는다 → :lang 으로 가른다.
   ※ subgrid([6]의 선호 수단)는 여기서 못 쓴다 — figcaption 이 중간에 끼어 b/span 이 카드 그리드에
     직접 참여하지 못하고, 두 단으로 물리면 img 의 aspect-ratio 가 찌그러지며 큰 죽은 공간이 생긴다
     (1440px 스크린샷으로 확인. 측정상 "어긋남 0"이어도 눈으로는 명백한 개악이었다). */
html[lang="en"] .mode-card figcaption b{min-height:2lh}
.mode-card img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block;transition:transform .5s var(--ease-out-strong)}
.mode-card figcaption{padding:11px 13px 13px}
.mode-card figcaption b{display:block;font-size:clamp(14px,1.4vw,17px);font-weight:700;color:var(--ink);letter-spacing:-.01em;line-height:1.15}
.mode-card figcaption span{display:block;margin-top:3px;font-size:clamp(10px,1vw,12px);color:var(--ink-muted);
  line-height:1.3}
@media (max-width:640px){.ed-media.mode-triptych{gap:8px}}
/* 폴드 구간: 캡션 여백과 열 간격을 좁혀 텍스트 폭을 확보한다. 3열 구조와 폰트 크기는 그대로 둔다.
   280px 실측 — 카드 76px(테두리 1px 포함), 캡션 padding 13px×2 → 텍스트 가용 48px 뿐이라
   서브라벨 최장 단어 "Temperature"(10px = 56.3px)가 안 들어가 단어 중간에서 쪼개졌다.
   padding 8px + gap 6px 로 가용 폭을 넓혀 서브라벨(56.3px)과 제목 "Coming"(14px = 50.3px)을 담는다.
   ※ font-size 로 풀려면 서브라벨을 8px 까지 줄여야 해서 읽을 수 없고, 열 수를 줄이면
     360px 레이아웃이 3열 → 2+1 로 바뀐다. 여백 조정이 가장 부작용이 적은 레버다. */
@media (max-width:380px){
  .ed-media.mode-triptych{gap:6px}
  .mode-card figcaption{padding:8px 8px 10px}
}

/* ═══════════════════════════════════════════════════════════════════════
   공통 타이포그래피 시스템 — 한국어 조판 단일 소스
   화면별 임시값을 덧붙이지 않는다. 아래 규칙이 전 페이지에 상속된다.
   1) 줄바꿈은 어절 단위(keep-all). 음절 쪼갬 금지.
   2) 제목=balance(줄 길이 고르게) · 본문=pretty(고아 단어 방지).
   3) 붙어야 할 것(숫자+단위, 제품명, 연락처)은 유틸리티로 묶는다.
   4) 강제 줄바꿈은 디스플레이 카피에만, 그것도 데스크톱에서만.
   ═══════════════════════════════════════════════════════════════════════ */
/* [1] 기반 — 어절 단위 줄바꿈. word-break는 상속되므로 개별 선택자의 중복 선언은 두지 않는다.
   overflow-wrap:break-word 는 끊을 수 없는 초장문 토큰(긴 URL 등)만 예외 분리. */
body{word-break:keep-all;overflow-wrap:break-word}

/* [2] 제목 — 줄 길이를 고르게 나눠 "마지막 줄에 한 단어만" 남는 것을 막는다.
   ※ 열거식 클래스 목록은 쓰지 않는다. 목록에 없는 제목은 조용히 보호에서 빠지고,
     그 사실이 화면에 드러나기 전까지 아무도 모른다. 실제로 이 방식이 놓친 곳:
     .rev-naver-txt h2("…브랜드스토어에서"), .board-detail-head h2("…열었습니다"), dt("…life")
     — 셋 다 평범한 h2/dt 인데 목록에 없다는 이유만으로 고아 줄이 생겼다(360~390px 실측).
     시맨틱 헤딩 전체를 구조로 잡고, 헤딩 태그가 아닌 디스플레이 카피만 클래스로 보탠다. */
h1,h2,h3,h4,h5,h6,
.pd-rel-name,.ed-num,.bt-stat strong,.mode-card figcaption b,
.as-steps strong,.st-node strong{text-wrap:balance}

/* [3] 본문 — pretty: 마지막 줄에 한 단어만 떨어지는 고아(orphan)를 브라우저가 방지한다.
   ※ .cat-hero-tag 는 <p> 이므로 자동 포함된다 — 리드는 제목 조판(balance)을 따르지 않는다.
     dt 는 사양표 라벨(예: "Charging & battery life")이라 여기 포함해야 고아가 안 생긴다.
   ※ .pd-rel-spec 은 <p>가 아니라 <div> 라 타입 선택자에 안 잡힌다 — 명시해야 한다.
     (구조화하면서 이걸 빠뜨렸다가 관련제품 레일 스펙에 고아 36건이 생기는 것을 실측으로 잡았다) */
p,dd,dt,li,figcaption,blockquote,.pd-rel-spec,.faq-q{text-wrap:pretty}

/* [3-1] 문단 태그이지만 본문이 아니라 디스플레이 카피인 것 — 제목 조판을 따른다.
   클래스(0,1,0)가 타입(0,0,1)을 이기므로 [3]의 pretty를 덮는다. */
.manifesto,.feature-cap{text-wrap:balance}

/* [4] 붙임 유틸리티 — 숫자+단위·제품명·연락처가 줄바꿈으로 쪼개지지 않게.
   spec-seg: "A · B · C" 목록에서 각 항목은 통째로, 항목 사이에서만 줄바꿈. */
.spec-seg{white-space:nowrap}

/* [5] 강제 줄바꿈 — 디스플레이 카피(히어로 대제목·선언문)의 의도된 줄나눔만 유지.
   데스크톱에서는 디자인대로, 768px 미만에서는 무시하고 자연스럽게 흐르게 한다.
   본문·리드의 <br>은 전부 제거했으므로 이 유틸리티만 남는다. */
@media (max-width:767px){ br.br-lg{display:none} }

/* [6] 카드 정렬 — 제목 줄 수가 달라도 아래 설명 시작선이 어긋나지 않도록
   같은 행의 카드 제목에 2줄 기준을 일관 적용한다(자르지 않고 자리만 확보).
   단위는 반드시 lh(요소의 실제 행높이) — em으로 행높이를 추측하면 2줄을 다 못 담아
   정렬 교정이 무효가 되면서 1줄 카드에는 죽은 공간만 남는다. */
/* 구조가 균일한 카드(썸네일·이름·스펙 / 아이콘·제목·설명)는 subgrid로 행을 공유한다.
   min-height로 2줄을 예약하는 방식은 제목이 1줄인 카드마다 죽은 공간을 남기지만,
   subgrid는 같은 행의 실제 최대 높이에 맞춰지므로 여백 없이 정렬된다.
   (의사요소는 모두 position:absolute라 그리드 아이템이 되지 않아 행 구조가 안전하다.
    스펙이 없는 항목도 span 3을 유지해 행이 어긋나지 않는다.) */
.pd-related-rail .pd-rel-item,.ai-cards .ai-card,
/* .pd-feature 도 같은 균일 3자식 구조다(번호 span · h3 · p). 목록에 없어 무방비였고,
   실측 결과 /en/products/aiot/hub-v4 768px 에서 제목이 [2,1,2]줄로 갈려 가운데 카드의
   설명 시작선만 29px 위로 어긋났다. 같은 subgrid 규칙으로 행을 공유시킨다. */
.pd-features .pd-feature{display:grid;grid-template-rows:subgrid;grid-row:span 3}
/* .bt-tile은 변종(bt-split/bt-stat)마다 자식 구성이 달라 subgrid를 쓸 수 없다.
   제목이 데스크톱 상용 폭에서 실제로 2줄이 되므로 2줄 기준을 일관 적용한다.
   단위는 반드시 lh(실제 행높이) — em으로 추측하면 2줄을 못 담아 정렬이 무효가 된다. */
.bt-grid .bt-tile h3{min-height:2lh}

/* ── Motion refinement (Emil Kowalski / animations.dev) ─────────────────
   entering = ease-out · hover = ease · press = scale(.97) · GPU-only · UI < 300ms */
:root{
  --ease-out-strong:cubic-bezier(.23,1,.32,1);
  --ease-inout-strong:cubic-bezier(.77,0,.175,1);
}
/* snappy, correctly-eased transforms on every interactive control */
.btn,.btn-naver,.inq-submit,.dl-btn,.pd-pager-btn,.backtop,.fifa-cap-more,.bt-link,.pt-card-link,.product-card,.cat-tile,.as-card,.faq-item summary{
  transition:transform .16s var(--ease-out-strong),box-shadow .34s var(--ease-out-strong),
             border-color .25s ease,background-color .25s ease,color .2s ease}
/* tactile press feedback (Emil: buttons must respond to :active) */
.btn:active,.btn-naver:active,.inq-submit:active,.dl-btn:active,.pd-pager-btn:active,.backtop:active,.fifa-cap-more:active{transform:scale(.97)}
.bt-link:active,.pt-card-link:active,.product-card:active,.cat-tile:active,.as-card:active{transform:scale(.99)}
/* nav + home controls also get press feedback */
.nav-toggle,.gnb-link,.drawer-link{transition:transform .16s var(--ease-out-strong),color .2s ease,opacity .2s ease}
.nav-toggle:active{transform:scale(.94)}
/* ── language selector (dropdown) — inherits header text color; scales to N languages ── */
.lang-switch{position:relative}
.lang-toggle{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 10px 0 12px;
  border:1px solid color-mix(in srgb,currentColor 26%,transparent);border-radius:var(--radius-pill);
  font-size:12.5px;font-weight:600;letter-spacing:.01em;color:inherit;opacity:.9;
  transition:opacity .2s ease,background-color .2s ease,border-color .2s ease}
.lang-toggle:hover,.lang-switch.open .lang-toggle{opacity:1;background:color-mix(in srgb,currentColor 9%,transparent);border-color:color-mix(in srgb,currentColor 42%,transparent)}
.lang-globe{width:15px;height:15px;flex:0 0 auto;opacity:.8}
.lang-chev{width:12px;height:12px;flex:0 0 auto;opacity:.65;transition:transform .28s var(--ease-out-strong)}
.lang-switch.open .lang-chev{transform:rotate(180deg)}
.lang-menu{position:absolute;top:calc(100% + 9px);right:0;min-width:160px;padding:6px;
  background:#fff;border:1px solid var(--hairline);border-radius:13px;
  box-shadow:0 18px 42px -18px rgba(20,24,32,.34),0 2px 8px rgba(20,24,32,.06);
  opacity:0;visibility:hidden;transform:translateY(-6px) scale(.98);transform-origin:top right;
  transition:opacity .22s var(--ease-out-strong),transform .22s var(--ease-out-strong),visibility 0s linear .22s;z-index:90}
.lang-switch.open .lang-menu{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.lang-menu::before{content:"";position:absolute;top:-9px;left:0;right:0;height:9px}
.lang-opt{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 12px;
  border-radius:9px;font-size:14px;font-weight:500;color:var(--ink);opacity:.88;white-space:nowrap;
  transition:background-color .18s ease,color .18s ease,opacity .18s ease}
.lang-opt:hover{background:color-mix(in srgb,var(--ink) 6%,transparent);opacity:1}
.lang-opt.is-current{color:var(--accent-ink);font-weight:700;opacity:1}
.lang-opt.is-current::after{content:"✓";font-size:12px;font-weight:800}
/* drawer language list (mobile) */
.drawer-lang-group{margin-top:22px;padding-top:22px;border-top:1px solid var(--hairline-dark)}
.drawer-lang-lab{display:block;font-size:11px;letter-spacing:.14em;color:var(--cream-muted);margin-bottom:12px}
.drawer-langs{display:flex;flex-direction:column;gap:6px}
.drawer-lang-opt{font-size:17px;font-weight:600;color:var(--cream-muted);padding:3px 0;transition:color .2s}
.drawer-lang-opt:hover{color:var(--cream)}
.drawer-lang-opt.is-current{color:var(--accent)}
/* small screens: collapse the toggle to a globe icon (full labels stay in the menu) so
   the wider current-language label never crowds the header on folded phones */
@media (max-width:480px){
  .lang-toggle{width:38px;padding:0;justify-content:center;gap:0}
  .lang-toggle .lang-cur,.lang-toggle .lang-chev{display:none}
  .lang-globe{width:17px;height:17px;opacity:.92}
  .lang-menu{min-width:150px}
}

/* ═══════════════════════════════════════════════════════════════════════
   SMALL-SCREEN REFINEMENT — fluid down to 280px (folded phones → desktop)
   The desktop-designed display type had large clamp *floors* (showcase-title
   30px, section/cat-hero 30.4px, hero-cine 34px). Since body has
   overflow-x:hidden, oversize heads on a 280–360px viewport were being
   *clipped* on the right instead of wrapping. Scale every display head
   fluidly by viewport, tighten container padding, and stack 2-col grids.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width:600px){
  /* .wrap 거터는 여기서 정하지 않는다 — responsive.css 의 --mobile-gutter 가 단일 소스다
     (마지막 로드·동일 특이도라 여기 선언은 조용히 무시된다). */
  .showcase-title{font-size:clamp(21px,6.2vw,40px)}
  .section-title{font-size:clamp(21px,5.8vw,2rem)}
  .cat-hero-title{font-size:clamp(21px,5.8vw,2rem)}
  .brand-title{font-size:clamp(22px,6.2vw,2.2rem)}
  .pd-name{font-size:clamp(23px,6.6vw,2.1rem)}
  /* home category tiles: 2-col is too tight below 600px → single column.
     max-width 로 561–600px 에서 cinematic:368 의 720px 가 새는 것을 막는다(경계 정합). */
.cats-grid{grid-template-columns:1fr;max-width:460px}
}
@media (max-width:400px){
  .showcase-title{font-size:clamp(20px,6.4vw,26px)}
  .section-title,.cat-hero-title{font-size:clamp(20px,6vw,26px)}
}

/* ═══════════════════════════════════════════════════════════════════════
   MOBILE SPECIALIZATION (≤600px) — beyond "doesn't break", tuned for phones.
   The base look is desktop-cinematic: 76px header + 72–116px section padding +
   generous rhythm. On a phone that eats the viewport and reads as empty bands.
   Pull the chrome and section rhythm in so content leads, not whitespace.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width:600px){
  /* header 58px + top safe-area folded in, so every var(--header-h) clearance
     (sticky tabs, hero padding) accounts for the notch automatically */
:root{--header-h:calc(58px + env(safe-area-inset-top,0px))}
  .site-header{padding-top:env(safe-area-inset-top,0px)}
  /* content clears the notch in landscape too */
  /* home cinematic sections — tighten the desktop vertical rhythm */
.ai-sol,.brand-story{padding-top:clamp(46px,8vw,66px);padding-bottom:clamp(46px,8vw,66px)}
  .cats{padding-top:32px;padding-bottom:44px}
  /* sub-page hero band — less clearance below the (now shorter) header */
.cat-hero{padding-top:calc(var(--header-h) + 18px)}
  /* hero carousel — trim dead space above the cards and around the caption */
.fifa-viewport{margin-top:clamp(8px,2vh,20px)}
}
/* iOS focus-zoom guard: inputs must be ≥16px. Plus home-indicator safe areas. */
.inq-field input,.inq-field textarea,.inq-unlock input[type=password]{font-size:16px}
.drawer{padding-top:max(80px,calc(env(safe-area-inset-top,0px) + 60px));padding-right:max(30px,env(safe-area-inset-right,0px));padding-bottom:max(30px,env(safe-area-inset-bottom,0px))}
.backtop{bottom:max(22px,calc(env(safe-area-inset-bottom,0px) + 14px))}
/* category tiles: top-align body so titles line up across the row regardless of
   how many lines each tagline wraps to (center-align drifted them by the desc height) */
.cat-tile-body{justify-content:flex-start}
.cat-tile-media{align-self:stretch}
@media (max-width:400px){
  .ai-sol,.brand-story{padding-top:44px;padding-bottom:44px}
}

/* 카드 3D 틸트 + 광택 — 제거됨 (운영자 지시 8/6).
   틸트를 없애면서 main.js 가 .tilting 클래스를 더 이상 붙이지 않으므로 여기 있던
   .tilting 규칙(광택 ::after, 틸트 전용 그림자, ai-card 엣지 글로우)은 전부 죽은 규칙이 되어
   함께 걷어냈다. 카드 호버 반응은 각 카드 규칙의 테두리·그림자로만 준다. */
@media (prefers-reduced-motion:reduce){
  .cat-tile::after,.product-card::after,.bt-tile::after,.ai-card::after,.pd-rel-item::after,.pt-card::after{display:none}
}

/* ===== premium: 프로스티드 글래스 (다크 섹션의 반투명 요소 승격) ===== */
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .ai-card{ -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(1.3); backdrop-filter:blur(var(--glass-blur)) saturate(1.3);
    background:linear-gradient(160deg,rgba(255,255,255,.12),rgba(255,255,255,.045));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 18px 40px -22px rgba(0,0,0,.55) }
  .btn-glassd{ -webkit-backdrop-filter:blur(var(--glass-blur)); backdrop-filter:blur(var(--glass-blur)) }
  .buy-chip,.fam-chip{ -webkit-backdrop-filter:blur(9px); backdrop-filter:blur(9px) }
}
/* 유리 카드 상단 하이라이트 라인(지원 무관, 은은한 입체감) */
.ai-card{position:relative}
.ai-card::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.10),transparent 40%);opacity:.7}
.ai-card > *{position:relative;z-index:1}

/* ===== premium pack v2 ===================================================== */
/* ── 다크 섹션 레이어링: 캔버스(1) < 그레인(2)=스포트라이트(2) < 콘텐츠(3) ── */
.ai-sol>.wrap,.brand-story>.wrap{position:relative;z-index:3}
.net-canvas{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.55}

/* ── 필름 그레인: 다크 섹션에 촬영 질감 (정적, 성능비용 0) ── */
.ai-sol::after,.brand-story::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  opacity:.05;mix-blend-mode:overlay;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='0.55'/></svg>")}

/* ── 커서 스포트라이트: 다크 섹션에서 커서 주변 은은한 조명 ── */
.cursor-spot{position:absolute;inset:0;pointer-events:none;z-index:2;opacity:0;
  transition:opacity .5s ease;mix-blend-mode:soft-light;
  background:radial-gradient(340px circle at var(--sx,50%) var(--sy,50%),rgba(255,255,255,.55),transparent 70%)}
.cursor-spot.on{opacity:1}

/* ── 서브페이지 히어로 오로라: 청색 블롭이 아주 느리게 호흡 ── */
.cat-hero-bg::after{content:"";position:absolute;inset:-18%;pointer-events:none;
  background:
    radial-gradient(32% 42% at 22% 30%,rgba(14,124,255,.15),transparent 70%),
    radial-gradient(28% 38% at 78% 18%,rgba(127,215,238,.12),transparent 72%);
  filter:blur(38px);animation:heroAurora 20s ease-in-out infinite alternate}
@keyframes heroAurora{
  from{transform:translate3d(-2%,-1%,0) scale(1)}
  to{transform:translate3d(2.5%,2%,0) scale(1.07)}}

/* ── 제품 상세 헤일로: 제품 뒤로 광륜이 천천히 회전 ── */
.pd-media::after{content:"";position:absolute;left:50%;top:46%;width:84%;aspect-ratio:1;
  transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;z-index:0;
  background:conic-gradient(from 0deg,transparent 0 30deg,rgba(14,124,255,.20) 82deg,rgba(127,215,238,.15) 122deg,transparent 172deg 360deg);
  filter:blur(18px);opacity:.85;animation:pdHalo 16s linear infinite}
.pd-media img{position:relative;z-index:1}
@keyframes pdHalo{to{transform:translate(-50%,-50%) rotate(360deg)}}

/* ── 모션 최소화: 전부 정지 ── */
@media (prefers-reduced-motion:reduce){
  .cat-hero-bg::after,.pd-media::after{animation:none}
  .cursor-spot,.net-canvas{display:none}
}

/* ── SmartThings 공식 앱 아이콘: 컨테이너를 원본 아트워크로 채움 ── */
.st-app-ico .st-app-img{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}

/* ── 인증·호환 마퀴: 공식 규격 배지가 조용히 흐르는 신뢰 스트립 ── */
.cert-marquee{margin-top:clamp(30px,4.5vw,52px);overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
.cert-track{display:flex;width:max-content;animation:certScroll 30s linear infinite}
.cert-marquee:hover .cert-track{animation-play-state:paused}
.cert-set{display:flex;gap:12px;padding-right:12px}
.cert-chip{display:inline-flex;align-items:center;white-space:nowrap;padding:9px 18px;border-radius:var(--radius-pill);
  border:1px solid var(--hairline);background:#fff;font-size:12px;letter-spacing:.08em;color:var(--ink-muted)}
@keyframes certScroll{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.cert-track{animation:none}}

/* ── 다크 유리 버튼: 호버 시 네온 엣지 ── */
.btn-glassd:hover{box-shadow:0 0 0 1px rgba(127,215,238,.35),0 0 26px -6px rgba(14,124,255,.6)}

/* ── 문의 폼: 라벨과 필수표시(*)가 한 줄에, 입력칸은 그 아래 한 덩어리로 ── */
.inq-field{display:block}
.inq-field input,.inq-field textarea{display:block;width:100%;margin-top:7px}
.inq-field small{display:block;margin-top:6px}
/* 문의 내역 카운트: 제목 옆 배지로 정돈 */
.inq-count{display:inline-block;vertical-align:middle;background:var(--plate);border-radius:var(--radius-pill);
  padding:2px 11px;margin-left:8px;font-size:12.5px;line-height:1.6}

/* ===== print: 어두운 섹션이 '흰 종이 위 흰 글씨'가 되지 않도록 강제 반전 + 크롬 UI 숨김 ===== */
@media print{
  .site-header,.to-topblur,.backtop,.scroll-progress,.drawer,.drawer-backdrop{display:none!important}
  .hero,.showcase,.ai-sol,.brand-story,.break-band,.bt-dark,.site-footer{background:#fff!important;color:#000!important}
  .hero *,.showcase *,.ai-sol *,.brand-story *,.break-band *,.bt-dark *,.site-footer *{color:#000!important;background:transparent!important}
}

/* ============ SmartThings 자동화 가이드 (/ai-solution/automation) ============
   에디토리얼 조판. 원칙 세 가지.
   1) 행폭(measure)을 em 으로 건다 — px 로 걸면 clamp 로 폰트가 커져도 한 줄 글자수가 늘어난다.
      34em = 한글 34자 ≈ 영문 68자. 한국어 권장 25~35자와 영문 60~75자를 동시에 만족하는 구간.
      이전 조판은 measure 가 아예 없어 1440px 에서 한 줄이 한글 67자, 1920px 에서 83자였다.
   2) 짧은 항목과 긴 문장을 다르게 취급한다 — 짧은 항목은 2열 레지스터로 묶고,
      긴 문장만 전폭 1열을 쓴다. 20자짜리가 900px 행을 혼자 쓰면 화면의 70%가 빈다.
   3) 위계는 테두리 상자가 아니라 무게·색·위치·여백으로 만든다(둥근 타일 남발 금지). */
/* ★변수는 .ag-layout 에 건다 — .ag-doc 에 걸면 그 부모인 레이아웃 그리드에서
   var(--ag-rail) 이 미정의라 grid-template-columns 선언 전체가 무효가 되어 1열로 무너진다. */
.ag-layout,.ag-doc,.ag-lede{
  --ag-rail:clamp(160px,15vw,206px);      /* 좌측 목차 레일 */
  --ag-gutter:clamp(22px,2.6vw,40px);
  --ag-measure:34em;                       /* 산문 행폭 */
  --ag-measure-tight:30em;                 /* 노트·부속 텍스트는 폭으로 '곁다리'임을 알린다 */
  --ag-cell:258px;                         /* 2열 레지스터 셀 최소폭 */
  --ag-row-y:clamp(8px,0.9vw,10px);
}
.ag-doc{max-width:100%;margin:0;min-width:0}

/* ── 도입부 ── */
.ag-lede{margin:0;padding:0 0 clamp(24px,3.2vw,40px)}
.ag-lede .ag-p{max-width:32em;margin:0 0 .9em;font-size:clamp(16px,1.4vw,18px);line-height:1.85;color:var(--ink)}
.ag-lede .ag-p+.ag-p{font-size:clamp(14.8px,1.2vw,16.2px);line-height:1.9;color:var(--ink-muted);margin-bottom:0}

/* ── 섹션 골격 ── */
.ag-sec{margin:0;padding:clamp(28px,3.8vw,50px) 0 0}
.ag-sec+.ag-sec{border-top:1px solid var(--hairline)}
.ag-sec-head{margin:0 0 clamp(15px,1.9vw,22px)}
.ag-no{display:block;margin:0 0 7px;font-family:var(--mono);font-size:11.5px;font-weight:700;
  letter-spacing:.1em;line-height:1.1;color:var(--accent-ink,var(--accent));font-variant-numeric:tabular-nums}
.ag-h{margin:0;max-width:24em;font-size:clamp(18px,1.8vw,21px);font-weight:800;
  letter-spacing:-.02em;line-height:1.4;color:var(--ink)}
.ag-h3{margin:0 0 clamp(10px,1.2vw,14px);padding:0 0 9px;border-bottom:1px solid var(--hairline);
  font-size:clamp(14.5px,1.3vw,16px);font-weight:700;letter-spacing:-.01em;line-height:1.45;color:var(--ink)}

/* 목차가 들어오면서 본문 폭이 924 → 681px 로 26% 깎였다(1440px 실측).
   이 페이지에 한해 랩을 넓혀 본문 폭을 되돌린다.
   :has 미지원 브라우저는 규칙이 무시되어 기존 폭 그대로 — 점진 향상이라 회귀 위험이 없다. */
@media (min-width:1024px){
  /* min() 하한이 없으면 1024px 에서 랩이 화면을 꽉 채워 좌우 여백이 0 이 된다(실측). */
  .sub-body .wrap.sup-wrap:has(.ag-layout){max-width:min(1240px,calc(100vw - 72px))}
}

/* ── 문서 레이아웃: 좌측 고정 목차 + 본문 ────────────────────────────────────
   ★예전엔 좌측 레일에 '섹션 제목 하나'만 놓았다. 레퍼런스 문서에서 그 자리는 목차여야 한다
     — 8개 절을 훑고 원하는 데로 바로 뛰는 것이 가이드의 기본 동작이다. */
.ag-layout{display:block}
/* 좁은 화면: 목차를 숨기지 않고 가로 칩 줄로 눕힌다 —
   8개 절짜리 문서에서 태블릿 구간만 길잡이가 없으면 스크롤로 찾아야 한다. */
.ag-toc{margin:0 0 clamp(22px,3vw,30px);padding:0 0 clamp(14px,1.8vw,18px);
  border-bottom:1px solid var(--hairline)}
.ag-toc ol{display:flex;gap:7px;
  /* ★칩을 wrap 시키면 390px 에서 6줄 270px — 본문 시작 전에 화면 2/3 를 먹는다.
     한 줄 가로 스크롤로 눕혀 45px 안쪽으로 가둔다. */
  flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;
  scrollbar-width:none;-ms-overflow-style:none}
.ag-toc ol::-webkit-scrollbar{display:none}
.ag-toc li{flex:0 0 auto;min-width:0}
.ag-toc a{white-space:nowrap}
/* ≤1023px: 칩 목차도 스크롤을 따라오게 한다.
   ★서브탭 아래에 쌓으면 헤더+서브탭+칩 3단 183px(390×844 의 22%)이 된다.
     대신 서브탭의 sticky 슬롯을 '인계'받는다 — 이 페이지에서만 서브탭을 문서 흐름으로
     되돌리고(상단에서는 그대로 보인다) 칩 바가 헤더 바로 아래 붙는다.
     결과 점유 76+48=124px 로, 서브탭만 붙던 139px 보다 오히려 작다. */
@media (max-width:1023px){
  body:has(.ag-toc) .cat-subnav{position:static}
  .ag-toc{position:sticky;top:var(--header-h,76px);z-index:41;
    /* wrap 거터 밖까지 배경을 넓혀야 좌우 틈으로 본문이 비쳐 지나가지 않는다 */
    margin-inline:calc(var(--mobile-gutter,28px) * -1);
    padding-inline:var(--mobile-gutter,28px);
    padding-top:9px;padding-bottom:9px;margin-bottom:clamp(18px,2.6vw,26px);
    background:var(--canvas);border-bottom:1px solid var(--hairline)}
  .ag-toc-cap{display:none}   /* 붙어 있는 동안 'CONTENTS' 캡션은 높이만 먹는다 */
}
@media (min-width:1024px){
  .ag-layout{display:grid;grid-template-columns:var(--ag-rail) minmax(0,1fr);
    column-gap:var(--ag-gutter);align-items:start}
  /* sticky 복구와 함께 .cat-subnav 도 살아나 헤더 아래 --subnav-h 를 점유한다.
     그만큼 더 내려 붙이지 않으면 목차 상단 45px 가 서브탭 뒤로 파묻힌다(실측). */
  .ag-toc{display:block;position:sticky;
    top:calc(var(--header-h,76px) + var(--subnav-h,63px) + 18px);
    max-height:calc(100vh - var(--header-h,76px) - var(--subnav-h,63px) - 40px);overflow:auto;
    padding-right:6px;border-right:1px solid var(--hairline)}
  .ag-lede{margin-left:calc(var(--ag-rail) + var(--ag-gutter))}
  /* 섹션 제목은 이제 본문 안에서 가로줄 위에 눕는다 */
  .ag-sec>.ag-sec-head{display:flex;align-items:baseline;gap:11px;
    margin:0 0 clamp(16px,2vw,22px);padding:0 0 11px;border-bottom:1px solid var(--hairline)}
  .ag-sec>.ag-sec-head .ag-no{margin:0}
  .ag-sec>.ag-sec-head .ag-h{max-width:30em}
}
.ag-toc-cap{margin:0 0 10px;font-size:10.5px;font-weight:700;letter-spacing:.16em;
  color:var(--ink-muted);text-transform:uppercase}
.ag-toc ol{margin:0;padding:0;list-style:none;counter-reset:none}
/* 칩 형태(≤1023px) */
.ag-toc a{display:inline-flex;align-items:baseline;gap:5px;
  padding:9px 13px;border-radius:999px;border:1px solid var(--hairline);
  font-size:12.5px;line-height:1.45;color:var(--ink-muted);word-break:keep-all;
  transition:color .18s var(--ease-micro),border-color .18s var(--ease-micro),background-color .18s var(--ease-micro)}
@media (min-width:1024px){
  /* 세로 목록(≥1024px) */
  .ag-toc ol{display:block;overflow:visible}
  .ag-toc a{display:grid;grid-template-columns:1.9em minmax(0,1fr);column-gap:6px;
    padding:7px 10px;border:0;border-radius:0;font-size:13px;line-height:1.5;
    white-space:normal;border-left:2px solid transparent;margin-left:-12px}
}
.ag-toc a:hover{color:var(--ink);border-color:color-mix(in srgb,var(--ink) 26%,transparent)}
.ag-toc-n{font-family:var(--mono);font-size:11px;font-weight:700;color:var(--accent-ink,var(--accent));
  font-variant-numeric:tabular-nums}
.ag-toc a>span:only-of-type{grid-column:2}   /* 번호 없는 항목(QR)이 1.9em 번호열에 갇히던 결함 */
.ag-toc a[aria-current="true"]{color:var(--ink);font-weight:600;
  background:color-mix(in srgb,var(--accent) 10%,transparent);border-color:transparent}
@media (min-width:1024px){
  .ag-toc a[aria-current="true"]{background:none;border-left-color:var(--accent)}
}
/* 앵커로 뛰었을 때 고정 헤더 + 되살아난 sticky 서브탭 아래로 착지시킨다.
   보정 전에는 가림 높이 139px(76+63) 인데 여백이 96px 라 제목이 43px 파묻혔다. */
.ag-sec{scroll-margin-top:calc(var(--header-h,76px) + var(--subnav-h,63px) + 20px)}

/* ── 산문 ── */
.ag-p{margin:0 0 1.15em;max-width:var(--ag-measure);
  font-size:clamp(14.8px,1.25vw,16.2px);line-height:1.9;color:var(--ink-soft,var(--ink-muted));word-break:keep-all}
.ag-p:last-child{margin-bottom:0}
/* 콜론으로 끝나는 문단은 아래 목록의 도입구 — 표제는 아니지만 표제 역할을 한다 */
.ag-lead-in{margin-bottom:.55em;font-weight:600;color:var(--ink)}

/* ── 레지스터: 짧은 항목을 2열로 묶어 트랙을 채운다. 테두리 상자 대신 헤어라인만 ── */
.ag-reg{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--ag-cell)),1fr));
  column-gap:clamp(20px,2.6vw,36px);row-gap:0;
  max-width:760px;margin:0 0 clamp(20px,2.6vw,30px);padding:0;list-style:none;
  border-bottom:1px solid var(--hairline)}
.ag-r{padding:var(--ag-row-y) 0;border-top:1px solid var(--hairline);min-width:0;
  font-size:clamp(14px,1.18vw,15.4px);line-height:1.78;color:var(--ink);word-break:keep-all}
.ag-wide{grid-column:1/-1}
/* 정의형 — 라벨을 윗줄로 올린 적층형. 라벨 열을 따로 잡지 않으므로
   영문 라벨('Sharing an individual routine')이 길어도 열이 무너지지 않는다. */
/* ★라벨을 윗줄로 올리면 짧은 항목도 무조건 2줄이 되어 한 항목이 80px 를 먹는다(실측).
   '시간대 / 특정 시간 또는 일몰·일출 기준 설정' 같은 한 마디짜리에 80px 는 낭비다.
   라벨·설명을 **한 줄에 흐르게** 두고 굵기·색으로만 구분한다. 라벨 열을 고정하지 않으므로
   영문 라벨('Sharing an individual routine')이 길어도 열이 무너지지 않는다(적층형을 택했던 이유). */
.ag-r-def dt,.ag-dt{display:inline;margin:0;font-size:inherit;font-weight:700;
  letter-spacing:.005em;color:var(--accent-ink,var(--accent))}
.ag-r-def dd,.ag-dd{display:inline;margin:0 0 0 .35em;color:var(--ink)}
/* 관계형(A → B) — 화살표를 좌측 걸이로 세워 B 의 둘째 줄부터 정렬시킨다 */
.ag-r-rel{display:block}
.ag-r-plain{color:var(--ink)}
/* 관계형도 한 줄로 흐른다 — 화살표가 자연스러운 구분자 역할을 한다 */
.ag-a{font-weight:700;color:var(--ink)}
.ag-b{color:var(--ink-soft,var(--ink-muted))}
.ag-b .ag-x{margin:0 .3em}
.ag-x{color:var(--accent)}
/* 인라인 토큰 — 원문의 [대괄호]·화살표를 지우지 않고 무게만 준다 */
.ag-ui{font-weight:700;color:var(--ink)}
.ag-arrow{padding:0 .1em;color:var(--accent)}
@media (min-width:480px){ .ag-ui{white-space:nowrap} }

/* ── 칩: 3~8자짜리 하위 항목을 한 줄에 묶는다(각각 한 줄씩 쓰면 허전해진다) ── */
.ag-chips{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 0;padding:0;list-style:none}
.ag-chips li{padding:5px 11px;border:1px solid var(--hairline);border-radius:var(--radius-pill,999px);
  background:#fff;font-size:12.8px;line-height:1.5;color:var(--ink);white-space:nowrap}
@media (max-width:400px){ .ag-chips li{white-space:normal} }

/* ── 절차형: 번호는 원문 그대로 '1.' — 마침표를 버리면 문구 변경이다 ── */
.ag-steps{margin:0 0 clamp(18px,2.4vw,26px);padding:0;list-style:none;border-bottom:1px solid var(--hairline)}
.ag-steps>li{display:grid;grid-template-columns:2.1em minmax(0,1fr);column-gap:clamp(9px,1.1vw,13px);
  padding:var(--ag-row-y) 0;border-top:1px solid var(--hairline);
  font-size:clamp(14px,1.18vw,15.4px);line-height:1.78;color:var(--ink);word-break:keep-all}
.ag-step-n{font-family:var(--mono);font-size:12.5px;font-weight:700;color:var(--accent-ink,var(--accent));
  text-align:right;font-variant-numeric:tabular-nums;padding-top:.15em}
.ag-step-t{max-width:var(--ag-measure);min-width:0}

/* ── 참고: 원문에 이미 '※'·'참고:' 표지가 있다. 틴트 박스는 같은 신호를 두 번 준다 ── */
.ag-note{margin:clamp(14px,1.8vw,20px) 0 clamp(18px,2.2vw,24px);
  padding:0 0 0 clamp(13px,1.5vw,17px);
  border-left:2px solid color-mix(in srgb,var(--accent) 42%,transparent);
  max-width:var(--ag-measure-tight);
  font-size:clamp(13.6px,1.12vw,14.8px);line-height:1.8;color:var(--ink-soft,var(--ink-muted));word-break:keep-all}

/* ── 카드: 이 페이지에서 유일한 '면(surface)' 구간 ── */
.ag-cardgrid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(12px,1.5vw,18px);margin:0}
/* ★align-items:start 는 카드마다 제 높이를 갖게 해 격자를 들쭉날쭉하게 만든다.
   같은 행에 놓인 카드는 같은 높이여야 '격자'로 보인다 — 기본값 stretch 로 되돌린다. */
@media (min-width:760px){ .ag-cardgrid{grid-template-columns:repeat(2,minmax(0,1fr))} }
/* 2×2 시나리오는 행마다 높이가 달라 계단이 진다(영문 실측 편차 47px).
   같은 행끼리는 이미 맞으므로 남은 건 행 간 차이 — 모든 행을 최대 행에 맞춘다. */
.ag-cardgrid:has(.ag-card--scn){grid-auto-rows:1fr}
/* 카드 높이만 맞추면 안쪽 조건/동작 박스의 아랫선이 카드마다 다른 자리에 선다
   (실측 하단 여백 72/72/48/25px). 도식이 카드 바닥까지 차도록 늘린다. */
.ag-card--scn{display:flex;flex-direction:column}
.ag-card--scn .ag-flow{flex:1 1 auto}
.ag-card{min-width:0;padding:clamp(17px,2vw,24px) clamp(16px,2vw,22px);
  border:1px solid var(--hairline);border-radius:16px;background:var(--plate,#fafbfc);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}
/* 카드 안은 폭이 좁다 — 레지스터를 1열로 고정하고 바깥 규칙선을 지운다 */
.ag-card .ag-reg,.ag-card .ag-steps{grid-template-columns:minmax(0,1fr);max-width:none;margin-bottom:0;border-bottom:0}
.ag-card .ag-r:first-child,.ag-card .ag-steps>li:first-child{border-top:0;padding-top:0}
.ag-card .ag-r:last-child,.ag-card .ag-steps>li:last-child{padding-bottom:0}
.ag-card .ag-p,.ag-card .ag-step-t{max-width:none}
.ag-card .ag-note{margin-bottom:0;max-width:none}
.ag-card .ag-wide{grid-column:auto}
/* Together 요약 — 같은 격자 칸, 색으로만 구분 */
.ag-together{border-color:color-mix(in srgb,var(--accent) 26%,var(--hairline));
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 7%,#fff),#fff)}
.ag-src{margin:clamp(12px,1.5vw,16px) 0 0;padding-top:11px;border-top:1px solid var(--hairline);
  font-size:12.3px;line-height:1.6}
.ag-src a{color:var(--ink-muted);text-decoration:underline;text-underline-offset:3px}
.ag-src a:hover{color:var(--accent-ink,var(--accent))}

/* ── 좁은 화면 ── */
@media (max-width:640px){
  .ag-doc{--ag-cell:100%;--ag-row-y:12px}
  .ag-reg{column-gap:0;max-width:none}
  .ag-p,.ag-note,.ag-step-t,.ag-lede .ag-p{max-width:none}
}

/* ── 푸터 주소: 클릭 한 번으로 복사 ─────────────────────────────────────────
   내비게이션·택배 송장에 그대로 붙여 넣는 경우가 많아 선택-드래그 없이 복사되게 한다.
   버튼이지만 본문 흐름의 주소처럼 보이게 두고, 아이콘과 '복사됨' 배지로만 조작 가능함을 알린다. */
.foot-addr-copy{display:inline-flex;align-items:center;gap:7px;max-width:100%;
  margin:0;padding:2px 6px 2px 0;border:0;background:none;
  font:inherit;color:inherit;text-align:left;cursor:pointer;
  border-radius:7px;transition:background .18s var(--ease-micro),color .18s var(--ease-micro)}
.foot-addr-text{word-break:keep-all}
.foot-addr-ico{flex:none;width:14px;height:14px;opacity:.45;transition:opacity .18s}
.foot-addr-copy:hover{background:color-mix(in srgb,currentColor 9%,transparent)}
.foot-addr-copy:hover .foot-addr-ico{opacity:.85}
.foot-addr-copy:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* '복사됨' 배지 — 복사 성공 시에만 나타난다(1.6초) */
.foot-addr-done{flex:none;font-size:11px;letter-spacing:.02em;padding:2px 7px;border-radius:999px;
  background:color-mix(in srgb,var(--accent) 22%,transparent);color:#fff;
  opacity:0;transform:translateX(-4px);pointer-events:none;
  transition:opacity .2s var(--ease-micro),transform .2s var(--ease-micro)}
.foot-addr-copy.is-copied .foot-addr-done,
.foot-addr-copy.is-manual .foot-addr-done{opacity:1;transform:none}
.foot-addr-copy.is-copied .foot-addr-ico,
.foot-addr-copy.is-manual .foot-addr-ico{opacity:0}
/* 복사가 막힌 환경: 성공(파랑)과 구분되게 중립색으로 '선택됨'을 알린다 */
.foot-addr-copy.is-manual .foot-addr-done{background:color-mix(in srgb,currentColor 26%,transparent)}
.foot-addr-copy.is-manual .foot-addr-text{background:color-mix(in srgb,var(--accent) 16%,transparent);border-radius:4px}
@media (max-width:767px){
  /* 터치 목표 44px 확보 */
  .foot-addr-copy{min-height:44px;padding-block:8px}
}
@media (prefers-reduced-motion:reduce){
  .foot-addr-copy,.foot-addr-ico,.foot-addr-done{transition:none}
}

/* ── QR 섹션 재구성 ────────────────────────────────────────────────────────
   성격이 다른 덩이를 한 격자에 넣지 않는다.
     .ag-steps-pair : 공유자/수락자 — 짝을 이루는 절차. 2열, 같은 높이.
     .ag-caution    : 유의 사항 — 절차가 아니라 제약. 전폭, 좌측 규칙선.
     .ag-quote      : 외부 기사 요약 — 인용. 전폭, 배경으로 본문과 구분. */
.ag-steps-pair{margin:0 0 clamp(16px,2vw,22px)}
.ag-caution{margin:0 0 clamp(16px,2vw,22px);padding:clamp(15px,1.8vw,20px) clamp(16px,2vw,22px);
  border-left:3px solid color-mix(in srgb,var(--accent) 46%,transparent);
  border-radius:0 12px 12px 0;background:color-mix(in srgb,var(--accent) 4%,transparent)}
.ag-caution .ag-h3{margin-bottom:10px;padding-bottom:8px}
.ag-caution .ag-reg{max-width:none;margin-bottom:0;border-bottom:0}
.ag-caution .ag-r:first-child{border-top:0;padding-top:0}
.ag-caution .ag-r:last-child{padding-bottom:0}
@media (min-width:760px){
  /* 제약 항목은 대개 2건이라 2열로 두면 세로 길이가 절반이 된다 */
  .ag-caution .ag-reg{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(20px,2.6vw,36px)}
}
.ag-quote{margin:clamp(18px,2.2vw,26px) 0 0;padding:clamp(17px,2vw,24px) clamp(16px,2vw,22px);
  border:1px solid color-mix(in srgb,var(--accent) 24%,var(--hairline));border-radius:16px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 6%,#fff),#fff)}
.ag-quote .ag-reg{max-width:none;margin-bottom:0;border-bottom:0}
.ag-quote .ag-r:first-child{border-top:0;padding-top:0}
@media (min-width:760px){
  .ag-quote .ag-reg{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(20px,2.6vw,36px)}
}
.ag-quote .ag-src{margin-top:clamp(12px,1.5vw,16px);padding-top:11px;border-top:1px solid var(--hairline);font-size:12.3px}

/* ── 시나리오 도식: 조건 → 동작 ──────────────────────────────────────────────
   자동화의 본질은 '무엇이 일어나면 무엇을 한다' 다. 목록으로 찍으면 메모지 가이드가 아니다. */
.ag-flow{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:stretch;gap:8px;margin:0}
.ag-flow-step{min-width:0;padding:11px 13px;border-radius:11px;
  background:color-mix(in srgb,var(--ink) 4%,transparent)}
.ag-flow-then{background:color-mix(in srgb,var(--accent) 9%,transparent)}
.ag-flow-tag{display:block;margin:0 0 5px;font-size:10.5px;font-weight:700;letter-spacing:.08em;
  color:var(--ink-muted);text-transform:uppercase}
.ag-flow-then .ag-flow-tag{color:var(--accent-ink,var(--accent))}
.ag-flow-step p{margin:0;font-size:clamp(13px,1.05vw,14.2px);line-height:1.65;color:var(--ink);word-break:keep-all}
.ag-flow-link{display:grid;place-items:center;color:var(--accent);font-size:17px;line-height:1}
@media (max-width:640px){
  /* 좁으면 세로 흐름 — 화살표를 아래로 돌린다 */
  .ag-flow{grid-template-columns:minmax(0,1fr);gap:6px}
  .ag-flow-link{transform:rotate(90deg);height:18px}
}
.ag-card--scn .ag-h3{margin-bottom:11px}

/* 회사 소개 본문(v012 No.37) — feature-cap 아래 이어지는 산문 문단.
   .feature-cap 은 사진 캡션용 작은 글자라 본문에는 쓸 수 없다. */
.company-body{max-width:62ch;margin:18px auto 0;font-size:15.5px;line-height:1.85;
  color:var(--ink-muted);word-break:keep-all;text-align:left}
@media (max-width:640px){.company-body{font-size:14.5px;line-height:1.8}}

/* ── 구매 후기 캡처(v012 6번 시트) ─────────────────────────────────────────
   캡처 원본의 가로폭이 571~1383px 로 제각각이라 그리드에 넣으면 들쭉날쭉해진다.
   제품별로 묶어 1열로 쌓고, 각 장을 카드 폭에 맞춰 축소만 한다(확대는 하지 않는다). */
.rev-head{margin:38px 0 6px}
.rev-head h2{font-size:1.25rem;font-weight:800;letter-spacing:-.01em}
.rev-head p{margin-top:6px;font-size:14px;color:var(--ink-muted);word-break:keep-all}
.rev-group{margin-top:26px}
/* 안내 문구 블록을 걷어내 첫 그룹이 서브탭에 바로 붙는다 — 그 한 칸만 여백을 준다 */
.rev-group:first-of-type{margin-top:8px}
.rev-group-name{display:flex;align-items:center;gap:9px;font-size:15px;font-weight:700;
  padding-bottom:9px;border-bottom:1px solid var(--hairline)}
.rev-group-n{font-size:12px;font-weight:600;color:var(--ink-muted);
  background:var(--plate);border-radius:var(--radius-pill);padding:2px 9px}
.rev-shots{display:flex;flex-direction:column;gap:12px;margin-top:14px}
.rev-shot{margin:0;padding:12px 14px;border:1px solid var(--hairline);border-radius:14px;
  background:#fff;overflow:hidden}
/* 캡처 폭이 571~1383px 로 제각각이라 가운데 정렬하면 카드마다 시작점이 어긋난다.
   좌측으로 붙여 아바타·별점 줄이 세로로 한 라인에 맞게 한다(운영자 지시 8/5). */
.rev-shot img{display:block;width:auto;max-width:100%;height:auto;margin:0}
@media (max-width:640px){
  .rev-shot{padding:9px 10px;border-radius:12px}
  .rev-group-name{font-size:14px}
}
/* ★캡처 원본이 최대 1383px 라 본문 폭(980px) 안에서는 51% 로 줄어 글자가 안 읽힌다.
   리뷰 섹션만 뷰포트 기준으로 넓혀 축소율을 88% 수준까지 되돌린다.
   (본문 컨테이너를 통째로 넓히면 다른 지원 페이지 조판이 흔들리므로 이 섹션에만 적용)
   ★★:has(.rev-shots) 로 한정한다 — 8/12 에 후기를 텍스트 카드로 전환한 뒤에도 이 규칙이
     그대로 걸려 텍스트 그룹이 1300px 로 본문 밖까지 나갔고, 다른 고객지원 탭과 좌우 폭이
     달라 이 페이지만 좌측으로 쏠려 보였다(운영자 지적 8/12). 캡처가 남아 있는 그룹만 넓힌다. */
@media (min-width:1080px){
  .rev-group:has(.rev-shots){width:min(1300px,calc(100vw - 60px));margin-left:50%;transform:translateX(-50%)}
}

/* ── 좁은 폭에서 캡처 가독성 ──────────────────────────────────────────────
   캡처 원본 폭이 571~1383px 로 제각각이다. 폭에 맞춰 줄이면 넓은 캡처(허브 V4 4장)는
   모바일에서 34% 까지 축소돼 글자를 읽을 수 없다(실측 460px 카드 기준).
   그래서 1079px 아래에서는 이미지를 원본 크기로 두고 **카드 안에서만** 가로로 넘긴다.
   ★페이지가 밀리지 않게 스크롤 주체는 .rev-shot 이며, 넘치지 않는 캡처에는 스크롤바가 생기지 않는다. */
.rev-swipe{display:none}   /* 기본 숨김 — 아래 미디어쿼리에서만 켠다(순서가 뒤바뀌면 영영 안 보인다) */
@media (max-width:1079px){
  .rev-shot{overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
    position:relative;padding-right:0}
  .rev-shot img{max-width:none}
  .rev-shots{gap:10px}
  /* 잘린 쪽이 더 있다는 걸 알려 준다. 그라데이션만으로는 눈에 띄지 않아 문구로 명시한다. */
  .rev-swipe{display:inline-flex;align-items:center;gap:5px;margin-left:auto;
    font-size:11.5px;font-weight:500;color:var(--ink-muted);white-space:nowrap}
  .rev-swipe svg{width:13px;height:13px;opacity:.7}
}

/* 아이브로(kicker)는 원래 라틴 대문자용이라 mono 서체 + 넓은 자간이 걸려 있다.
   한글이 들어오면 "빈 틈 없 이"처럼 낱자가 흩어져 읽히지 않으므로, 한글일 때만 본문 서체로
   되돌리고 자간을 정상화한다. 판정은 PHP 가 .is-ko 로 붙여 준다(ai-sub.php). */
.hero-kicker.is-ko,.break-kicker.is-ko{font-family:var(--sans);letter-spacing:-.01em;
  word-spacing:normal;font-weight:700;word-break:keep-all}

/* 시안 순서: 제목 → 본문 문단 → 아이콘 4개 → 사진. 이 문단은 가운데 정렬 본문이다. */
.feat-lead{max-width:720px;margin:clamp(18px,2.4vw,30px) auto 0;text-align:center;
  font-size:clamp(14.5px,1.15vw,16.5px);line-height:1.85;color:var(--ink-muted);word-break:keep-all}
.feat-lead strong{color:var(--ink);font-weight:700}

/* ============================================================
   대화형 FAQ 도우미
   씨앤아이 사이트(hcni)에서 그대로 옮겨 테마만 씽즈원으로 바꿨다(2026-09-16 운영자 지시).
   외부 AI API 없이, 미리 만들어 둔 문답을 **대화처럼** 주고받는다.
   도우미 말풍선은 왼쪽, 고객이 고른 것은 오른쪽에 쌓인다.

   마크업: inc/header.php(열기 버튼) · inc/footer.php(패널)
   동작:   assets/js/chatbot.js   /   문답: 관리자 > 챗봇 관리

   ⚠️ 패널은 푸터 안에 있지만 position:fixed 라 푸터 위치와 무관하게 화면에 붙는다.
      헤더 안에 두지 않는다 — 헤더의 backdrop-filter 가 자손 fixed 의 포함블록이 되어
      스크롤 시작 지점에서 패널이 튄다.
   ⚠️ 전부 새 선택자(.cb*)다. 기존 사이트 선택자를 건드리지 않는다.
   ============================================================ */

:root{
  --cb-warm:   #FFFFFF;   /* 패널 바탕 — 씽즈원은 순백 카드를 쓴다 */
  --cb-warm-2: #F7F8FA;   /* 대화 로그 바닥 */
  --cb-ink:    #1C1E22;   /* 본문 먹 — 사이트 --ink 와 같은 계열 */
  --cb-sub:    #5B6068;   /* 보조 텍스트 — 사이트 --ink-muted */
  --cb-sub-2:  #6B7280;   /* 라벨 */
  --cb-gold:   #7FB6FF;   /* 시그니처 밝은 쪽 — 브랜드 블루 연한 값 */
  --cb-gold-d: #0E7CFF;   /* 시그니처 진한 쪽 — 사이트 --accent */
  --cb-blue:   #0A5AD6;   /* 고객 말풍선 — 사이트 --accent-deep */
  --cb-hair:   color-mix(in srgb,#1C1E22 11%,transparent);
  /* 씨앤아이에만 있던 토큰을 여기서 닫는다 — 씽즈원 CSS 에는 없는 이름이라
     그대로 두면 값이 비어 레이아웃이 무너진다(2026-09-16 이식). */
  --cb-ease:   cubic-bezier(.2,.7,.3,1);
  --cb-gray-100:#F1F3F5;
  --cb-brand-700:#0A4FA8;
  --cb-container:1200px;
  --cb-gutter:20px;
}

/* ── 헤더 열기 버튼 ─────────────────────────────────────────
   2026-09-16 운영자 지적("챗봇 버튼은 동그라미로 감싸는 게 없네, 스토어 구매나 한국어처럼.
   좌우랑 높이도 다르고 크기도 다른 것 같고") 수정.

   ★원인: 씨앤아이 마크업은 `class="hdr-drop__btn cbot-open"` 라 **드롭다운 버튼의 알약을
     같이 입고 있었다.** 이식하면서 클래스가 `cbot-open` 하나만 남아, 여기 주석이 말하는
     '헤더 버튼 규칙을 물려받는다'가 실제로는 성립하지 않았다 — 테두리도 알약도 없이
     44x44 맨버튼으로 떠 있었다(옆 버튼은 34/38px).
     클래스를 되살리는 대신 **여기서 .lang-toggle 과 같은 값을 직접 준다.** 그쪽 클래스를
     빌려 입으면 드롭다운 전용 규칙(열림 상태·화살표 회전)까지 따라와 엉킨다.

   ★색은 반드시 currentColor 로 푼다. 헤더 글자색이 어두운 히어로 위에서는 흰색,
     스크롤하면 먹색으로 바뀐다 — 고정색을 쓰면 한쪽에서 안 보인다
     (실제로 열림 상태가 --cb-brand-700(짙은 파랑)이라 히어로 위에서 묻혀 있었다). */
.cbot-open{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  /* ★flex:none 필수. 영문 헤더는 메뉴가 길어 자리가 빠듯한데, 이게 없으면 flex 가
     이 버튼을 눌러 34px 원이 27x34 타원이 된다(영문 1024px 실측). */
  flex:0 0 auto;
  height:34px; padding:0 12px;
  border:1px solid color-mix(in srgb,currentColor 26%,transparent);
  border-radius:var(--radius-pill);
  font-size:12.5px; font-weight:600; letter-spacing:.01em; color:inherit; opacity:.9;
  cursor:pointer;
  transition:opacity .2s ease,background-color .2s ease,border-color .2s ease;
}
.cbot-open svg{ width:15px; height:15px; flex:0 0 auto; opacity:.8; }
/* 호버는 색만 — 이동 금지(운영자 규칙). .lang-toggle 과 같은 값. */
.cbot-open:hover{
  opacity:1;
  background:color-mix(in srgb,currentColor 9%,transparent);
  border-color:color-mix(in srgb,currentColor 42%,transparent);
}
/* 열려 있는 동안은 테두리만 브랜드색으로 — 글자색은 헤더를 그대로 따른다 */
.cbot-open[aria-expanded="true"]{
  opacity:1;
  background:color-mix(in srgb,currentColor 9%,transparent);
  border-color:var(--cb-gold-d);
}

/* ── 패널 ──────────────────────────────────────────────────
   top 을 헤더 높이에 묶지 않고 84px 로 고정한다. 헤더는 스크롤하면 76→62px 로
   줄어드는데, var(--header-h) 를 쓰면 그때 패널이 같이 들썩인다. */
.cb{
  position:fixed; z-index:95;                 /* .mbar 90 · .to-top 80 위, 드로어 99 아래 */
  top:84px;
  /* 울트라와이드에서 패널이 화면 맨 끝에 붙으면 자기를 연 헤더 버튼과 수백 px 떨어진다.
     본문 컨테이너의 오른쪽 가장자리보다 더 밖으로는 나가지 않게 묶는다. */
  right:max(clamp(16px,2.4vw,28px), calc((100vw - var(--cb-container)) / 2));
  width:min(360px, calc(100vw - 32px));
  /* ⚠️ vh 가 아니라 svh 다. vh 는 '툴바가 숨은 상태' 기준이라, 주소창이 떠 있는
     가로모드 폰에서 패널 바닥이 화면 밖으로 나가 [1:1 문의하기] 가 툴바에 먹힌다.
     아래 폰 분기는 원래 svh 를 쓰고 있었는데 이 분기만 vh 로 남아 있었다.
     구형 브라우저(svh 미지원)를 위해 vh 줄을 폴백으로 먼저 둔다. */
  /* 690px 인 이유: 660 이면 분류 6개 중 **4개가 대화창 바닥에 딱 맞아떨어져**
     잘린 항목이 하나도 안 보였다. 태블릿은 스크롤 막대가 오버레이라 안 보이므로
     "이게 전부"로 읽힌다. 690 이면 다섯째 항목이 26px 걸쳐 더 있다는 게 보인다.
     (데스크톱은 15px 스크롤 막대가 따로 신호를 주지만 태블릿은 없다.) */
  max-height:min(690px, calc(100vh - 116px));
  max-height:min(690px, calc(100svh - 116px));
  display:flex; flex-direction:column; overflow:hidden;
  border-radius:20px; background:#fff; color:var(--cb-ink);
  border:1px solid var(--cb-hair);
  box-shadow:0 40px 74px -34px rgba(28,30,34,.42), 0 8px 20px -12px rgba(28,30,34,.18);
  opacity:0; transform:translateY(-10px) scale(.985); transform-origin:100% 0;
  transition:opacity .22s var(--cb-ease), transform .22s var(--cb-ease);
}
.cb.is-open{ opacity:1; transform:none; }
/* ★ display 를 준 요소는 브라우저 기본 [hidden]{display:none} 이 **안 먹는다**
     (작성자 스타일이 UA 스타일을 이긴다). 이 한 줄이 없으면 닫힌 패널이
     opacity:0 인 채로 화면에 남아, 모든 페이지 오른쪽 위 386x595 영역의 클릭을
     통째로 삼킨다 — 언어 선택도 메뉴도 안 눌린다(2026-09-15 실측으로 확인).
     display 를 주는 선택자에는 [hidden] 짝규칙을 반드시 함께 적는다. */
.cb[hidden]{ display:none; }

/* ── 헤더: 메신저 프로필 바 ────────────────────────────────
   패널 전체가 "대화 앱" 으로 읽히도록 헤더를 어둡게 덮지 않는다.
   밀도는 제품 사진 아바타 · 골드 링 · 골드 헤어라인 · 그림자로 만든다. */
.cb__head{
  flex:none; position:relative; z-index:2;
  display:flex; align-items:center; gap:9px;
  padding:11px 11px 11px 12px;
  background:linear-gradient(180deg,#FFFFFF 0%, #FAFBFD 100%);
}
.cb__head::before{   /* 패널 최상단 골드 시그니처 */
  content:""; position:absolute; left:0; right:0; top:0; height:3px;
  background:linear-gradient(90deg, var(--cb-gold-d) 0%, var(--cb-gold) 46%, #BFDBFF 100%);
}
.cb__head::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--cb-hair);
}
/* 손가락으로 누르는 것은 44px 이상 (어르신 사용자) */
.cb__x{
  flex:none; width:44px; height:44px; border-radius:12px;
  display:grid; place-items:center; cursor:pointer; color:var(--cb-sub-2);
  background:transparent; border:1px solid transparent;
  transition:background .16s var(--cb-ease), color .16s var(--cb-ease), transform .13s var(--cb-ease);
}
.cb__x svg{ width:19px; height:19px; }
.cb__x:hover{ background:var(--cb-gray-100); color:var(--cb-ink); }
.cb__x:active{ transform:scale(.97); }

.cb__id{ flex:1; min-width:0; }
/* 국문/영문 모두 들어간다. 한 줄로 가정하지 않는다 (영문이 길면 두 줄로 흐른다) */
.cb__name{
  display:block; font-size:.875rem; font-weight:800; letter-spacing:-.015em; color:var(--cb-ink);
  line-height:1.3; word-break:keep-all; overflow-wrap:break-word;
}
.cb__state{
  display:flex; align-items:center; gap:6px; margin-top:3px;
  font-size:.8125rem; font-weight:600; line-height:1.35; color:var(--cb-sub);
  word-break:keep-all; overflow-wrap:break-word;
}
.cb__dot{
  width:8px; height:8px; border-radius:50%; flex:none;
  background:var(--cb-gold-d); box-shadow:0 0 0 3px rgba(14,124,255,.18);
}

/* ── 브랜드 아바타 ─────────────────────────────────────────
   2026-09-16 운영자 지적("로고가 벗어나는데 딱 맞았으면 함") 수정.

   ★씨앤아이에서 이식할 때 **그 사이트의 제품 사진 기준 상수가 그대로 따라왔다.**
     거기 원본은 860x717 제품 사진이라 위아래 흰 여백이 넓어서, 원 안에 제품을 채우려고
     width:153.2% + 세로보정 1.604% 로 확대·이동한 뒤 원형으로 잘라 냈다.
     씽즈원이 쓰는 건 그런 사진이 아니라 **180x176 브랜드 마크(투명 배경)** 다.
     같은 상수를 먹이니 1.53배로 부풀어 사방 9~17px 이 잘려 나갔다(실측).

   ★마크 실측(알파 기준): 캔버스 180x176 안에서 마크가 173x168(96%)을 차지하고,
     모서리 반경은 44px = 마크폭의 25.4% 인 **둥근 사각형**이다.
     그래서 원(50%)으로 자르면 네 모서리에서 최대 36px 이 깎인다 — 그게 '벗어나' 보이던 것이다.
     담는 상자도 같은 모양(둥근 사각형)으로 두고 마크를 통째로 넣는다.
     사이트 헤더(.brand-ico)도 자르지 않고 그대로 쓴다 — 취급을 맞춘다.

   ⚠️ 배경색을 깔지 않는다. 마크는 투명 배경이라, 색을 깔면 둥근 모서리 바깥이 비쳐 보인다. */
.cb__av,.cb-av,.cb-intro__av{
  position:relative; overflow:hidden; border-radius:26%; flex:none;
}
.cb__av img,.cb-av img,.cb-intro__av img{
  display:block; width:100%; height:100%; object-fit:contain;
}
.cb__av{
  width:38px; height:38px;
  box-shadow:0 0 0 1.5px var(--cb-gold-d), 0 0 0 3.5px rgba(127,182,255,.26), 0 6px 13px -8px rgba(28,30,34,.6);
}
.cb-intro__av{
  width:48px; height:48px; margin-bottom:10px;
  box-shadow:0 0 0 1.5px var(--cb-gold-d), 0 0 0 5px rgba(127,182,255,.24), 0 11px 21px -14px rgba(28,30,34,.66);
}
.cb-av{
  width:28px; height:28px; margin-top:24px;
  box-shadow:0 0 0 1.5px var(--cb-gold), 0 0 0 2.5px rgba(127,182,255,.16), 0 4px 9px -5px rgba(28,30,34,.4);
}

/* ── 대화 로그 ───────────────────────────────────────────── */
.cb__log{
  flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain;
  padding:16px 14px 18px;
  display:flex; flex-direction:column; gap:14px;
  background:
    radial-gradient(520px 200px at 0% 0%, rgba(127,182,255,.16), transparent 68%),
    linear-gradient(180deg, #FAFBFD 0%, var(--cb-warm-2) 100%);
}
/* 실제 메신저처럼 대화가 바닥에 붙고 위로 쌓인다.
   justify-content:flex-end 는 스크롤에서 윗부분을 잘라먹으므로 margin-top:auto 를 쓴다. */
.cb__log > :first-child{ margin-top:auto; }

/* 대화 시작 인트로 — 패널을 열었을 때 위가 비어 보이지 않게 밀도를 채운다 */
.cb-intro{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:2px 8px 13px; border-bottom:1px solid var(--cb-hair);
}
.cb-intro__n{ font-size:.9375rem; font-weight:800; letter-spacing:-.015em; line-height:1.3; color:var(--cb-ink); word-break:keep-all; }
.cb-intro__d{
  margin:5px 0 0; font-size:.875rem; font-weight:500; line-height:1.6; color:var(--cb-sub);
  word-break:keep-all; max-width:32ch;
}
.cb-intro__rule{
  margin-top:11px; width:44px; height:3px; border-radius:3px;
  background:linear-gradient(90deg, var(--cb-gold-d), var(--cb-gold));
}

/* 한 줄(행) */
.cb-row{ display:flex; gap:10px; align-items:flex-start; }
.cb-row--me{ justify-content:flex-end; }

.cb-msg{ min-width:0; max-width:calc(100% - 44px); flex:1; }
.cb-msg__who{
  display:block; margin:0 0 5px 3px;
  font-size:.8125rem; font-weight:700; letter-spacing:.01em; color:var(--cb-sub-2);
}

.cb-bubble{
  border-radius:16px; padding:12px 14px;
  font-size:.875rem; line-height:1.62; letter-spacing:-.005em;
  word-break:keep-all; overflow-wrap:break-word;   /* 한글은 어절 단위로 끊는다 */
}
.cb-bubble p{ margin:0 0 .66em; }
.cb-bubble p:last-child{ margin-bottom:0; }
/* 도우미 = 흰 카드 + 헤어라인 + 실제 그림자(입체) */
.cb-bubble--bot{
  background:#fff; color:var(--cb-ink);
  border:1px solid var(--cb-hair); border-top-left-radius:6px;
  box-shadow:0 10px 22px -16px rgba(28,30,34,.5), 0 2px 5px -3px rgba(28,30,34,.16);
}
/* 고객 = 진한 블루 단색(그라디언트 금지 — 파란 그라디언트는 'AI 지문'으로 기각됐다) */
.cb-bubble--me{
  max-width:86%;
  background:var(--cb-blue); color:#fff; font-weight:600;
  border:1px solid rgba(10,90,214,.9); border-top-right-radius:6px;
  box-shadow:0 12px 24px -16px rgba(10,90,214,.8);
}

/* ── 선택지 칩 (도우미 말풍선 아래에 붙는다) ────────────────
   .cb-quick 은 이미 아바타만큼 들여쓰인 .cb-msg 안에 있다.
   여기서 또 들여쓰면 칩 폭이 두 번 깎여 영문에서 무너진다. */
.cb-quick{ margin:10px 0 0; display:grid; gap:8px; }
.cb-chip{
  position:relative; display:flex; align-items:center; gap:10px; width:100%;
  min-height:42px; padding:9px 11px 9px 13px;
  text-align:left; cursor:pointer;
  font-size:.875rem; font-weight:600; line-height:1.45; letter-spacing:-.005em; color:var(--cb-ink);
  background:#fff; border:1px solid var(--cb-hair); border-radius:13px; overflow:hidden;
  box-shadow:0 8px 18px -16px rgba(28,30,34,.6), 0 1px 2px rgba(28,30,34,.05);
  transition:background .16s var(--cb-ease), border-color .16s var(--cb-ease), transform .13s var(--cb-ease);
}
/* 왼쪽 세로 악센트 — 네모 박스만 있는 카드가 되지 않도록 위계를 만든다 */
.cb-chip::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--cb-gold); opacity:.55;
  transition:opacity .16s var(--cb-ease), background .16s var(--cb-ease);
}
.cb-chip__t{ flex:1; min-width:0; word-break:keep-all; overflow-wrap:break-word; }
/* 제품 칩만 두 줄(이름 + 한 줄 설명). 설명이 비면 JS 가 이 묶음 자체를 안 만든다 —
   빈 줄이 남으면 제품마다 칩 높이가 들쭉날쭉해진다. */
.cb-chip__w{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.cb-chip__w .cb-chip__t{ flex:none; }
.cb-chip__s{
  font-size:.78125rem; font-weight:500; line-height:1.45; color:var(--cb-sub);
  word-break:keep-all; overflow-wrap:break-word;
}
.cb-chip__n{
  flex:none; min-width:30px; padding:3px 9px; border-radius:999px;
  font-size:.8125rem; font-weight:800; text-align:center; line-height:1.3;
  color:var(--cb-blue); background:rgba(10,90,214,.09); border:1px solid rgba(10,90,214,.16);
}
.cb-chip__go{ flex:none; width:18px; height:18px; color:#6B7280; }
/* hover 는 배경·보더 색만 바꾼다. 이동·광택 스윕 금지(운영자 규칙) */
.cb-chip:hover{ background:#F5F9FF; border-color:rgba(14,124,255,.5); }
.cb-chip:hover::before{ opacity:1; background:var(--cb-gold-d); }
.cb-chip:active{ transform:scale(.98); }
/* 질문 칩 */
.cb-chip--q{ font-weight:500; }
.cb-chip--q::before{ background:rgba(10,90,214,.42); }
.cb-chip--q:hover::before{ background:var(--cb-blue); }

/* ── 답변 말풍선 ─────────────────────────────────────────── */
.cb-bubble--ans{ padding:14px 15px 12px; }
.cb-ans{ font-size:.875rem; line-height:1.72; color:var(--cb-ink); }
.cb-ans p{ margin:0 0 .7em; }
.cb-ans p:last-child{ margin-bottom:0; }
.cb-ans ul,.cb-ans ol{ margin:0 0 .7em; padding-left:1.2em; }
.cb-ans li{ margin-bottom:.32em; }
.cb-ans li:last-child{ margin-bottom:0; }
.cb-ans strong{ font-weight:800; color:var(--cb-brand-700); box-shadow:inset 0 -.42em 0 rgba(10,90,214,.10); }
.cb-ans a{ color:var(--cb-blue); text-decoration:underline; text-underline-offset:2px; }
/* ── 바닥 액션 바 ────────────────────────────────────────── */
.cb__bar{
  flex:none; display:flex; align-items:center; gap:9px;
  padding:11px 13px; border-top:1px solid var(--cb-hair);
  background:linear-gradient(180deg,#fff, var(--cb-warm));
}
.cb__home,.cb__bar .cb__back{
  display:inline-flex; align-items:center; gap:4px; min-height:44px;
  padding:9px 17px; border-radius:999px;
  border:1px solid rgba(28,30,34,.16); background:#fff;
  font-size:.875rem; font-weight:700; color:var(--cb-sub); cursor:pointer;
  transition:border-color .16s var(--cb-ease), color .16s var(--cb-ease), background .16s var(--cb-ease), transform .13s var(--cb-ease);
}
.cb__bar .cb__back{ margin-left:auto; padding-left:12px; }
.cb__bar .cb__back svg{ width:16px; height:16px; flex:none; }
.cb__home:hover,.cb__bar .cb__back:hover{ border-color:rgba(14,124,255,.6); color:var(--cb-ink); background:#F5F9FF; }
.cb__home:active,.cb__bar .cb__back:active{ transform:scale(.98); }
.cb__home[hidden],.cb__bar .cb__back[hidden]{ display:none; }
.cb__bar[hidden]{ display:none; }

/* ── "아래로 더 있음" 그림자 ────────────────────────────────────────────────
   대화창 바닥에 겹쳐 놓는 얇은 페이드. chatbot.js 가 스크롤이 남아 있을 때만 켠다.
   flex 흐름에서 자기 높이만큼 음수 마진으로 끌어올려 로그 위에 포갠다
   (로그 안에 넣으면 내용과 같이 스크롤돼 버려서 바닥에 붙어 있지 못한다).
   ⚠️ display 를 주므로 [hidden] 짝규칙이 필요하다. */
.cb__fade{
  flex:none; position:relative; z-index:2;
  height:26px; margin-top:-26px; pointer-events:none;
  background:linear-gradient(to top, var(--cb-warm-2) 15%, rgba(247,248,250,0));
}
.cb__fade[hidden]{ display:none; }

/* 데이터 원본. 화면에 보이지 않지만 JS 가 여기서 읽어 대화를 만든다.
   ⚠️ display 를 주면 브라우저 기본 [hidden]{display:none} 을 이겨 목록이 통째로 드러난다. */
.cb-data{ display:none; }

/* ── 등장 모션 (260ms · stagger 50~60ms) ─────────────────── */
@keyframes cbIn{
  from{ opacity:0; transform:translateY(10px) scale(.97); }
  to{ opacity:1; transform:none; }
}
.cb-row,.cb-intro{ animation:cbIn .26s var(--cb-ease) both; }
.cb-quick .cb-chip{ animation:cbIn .24s var(--cb-ease) both; }
.cb-quick .cb-chip:nth-child(1){ animation-delay:.04s }
.cb-quick .cb-chip:nth-child(2){ animation-delay:.09s }
.cb-quick .cb-chip:nth-child(3){ animation-delay:.14s }
.cb-quick .cb-chip:nth-child(4){ animation-delay:.19s }
.cb-quick .cb-chip:nth-child(5){ animation-delay:.24s }
.cb-quick .cb-chip:nth-child(6){ animation-delay:.29s }
.cb-quick .cb-chip:nth-child(7){ animation-delay:.34s }

/* 터치 기기에서는 hover 모션을 끈다 */
@media (hover:none){
  .cb-chip:hover{ transform:none; background:#fff; border-color:var(--cb-hair); }
  .cb-chip:hover::before{ opacity:.55; background:var(--cb-gold); }
  .cb-chip--q:hover::before{ background:rgba(10,90,214,.42); }
  .cb__home:hover,.cb__back:hover,.cb__x:hover{ transform:none; }
}

/* ── 폰: 아래에서 올라오는 바텀시트 ──────────────────────────
   엄지로 닿는 화면 아래를 쓴다. 열려 있는 동안 하단바(.mbar)와 맨위로(.to-top)는
   비킨다 — 셋이 겹치면 시트 바닥의 [1:1 문의]를 가린다. */
@media (max-width:640px){
  .cb{
    top:auto; left:0; right:0; bottom:0;
    width:auto; max-height:min(84svh, calc(100svh - var(--header-h) - 12px));
    border-radius:18px 18px 0 0; border-left:0; border-right:0; border-bottom:0;
    box-shadow:0 -22px 54px -26px rgba(28,30,34,.5);
    transform-origin:50% 100%; transform:translateY(14px);
  }
  /* 열린 상태를 이 분기 안에서도 명시해 둔다. 바깥의 .cb.is-open{transform:none} 만으로도
     이미 이기지만(명시도 0-2-0 > 0-1-0), 시트 오프셋과 한 자리에 있어야 다음에 이 블록만
     보는 사람이 "열면 어디로 가는지"를 함께 읽는다. */
  .cb.is-open{ transform:none; }
  .cb__head{ gap:8px; padding-left:10px; padding-right:10px; }
  .cb__log{ padding:14px var(--cb-gutter) 16px; }
  .cb__bar{ padding:11px var(--cb-gutter) calc(11px + env(safe-area-inset-bottom,0px)); }
  .cb-chip{ min-height:52px; }
  /* 밀어낸 하단바는 **탭 순서에서도** 빠져야 한다. transform 만으로는 화면 밖에
     있을 뿐 포커스가 계속 들어가, 키보드로 도우미를 쓰다 보이지 않는 곳으로 끌려간다. */
  body.chat-open .mbar{ transform:translateY(110%); visibility:hidden; }
}

/* 도우미가 열려 있으면 [맨 위로] 원형 버튼은 비킨다 — 패널 오른쪽 아래 모서리에
   반쯤 파묻혀 보인다. 폰뿐 아니라 태블릿 가로(641~900)에서도 겹치므로 폭 제한 없이 건다. */
body.chat-open .to-top{ opacity:0; visibility:hidden; }

/* 도우미 버튼을 아이콘만으로 줄이는 구간.
   ⚠️ 900px 이 아니라 1180px 이다. 영문에서 라벨이 [Help] 로 바뀌어도 메뉴가 길어져
      901~1139px 에서 **언어 선택기가 헤더 밖으로 밀려나 사라졌다**(아이패드 가로
      1024x768 이 정확히 여기 걸린다). 한국어로 되돌릴 방법이 없어지는 치명적인 건이라
      라벨을 먼저 접는다. */
@media (max-width:1180px){
  /* 라벨을 접으면 아이콘만 남는다 — 정사각(=알약 반경이라 원)으로 두되 **높이는 옆
     버튼(.lang-toggle 34px)과 같게** 맞춘다. 44 로 두면 이 버튼만 10px 더 커 보인다.
     터치 기기의 44px 하한은 아래 @media (hover:none) 이 따로 지킨다. */
  .cbot-open{ width:34px; height:34px; padding:0; }
  .cbot-open__t{ display:none; }
}
/* 폰에서는 .header-actions 간격이 2px 다(responsive.css:156). 예전 이 버튼은 테두리가
   없어 그래도 떨어져 보였는데, 알약을 입히고 나니 햄버거에 붙어 보인다 — 여기만 띄운다. */
@media (max-width:767px){
  .header-actions .cbot-open{ margin-right:6px; }
}
/* ⚠️ 알려진 미해결: 901~1090px 에서 언어 선택기가 헤더 밖으로 밀려나 안 눌린다.
     실측(도우미 버튼을 빼고 다시 재서 가른 결과):
       901~1000  — 도우미가 없어도 밀려난다. **원래 있던 문제**다.
                   내비게이션(645px)+브랜드+여백이 컨테이너보다 넓다.
       1000~1090 — 도우미 버튼 44px 이 더해져 새로 밀려나는 구간(아이패드 가로 1024 포함).
     언어 버튼 글자를 접어 보았으나(88→46px) 1024 에서 여전히 6px 모자라, 어느 폭도
     결정적으로 해결되지 않고 모양만 바뀌어 되돌렸다.
     제대로 풀려면 햄버거 전환 기준을 900px → 1100px 로 올려 그 구간에서 내비를 접어야
     한다. 전 페이지 내비가 바뀌는 변경이라 사장님 확인 없이 적용하지 않았다. */
/* 손가락으로 쓰는 기기에서는 폭과 무관하게 44px 를 지킨다.
   아이패드 가로(1024)는 터치인데 .hdr-drop__btn 패딩 때문에 35px 이었다. */
@media (hover:none){
  .cbot-open{ min-width:44px; min-height:44px; }
}

/* ── 세로가 짧은 화면 (가로로 눕힌 폰, 낮게 줄인 창) ────────────────────────
   실측: 667x375 에서 패널은 259px, 그중 로그가 124px 인데 인트로 혼자 149px 이라
   **누를 칩이 한 개도 안 보였다.** 인트로는 '처음 열었을 때 비어 보이지 않게' 채우는
   장식이므로, 높이가 없을 때는 인트로를 접어 그 자리를 칩에게 준다.
   ⚠️ 폭 조건을 빼면 안 된다. 640 이하 바텀시트의 bottom:0 을 덮어써 패널이 화면
      아래에서 떠 버리고, 아래 두 모서리가 각진 채 테두리 없이 뜬다(검증에서 확인). */
@media (min-width:641px) and (max-height:600px){
  .cb{
    top:56px;
    max-height:calc(100vh - 72px);
    max-height:calc(100svh - 72px);
  }
  .cb__head{ padding-top:7px; padding-bottom:7px; }
  .cb__av{ width:32px; height:32px; }
  /* 인트로는 접는다 — 헤더가 이미 같은 아바타와 같은 제목을 보여 주고 있다. */
  .cb-intro{ display:none; }
  .cb__log{ padding:12px 14px 14px; gap:10px; }
  .cb-av{ margin-top:20px; }
}
/* 화면이 낮은 폰(아이폰 SE 568 등)에서는 인트로를 **줄인다**.
   실측: 320x568 에서 인트로가 154px 을 먹어 로그 326px 중 칩이 딱 1개만 보이고
   둘째 칩이 0px 이라 **목록이 더 있다는 신호조차 없었다.** 어르신이 많이 쓰는 기종이다.
   지우지 않고 줄이는 이유: 열었을 때 제품 사진이 먼저 보이는 것이 이 디자인의 첫인상이다. */
@media (max-width:640px) and (max-height:600px){
  .cb-intro{ padding-bottom:6px; }
  .cb-intro__av{ width:38px; height:38px; margin-bottom:6px; }
  .cb-intro__d{ display:none; }
  .cb-intro__rule{ display:none; }
  /* 바닥 여백을 줄여 **다음 항목이 조금 걸쳐 보이게** 한다. 목록이 딱 떨어지게 잘리면
     스크롤 막대가 없는 폰에서는 "이게 전부"로 읽힌다(320x568 에서 6개 중 2개만 보이는데
     잘린 항목이 없어 나머지 4개가 있는 줄 몰랐다). */
  .cb__log{ gap:11px; padding-bottom:6px; }
}
/* 폰을 가로로 눕힌 경우(폭 640 이하 + 아주 낮은 높이)는 인트로를 통째로 접는다 */
@media (max-width:640px) and (max-height:520px){
  .cb-intro{ display:none; }
  .cb__log{ gap:10px; }
}

/* ── 키보드 포커스 ──────────────────────────────────────────────────────────
   전역 :focus-visible 은 브랜드 블루 아웃라인인데, 파란 고객 말풍선 위에서는
   대비가 1.5:1 로 사실상 안 보인다. 패널 안에서는 '밝은 심 + 어두운 테' 두 겹으로
   어느 바탕에서든 보이게 한다. */
.cb :focus-visible{
  outline:2px solid #fff;
  outline-offset:1px;
  box-shadow:0 0 0 4px var(--cb-blue);
  border-radius:8px;
}
.cb .cb-chip:focus-visible,.cb .cb__home:focus-visible{ border-radius:13px; }

/* ── 접근성: 모션 최소화 (transform 을 빼고 opacity 만 남긴다) ── */
@keyframes cbFade{ from{ opacity:0 } to{ opacity:1 } }
@media (prefers-reduced-motion:reduce){
  .cb{ transition:opacity .15s; transform:none; }
  .cb-row,.cb-intro,.cb-quick .cb-chip{ animation:cbFade .2s linear both; }
  .cb-chip,.cb__home,.cb__x,.cb__back,.cbot-open{
    transition:background .16s, border-color .16s, color .16s;
  }
  .cb-chip:hover,.cb-chip:active,.cb__home:active,
  .cb__x:active,.cb__back:active,.cbot-open:active{ transform:none; }
}
@media (prefers-reduced-motion:reduce) and (max-width:640px){ .cb{ transform:none; } }

@media print{ .cb,.cbot-open{ display:none !important; } }