/* XERKONIX TACTILE layout · 화면 틀 8종. tokens.css · components.css · service.css 다음에 로드한다.
   폭 단계 390(compact) · 768(medium) · 1024(expanded) · 1440(large). 여백은 섹션 사이 · 묶음 사이 · 묶음 안 세 값만 쓴다.
   틀: app · list-detail · settings · dashboard · conversation · login · first-use · intro (body[data-frame]).
   이 파일은 배치만 둔다. 서랍·메뉴·대화상자·선택 목록·표·날짜·로그인 카드·스위치·수치 카드의 모양은 components.css 부품을 그대로 쓴다. */
:root{
  --layout-margin:var(--space-4);
  --layout-columns:4;
  --layout-gutter:var(--space-3);
  --layout-max:1200px;
  --layout-read:720px;
  --layout-form:640px;
  --gap-section:var(--space-6);
  --gap-group:var(--space-5);
  --gap-item:var(--space-3);
  --topbar-h:56px;
  --sidebar-w:0px;
  --list-pane-w:360px;
}
@media (min-width:768px){:root{--layout-margin:var(--space-6);--layout-columns:8;--layout-gutter:var(--space-5)}}
@media (min-width:1024px){:root{--layout-columns:12;--gap-section:var(--space-7);--topbar-h:64px;--sidebar-w:264px}}
@media (min-width:1440px){:root{--layout-margin:var(--space-7);--sidebar-w:280px}}

/* ---- 앱 기본 틀: 상단 바 · 사이드바 · 본문 ---- */
.frame{min-height:100dvh;display:grid;grid-template-columns:var(--sidebar-w) minmax(0,1fr);grid-template-rows:minmax(100dvh,1fr);background:var(--canvas)}
.frame-mobile-tools{display:none}
.frame-product{display:inline-flex;align-items:center;min-height:var(--touch-min);min-width:0;border-radius:var(--radius-sm);font-size:var(--fs-lead);font-weight:var(--fw-medium);letter-spacing:-.02em;color:var(--ink);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.frame-back,.frame-menu-btn{display:none}
.frame-avatar{display:inline-flex;align-items:center;justify-content:center;flex:none;width:var(--touch-min);height:var(--touch-min);border-radius:var(--radius-circle);background:var(--control-fill);border:0;box-shadow:var(--secondary-shadow);color:var(--ink);font-size:var(--fs-small);font-weight:var(--fw-medium);cursor:pointer}
.frame-avatar:hover{background:var(--control-hover)}
.frame-avatar:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.frame-new{width:100%}
.frame-sidebar{grid-row:1;position:sticky;top:0;height:100dvh;display:flex;flex-direction:column;overflow:hidden;padding:var(--space-3);min-width:0;background:var(--sidebar-fill);border-right:1px solid var(--line-soft);box-shadow:none}
.frame-sidebar [aria-current=page]>.icon{color:var(--accent)}
.frame-nav-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);padding:var(--space-2) var(--space-4)}
.frame-nav-scroll{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain}
.frame-account{flex:none;padding:var(--space-3) 0 max(var(--space-2),env(safe-area-inset-bottom))}
.frame-account .frame-avatar{background:var(--secondary-fill);border:0}
/* 계정은 사이드바 맨 아래 한 줄: 사람 아이콘 + 이름(말줄임). 서리 면과 그림자, 테두리 없음. */
.frame-account-trigger{display:flex;align-items:center;gap:var(--space-3);width:100%;min-width:0;height:56px;padding:0 var(--space-4);border:0;border-radius:var(--radius-pill);background:var(--glass-light),var(--secondary-fill);box-shadow:var(--secondary-shadow);color:var(--ink);font:inherit;font-size:14px;font-weight:var(--fw-medium);text-align:left;cursor:pointer;transition:background var(--t-2)}
.frame-account-trigger:hover{background:var(--glass-light),var(--secondary-hover);box-shadow:var(--depth-3)}
.frame-account-trigger:focus-visible{outline:2px solid var(--focus-ring);outline-offset:-2px}
.frame-account-trigger>.icon{flex:none;width:20px;height:20px}
.frame-account-name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.frame-main{grid-row:1;min-width:0;padding:var(--space-7) var(--layout-margin) var(--gap-section)}
.frame-menu-btn .icon{width:24px;height:24px}
.frame-main>*{max-width:var(--layout-max);margin-left:auto;margin-right:auto}
.frame-main>*+*{margin-top:var(--gap-section)}
.frame-main>[hidden]+*{margin-top:var(--gap-section)}
/* 서랍이 열린 동안 틀의 body 는 overflow:clip — 앱 틀 여섯(app · list-detail · settings · dashboard · conversation · first-use)과 공개 소개(intro, .frame-site) 모두.
   서랍의 스크롤 잠금(components.css html.drawer-open body{overflow:hidden})은 body 를 스크롤 상자로 만들어, 문서를 내린 채 서랍을 열면
   sticky 상단 바 · 사이드바 · 입력칸 · 소개 헤더가 문서 스크롤만큼 위로 밀려난다. clip 은 스크롤 상자를 만들지 않고, 잠금은 html 의 overflow:hidden 이 맡는다. */
html.drawer-open>:is(.frame,.frame-site){overflow:clip}

/* 페이지 머리: 제목 하나 + 도구 + 주 버튼 자리(오른쪽 끝, 390에서는 화면 아래 고정 띠) */
.frame-head{display:flex;align-items:flex-end;flex-wrap:wrap;justify-content:space-between;gap:var(--gap-item) var(--gap-group);min-height:var(--touch-min)}
.frame-head-title{flex:1 1 240px;min-width:0}
.frame-head h1{margin:0;font-size:var(--fs-h2);font-weight:var(--fw-medium);letter-spacing:var(--ls-heading);line-height:var(--lh-heading);overflow-wrap:anywhere}
.frame-head-meta{margin:var(--space-1) 0 0;font-size:var(--fs-small);color:var(--muted)}
.frame-head-tools{display:flex;align-items:center;gap:var(--gap-item);flex-wrap:wrap;min-width:0}
.frame-primary{display:flex;align-items:center;gap:var(--gap-item);flex:none}

/* 묶음: 안쪽 간격은 --gap-item, 묶음끼리는 --gap-group */
.frame-group{display:flex;flex-direction:column;gap:var(--gap-item);min-width:0}
.frame-stack{display:flex;flex-direction:column;gap:var(--gap-group);min-width:0}
.frame-group-title{margin:0;font-size:var(--fs-h3);font-weight:var(--fw-medium);letter-spacing:-.02em}
.frame-grid{display:grid;gap:var(--gap-group);grid-template-columns:repeat(3,minmax(0,1fr))}
.frame-grid[data-cols="4"]{grid-template-columns:repeat(4,minmax(0,1fr))}
.frame-card{display:flex;flex-direction:column;gap:var(--gap-item);padding:var(--gap-group);min-width:0;color:inherit;text-decoration:none;transition:border-color var(--t-2),background var(--t-2)}
.frame-card:hover{background:var(--surface-raised)}
.frame-card:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.frame-card-title{font-size:var(--fs-body);font-weight:var(--fw-medium);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere}
.frame-card-meta{font-size:var(--fs-small);color:var(--muted)}
.frame-dialog-form{display:flex;flex-direction:column;gap:var(--gap-group)}
.frame-dialog-form h2{margin:0}
.frame-dialog-form .dialog-buttons{margin-top:0}
.frame-dialog-form .field+.field{margin-top:0} /* 묶음 간격(gap)이 이미 띄운다 — components.css 의 대화상자 안 field 사이 여백과 겹치지 않게 */

/* ---- 목록 → 상세 ---- */
.frame-split{display:grid;grid-template-columns:var(--list-pane-w) minmax(0,1fr);gap:var(--gap-group);align-items:start}
.frame-pane{min-width:0}
.frame-pane-list{display:flex;flex-direction:column;overflow:hidden}
.frame-pane-tools{display:flex;align-items:center;gap:var(--space-2);padding:var(--gap-item);border-bottom:1px solid var(--line)}
.frame-pane-tools .input{flex:1 1 auto;min-width:0}
.frame-rows{display:flex;flex-direction:column}
.frame-row[aria-current=true]{background:var(--selected-fill)}
.frame-initial{flex:none;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--radius-circle);background:var(--control-fill);border:0;box-shadow:var(--secondary-shadow);font-size:var(--fs-small);font-weight:var(--fw-medium);color:var(--ink)}
.frame-detail{padding:var(--gap-group);display:flex;flex-direction:column;gap:var(--gap-group)}
.frame-detail-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--gap-item)}
.frame-detail-head .frame-group{align-items:flex-start}
.frame-detail h2{margin:0;font-size:var(--fs-h3);font-weight:var(--fw-medium);letter-spacing:-.02em;overflow-wrap:anywhere}
.frame-detail h2:focus{outline:none}
.frame-facts{display:grid;grid-template-columns:120px minmax(0,1fr);gap:var(--gap-item) var(--gap-group);margin:0;font-size:var(--fs-small)}
.frame-facts dt{color:var(--muted)}
.frame-facts dd{margin:0;min-width:0;overflow-wrap:anywhere}
.frame-field-narrow{max-width:360px}
.frame-thread{display:flex;flex-direction:column;gap:var(--gap-item)}
.frame-note{margin:0;padding:var(--gap-item) var(--space-4);border:0;border-radius:var(--radius-input);font-size:var(--fs-small);overflow-wrap:anywhere}
.frame-note-meta{display:block;margin-bottom:var(--space-1);font-size:var(--fs-caption);color:var(--muted)}

/* ---- 설정: DS 설정 창 부품(.dialog.is-wide · .dialog-split)을 그대로 쓴다. 틀은 폼 폭과 좁은 폭의 목록/항목 전환만 ---- */
.frame-settings .dialog-main>.frame-settings-pane{margin-top:0} /* 한 번에 한 항목만 보인다 — 숨은 앞 항목 뒤 간격을 두지 않는다 */
.frame-settings .dialog-main .field{max-width:var(--layout-form)}
.frame-settings .dialog-main .frame-grid{gap:var(--gap-item)}
.frame-settings .dialog-top>h2:focus{outline:none} /* 열 때 제목이 포커스를 받는다(읽기 시작점) — 링은 키보드 이동 때만 */
@media (max-width:719px){ /* 설정 창 부품의 전체 화면 경계와 같은 값 */
  .frame-settings[data-view=list] .dialog-main,.frame-settings[data-view=detail] .dialog-nav{display:none}
  .frame-settings[data-view=list] .dialog-nav-item[aria-current]{background:transparent;font-weight:inherit} /* 시트 첫 화면 목록에는 고른 항목이 없다 */
}

/* ---- 대시보드: 기간 세그먼트 · 큰 숫자 카드 · 그래프 · 표 ---- */
.frame-chart{padding:var(--gap-group);display:flex;flex-direction:column;gap:var(--gap-group);min-width:0}
.frame-chart-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--gap-item)}
.frame-chart-plot{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:240px auto;gap:var(--space-2) var(--space-3)}
.frame-chart-plot[hidden]{display:none}
.frame-chart-plot svg{display:block;width:100%;height:100%;overflow:visible}
.frame-chart-y{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-end;font-size:var(--fs-caption);color:var(--muted);font-variant-numeric:tabular-nums;line-height:1;transform:translateY(-.5em)}
.frame-chart-y span:last-child{transform:translateY(.5em)}
.frame-chart-x{grid-column:2;display:flex;justify-content:space-between;font-size:var(--fs-caption);color:var(--muted);font-variant-numeric:tabular-nums}
.frame-chart .grid{stroke:var(--line-soft);stroke-width:1;vector-effect:non-scaling-stroke}
.frame-chart .axis{stroke:var(--line-strong);stroke-width:1;vector-effect:non-scaling-stroke}
.frame-chart .area{fill:var(--selected-fill);stroke:none}
.frame-chart .line{fill:none;stroke:var(--ink);stroke-width:2;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.frame-chart .line-accent{fill:none;stroke:var(--accent);stroke-width:2;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.frame-legend{display:flex;gap:var(--gap-group);font-size:var(--fs-small);color:var(--muted)}
.frame-legend span{display:inline-flex;align-items:center;gap:var(--space-2)}
.frame-legend i{display:inline-block;width:16px;height:2px;background:var(--ink)}
.frame-legend i.is-accent{background:var(--accent)}
.frame-grid .metric{min-width:0}
.frame-grid .metric:first-child .metric-value{color:var(--product-accent-ink)}
.metric-delta b{font-weight:var(--fw-medium);color:var(--ink)}

/* 첫 화면 비주얼 자리: 제품 화면 축소(실제 적용 때 제품 화면 캡처로 바꾼다) */
.frame-shot{display:flex;flex-direction:column;width:100%;height:100%;border:0;border-radius:var(--radius-card);background:var(--surface-raised);box-shadow:var(--depth-2);overflow:hidden}
.frame-shot-bar{display:flex;align-items:center;gap:var(--space-3);height:var(--space-7);padding:0 var(--space-5);border-bottom:1px solid var(--line)}
.frame-shot-bar b{width:var(--space-8);height:var(--space-3);border-radius:var(--radius-pill);background:var(--ink)}
.frame-shot-bar span{margin-left:auto;width:var(--space-6);height:var(--space-6);border-radius:var(--radius-circle);background:var(--control-fill);border:0}
.frame-shot-body{flex:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,3fr);min-height:0}
.frame-shot-nav{display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-5);border-right:1px solid var(--line-soft)}
.frame-shot-nav i{display:block;height:var(--space-6);border-radius:var(--radius-pill);background:var(--line)}
.frame-shot-nav i.is-current{background:var(--line-strong)}
.frame-shot-main{display:flex;flex-direction:column;gap:var(--space-5);padding:var(--space-5);min-width:0}
.frame-shot-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4)}
.frame-shot-card{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-4);border:0;border-radius:var(--radius-md);background:var(--glass-light),var(--panel-fill);-webkit-backdrop-filter:blur(var(--panel-blur)) saturate(var(--glass-saturate));backdrop-filter:blur(var(--panel-blur)) saturate(var(--glass-saturate));box-shadow:var(--panel-shadow);min-width:0}
.frame-shot-rows{display:flex;flex-direction:column;gap:var(--space-3)}
.frame-shot-rows i{display:block;height:var(--space-5);border-radius:var(--radius-sm);background:var(--line)}
.frame-shot-rows i:nth-child(2n){width:72%}

/* ---- 대화 화면 ---- */
.frame[data-frame=conversation] .frame-main{display:flex;flex-direction:column;padding-bottom:0}
.frame[data-frame=conversation] .frame-main>*{width:100%;max-width:var(--layout-read)}
.frame[data-frame=conversation] .frame-head h1{font-size:var(--fs-h3)}
.frame-convo{flex:1;display:flex;flex-direction:column;gap:var(--gap-group);padding-bottom:var(--gap-group)}
.frame-msg{display:flex;flex-direction:column;gap:var(--space-2);max-width:100%}
.frame-msg-user{align-self:flex-end;max-width:min(80%,520px);margin:0;padding:var(--space-3) var(--space-4);border-radius:var(--radius-card);background:var(--control-fill);font-size:var(--fs-body);overflow-wrap:anywhere}
.frame-msg-answer{font-size:var(--fs-body);line-height:var(--lh-body);overflow-wrap:anywhere}
.frame-msg-answer p{margin:0}
.frame-msg-answer ol{margin:var(--gap-item) 0 0;padding-left:var(--space-5);list-style:decimal}
.frame-msg-tools{display:flex;gap:var(--space-1);margin-top:var(--space-4)} /* 글 → 버튼 24(묶음 안 8 + 16) */
.frame-composer{position:sticky;bottom:0;margin-top:0;padding:var(--space-2) 0 var(--gap-group);background:none;isolation:isolate}
/* 입력칸 뒤로 지나가는 대화는 가린다 — 본문과 같은 고정 빛 바탕을 칠하고 위쪽 24px 만 부드럽게 사라지게 한다. */
.frame-composer::before{content:"";position:absolute;inset:calc(var(--space-5) * -1) 0 0;z-index:-1;background:var(--canvas);-webkit-mask-image:linear-gradient(to bottom,transparent,#000 var(--space-5));mask-image:linear-gradient(to bottom,transparent,#000 var(--space-5));pointer-events:none}

/* ---- 로그인: components.css 의 .login-page · .login-card 그대로. 여기서는 본문 랜드마크만 ---- */
.frame-login{display:flex;justify-content:center;width:100%}

/* ---- 첫 사용 빈 화면 ---- */
.frame-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--gap-item);padding:var(--gap-section) var(--gap-group);max-width:var(--layout-read);margin:var(--gap-section) auto 0}
.frame-empty h2{margin:var(--gap-item) 0 0;font-size:var(--fs-h2);font-weight:var(--fw-medium);letter-spacing:var(--ls-heading)}
.frame-empty p{margin:0;color:var(--muted);max-width:40ch}
.frame-empty .btn-row{justify-content:center;margin-top:var(--gap-item)}
.frame-empty-art{width:120px;height:120px;fill:none;stroke:var(--n-400);stroke-width:1.5;stroke-linejoin:round}

/* ---- 공개 소개 페이지 ---- */
.frame-site{background:var(--canvas)}
.frame-site-header{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:var(--gap-group);height:var(--topbar-h);padding:0 max(var(--layout-margin),calc((100% - var(--layout-max)) / 2));background:var(--header-fill,var(--canvas));border-bottom:0;-webkit-backdrop-filter:blur(var(--glass-blur,20px));backdrop-filter:blur(var(--glass-blur,20px))}
.frame-site-menu{display:flex;gap:var(--space-1);margin-left:auto}
.frame-site-menu a{display:inline-flex;align-items:center;min-height:var(--touch-min);padding:0 var(--space-4);color:var(--ink);text-decoration:none;font-size:var(--fs-small);border-radius:var(--radius-pill)}
.frame-site-menu a:hover{background:var(--control-hover)}
.frame-site-menu a:focus-visible{outline:2px solid var(--focus-ring);outline-offset:-2px}
.frame-site-main>section{padding:var(--gap-section) var(--layout-margin)}
.frame-site-main>section>*{max-width:var(--layout-max);margin-left:auto;margin-right:auto}
.frame-site-main>.frame-hero{padding-top:var(--space-9);padding-bottom:var(--space-8)}
.frame-hero-inner{display:flex;flex-direction:column;align-items:flex-start;gap:var(--gap-group)}
.frame-hero h1{margin:0;font-size:var(--fs-display);font-weight:var(--fw-regular);letter-spacing:var(--ls-display);line-height:var(--lh-tight);max-width:14ch}
.frame-hero p{margin:0;font-size:var(--fs-lead);color:var(--muted);max-width:40ch}
.frame-visual{aspect-ratio:16/8;border-radius:var(--radius-panel);background:radial-gradient(120% 90% at 20% 10%,var(--backdrop-tint-aqua,var(--selected-fill)),transparent 60%),var(--surface);border:0;padding:var(--space-7) var(--space-7) 0;overflow:hidden}
.frame-visual .frame-shot{border-bottom:0;border-radius:var(--radius-card) var(--radius-card) 0 0}
.frame-section-title{margin:0 0 var(--gap-group);font-size:var(--fs-h2);font-weight:var(--fw-medium);letter-spacing:var(--ls-heading)}
.frame-feature{display:flex;flex-direction:column;gap:var(--gap-item);padding:var(--gap-group) 0;border-top:1px solid var(--line)}
.frame-feature h3{margin:0;font-size:var(--fs-h3);font-weight:var(--fw-medium)}
.frame-feature p{margin:0;color:var(--muted);font-size:var(--fs-small)}
.frame-band{display:flex;align-items:center;justify-content:space-between;gap:var(--gap-group);padding:var(--gap-section);background:var(--surface-raised);border:0;border-radius:var(--radius-panel);box-shadow:var(--panel-shadow)} /* 바탕 위 독립 띠 카드 — 바깥 경계 3:1(2026-10-22) */
.frame-band h2{margin:0;font-size:var(--fs-h2);font-weight:var(--fw-medium);letter-spacing:var(--ls-heading)}
.frame-site-footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--gap-group);padding:var(--gap-section) max(var(--layout-margin),calc((100% - var(--layout-max)) / 2));border-top:1px solid var(--line);font-size:var(--fs-small);color:var(--muted)}
.frame-site-footer nav{display:flex;gap:var(--gap-group)}
.frame-site-footer a{color:inherit;display:inline-flex;align-items:center;min-height:var(--touch-min)}

/* ---- 1024 미만: 사이드바 → 서랍, 목록·상세 한 장씩 ---- */
@media (width < 1024px){
  .frame{grid-template-columns:minmax(0,1fr)}
  .frame-sidebar{display:none}
  .frame-main{grid-column:1;padding-top:80px}
  .frame-mobile-tools{position:fixed;top:0;left:0;right:0;height:64px;padding:10px 12px;align-items:center;z-index:20;display:flex;gap:var(--space-2);background:var(--header-fill);-webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur))}
  .frame-sidebar~.frame-main{border-left:0}
  .frame-menu-btn{display:inline-flex}
  .frame-grid[data-cols="4"]{grid-template-columns:repeat(2,minmax(0,1fr))}
  .frame-split{grid-template-columns:minmax(0,1fr)}
  .frame[data-view=list] .frame-pane-detail,.frame[data-view=detail] .frame-pane-list{display:none}
  .frame[data-view=list] .frame-row[aria-current=true]{background:transparent} /* 상세가 안 보이는 한 장 목록에는 고른 행 표시가 없다 */
  .frame[data-view=list] .frame-row[aria-current=true] .list-row-title{text-decoration:none}
  .frame[data-view=detail] .frame-menu-btn{display:none}
  .frame[data-view=detail] .frame-back{display:inline-flex;margin-left:calc(var(--space-2) * -1)}
  .frame[data-view=detail] .frame-head{display:none}
  .frame[data-view=detail] .frame-split{margin-top:0}
  .frame-site-menu{display:none}
  .frame-site-login{margin-left:auto}
}
/* ---- 768 미만(390): 설정은 전체 시트, 주 버튼은 화면 아래 고정 띠, 버튼 줄은 세로, 카드 한 줄 ---- */
@media (width < 768px){
  .frame-head{align-items:flex-start}
  .frame-head .frame-primary{position:fixed;left:0;right:0;bottom:0;z-index:15;padding:var(--gap-item) var(--layout-margin) calc(var(--gap-item) + env(safe-area-inset-bottom));background:var(--header-fill,var(--canvas));-webkit-backdrop-filter:blur(var(--glass-blur,20px));backdrop-filter:blur(var(--glass-blur,20px));border-top:1px solid var(--line)}
  .frame-head .frame-primary .btn{flex:1}
  .frame:has(.frame-head .frame-primary) .frame-main{padding-bottom:calc(var(--gap-section) + 72px)}
  .frame[data-view=detail] .frame-head .frame-primary{display:none}
  .frame-head-tools{order:3;width:100%}
  /* 페이지·빈 화면·소개·대화상자의 동작 줄은 세로 전폭. 대화 안(답 카드·선택지)의 버튼 줄은 가로 그대로 두고 넘치면 줄바꿈(M3 카드 동작) — 한 답에 짧은 버튼 두셋이 화면 폭 알약으로 쌓이지 않게.
     대화 안에 포털 없이 그린 대화상자(dialog)의 버튼 줄은 대화상자 동작 줄이라 세로 그대로 */
  :is([data-frame] .btn-row:not(.frame-convo .btn-row),[data-frame] dialog .btn-row){flex-direction:column;align-items:stretch;align-self:stretch}
  :is([data-frame] .btn-row:not(.frame-convo .btn-row),[data-frame] dialog .btn-row)>.btn{width:100%}
  .frame-grid,.frame-grid[data-cols="4"]{grid-template-columns:minmax(0,1fr)}
  .frame-grid[data-compact="2"]{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap-item)}
  .frame-grid[data-compact="2"] .metric{padding:var(--space-4)}
  .frame-grid[data-compact="2"] .metric-value{font-size:var(--fs-num-md)}
  .frame-grid[data-compact="2"] .metric-delta{font-size:var(--fs-caption)}
  .frame-band{flex-direction:column;align-items:stretch;padding:var(--gap-group)}
  .frame-facts{grid-template-columns:minmax(0,1fr);gap:var(--space-1)}
  .frame-facts dd+dt{margin-top:var(--gap-item)}
  .frame-field-narrow{max-width:none}
  .frame-chart{padding:var(--space-4)}
  .frame-chart-plot{grid-template-rows:180px auto}
  .frame-site-main>.frame-hero{padding-top:var(--space-7);padding-bottom:var(--space-7)}
  .frame-hero h1{font-size:var(--fs-h1)}
  .frame-visual{aspect-ratio:4/5;padding:var(--space-5) var(--space-5) 0}
  .frame-shot-body{grid-template-columns:minmax(0,1fr)}
  .frame-shot-nav{display:none}
  .frame-shot-cards{grid-template-columns:minmax(0,1fr)}
  .frame-site-footer{flex-direction:column;align-items:flex-start}
}
/* 카드 면과 같이 좁은 화면 흐림 16px(2026-10-21) */
@media(max-width:700px){.frame-shot-card{-webkit-backdrop-filter:blur(var(--panel-blur-mobile)) saturate(var(--glass-saturate));backdrop-filter:blur(var(--panel-blur-mobile)) saturate(var(--glass-saturate))}}

@media(prefers-reduced-transparency:reduce){.frame,.frame-composer::before{background:var(--canvas)}.frame-sidebar{background:var(--glass-fallback);-webkit-backdrop-filter:none;backdrop-filter:none}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.frame-sidebar{background:var(--glass-fallback)}}