/* 앱 패턴(2.0): 실제 서비스에서 다듬어 옮긴 조합 부품. 문서는 docs/16_app_patterns.md, 동작은 js/patterns.js.
규칙: tokens.css 의 변수만 쓴다. 다크는 역할 토큰으로 따라온다. 움직임은 --d-* --ease-* 이고 prefers-reduced-motion 이면 끝난 모습.
큰 화면에 :has() 를 쓰지 않는다. 360px 에서 가로로 넘치지 않고 누르는 곳은 44px.
목록
1 .kline 아이콘 + 굵은 제목 + 회색 설명 한 줄
2 .actionbar--float 화면 아래에 붙는 동작 막대(폰은 폭 전체, 640 부터 떠 있는 카드) + 키보드가 올라오면 줄이기
3 .cmdk .cmdk-trigger 명령 팔레트(⌘K)와 그 여는 버튼
4 .paper-sheet .paper-stack .paper-strip .page-viewer 종이 쪽 미리보기·겹친 더미·나란히·넘겨 보기 창
5 .compare-swap .compare-rail 비교표를 좁은 화면에서 열마다 카드 띠로(분절 탭과 함께)
6 .cost-bars 금액 둘을 한 축 막대로 견주기
7 .review-cards .review-card 고객 후기 카드(좁으면 넘기는 띠, 1024 부터 격자)
8 .logos__img 로고 띠에 이미지 로고(회색조, 올리면 제 색)
9 .checklist-card 시작 체크리스트(진행 칸 · 단계마다 버튼 하나 · 닫기와 되돌리기)
10 .person-list .person-row 사람 목록(칸 폭이 좁으면 이름 아래 이름표 줄, 넓으면 표 칸)
11 .nav__cta--keep 좁은 화면에서도 머리 주버튼을 짧은 글자로 남기기 */
/* ══ 1. 아이콘 + 제목 + 설명 한 줄(.kline) ══════════════════════════
아이콘은 제목 첫 줄 높이(--kline-lh)의 칸 가운데, 제목과 설명은 기준선으로 한 줄(좁으면 설명만 다음 줄).
상자 높이는 min-height 가 아니라 안쪽 여백으로 정한다(한 줄일 때 글자가 상자 가운데에 온다).
.drop(끌어다 놓기 칸)과 함께 쓰면 세로로 쌓이던 칸이 가로 한 줄로 눕는다. */
.kline{--kline-lh:var(--t-body-sm-lh);display:flex;flex-direction:row;align-items:flex-start;justify-content:flex-start;gap:var(--s-8);margin:0;
font-size:var(--t-body-sm);line-height:var(--kline-lh);color:var(--ink-muted);text-align:left}
.kline > :is(.ico,svg,.kline__icon){flex:none;display:grid;place-items:center;height:var(--kline-lh);margin:0;color:var(--ink-subtle)}
.kline__text{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s-2) var(--s-8);min-width:0;margin:0;word-break:keep-all;overflow-wrap:anywhere}
.kline__text > :is(strong,b,.kline__title){line-height:var(--kline-lh);font-weight:600;color:var(--ink)}
.kline--md{--kline-lh:var(--t-body-md-lh);font-size:var(--t-body-md)}
.kline--box{padding:var(--s-12) var(--s-16);border-radius:var(--r-lg);background:var(--canvas-alt)}
.on-alt .kline--box{background:var(--surface)}
.drop.kline{padding:var(--s-16) var(--s-20)}
.kline--accent > :is(.ico,svg,.kline__icon){color:var(--accent-text)}
.kline--good > :is(.ico,svg,.kline__icon){color:var(--good-text)}
.kline--warn > :is(.ico,svg,.kline__icon){color:var(--warn-text)}
.kline--bad > :is(.ico,svg,.kline__icon){color:var(--bad-text)}
.kline-list{display:grid;gap:var(--s-8);margin:0;padding:0;list-style:none}
/* ══ 2. 떠 있는 동작 막대(.actionbar.actionbar--float) ══════════════
긴 폼·검토 화면의 결론(저장·보내기). 코어 .actionbar(앱 껍데기 맨 아래 띠)를 본문 흐름 안에서 쓰는 변형이다.
폰(639 까지): 화면 폭 전체(본문 여백 --actionbar-bleed 만큼 바깥으로) · 위 가는 선 · 아래 안전 영역만큼 안쪽 여백 · 글자 위, 버튼 아래.
640 부터: 네 모서리가 둥근 떠 있는 카드(얇은 테두리와 그림자, 아래 16 띄움) · 글자 왼쪽, 버튼 오른쪽.
폼 끝에 두면 그 폼이 보이는 동안만 화면 아래에 붙는다(position:sticky). 하단 탭이 있으면 --tabbar-h 만큼 위에 선다.
화면 키보드가 올라오면(html[data-keyboard-open], patterns.js) [data-kbd-hide] 를 숨기고 막대를 얇게 한다. */
.actionbar--float{bottom:var(--tabbar-h);flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:var(--s-8);
margin:var(--s-16) calc(var(--actionbar-bleed, var(--s-16)) * -1) 0;padding:var(--s-12) var(--s-16) calc(var(--s-12) + var(--safe-b))}
.actionbar--float > *{flex:none}
.actionbar__text{display:grid;gap:var(--s-2);min-width:0;text-align:center}
.actionbar__title{margin:0;font-size:var(--t-body-sm);line-height:var(--t-body-sm-lh);font-weight:600;color:var(--ink);word-break:keep-all;font-variant-numeric:tabular-nums}
.actionbar__sub{margin:0;font-size:var(--t-caption);line-height:var(--t-caption-lh);color:var(--ink-muted);word-break:keep-all}
.actionbar__acts{display:flex;flex-direction:column-reverse;align-items:stretch;gap:var(--s-8)}
.actionbar__acts > .btn{width:100%}
@media (min-width:640px){
.actionbar--float{bottom:calc(var(--tabbar-h) + var(--safe-b) + var(--s-16));flex-direction:row;align-items:center;gap:var(--s-16);margin-inline:0;
padding:var(--s-12) var(--s-12) var(--s-12) var(--s-24);border-radius:var(--r-xl)}
.actionbar--float::before{border-radius:inherit;background:color-mix(in srgb,var(--surface) 94%,transparent);
backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:var(--sh-lg),0 0 0 1px var(--line)}
.actionbar--float .actionbar__text{flex:1 1 auto;text-align:left}
.actionbar__acts{flex-direction:row;align-items:center;flex:none}
.actionbar__acts > .btn{width:auto}
.actionbar__acts > .btn--primary{min-width:calc(var(--s-160) + var(--s-8))}
}
@media (prefers-reduced-motion:no-preference){.actionbar--float[data-rise]{animation:rise var(--d-3) var(--ease-out) both}}
html[data-keyboard-open] [data-kbd-hide]{display:none}
@media (max-width:639px){html[data-keyboard-open] .actionbar--float{gap:var(--s-4);padding-block:var(--s-6)}}
/* ══ 3. 명령 팔레트(.cmdk) ══════════════════════════════════════
코어 오버레이(.overlay + data-open) 위에 화면 위쪽 1/6 에 뜨는 판(최대 640). 찾기 칸 · 묶음 목록 · 아래 단축키 안내.
초점은 늘 찾기 칸에 있고 ↑↓(또는 Tab)로 줄을 고른다(aria-activedescendant). 폰은 키보드가 올라와도 결과가 보이게 판을 맨 위에 붙인다. */
.cmdk.overlay{display:flex;align-items:flex-start;justify-content:center;padding:max(var(--s-48),12dvh) var(--s-16) var(--s-24)}
.cmdk .cmdk__panel{display:flex;flex-direction:column;width:min(640px,100%);max-height:min(560px,76dvh);margin:0;padding:0;overflow:hidden;
border-radius:var(--r-xl);background:var(--surface);box-shadow:var(--sh-xl),0 0 0 1px var(--line)}
.cmdk__search{display:flex;align-items:center;gap:var(--s-10);min-height:var(--s-56);padding:0 var(--s-16);box-shadow:inset 0 -1px 0 var(--line);color:var(--ink-subtle)}
.cmdk__input{flex:1;min-width:0;height:var(--s-56);border:0;background:none;color:var(--ink);font:inherit;font-size:var(--t-body-md);outline:none}
.cmdk__input::placeholder{color:var(--ink-subtle)}
.cmdk__input::-webkit-search-cancel-button{display:none}
.cmdk__esc{flex:none}
.cmdk__list{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:var(--s-8)}
.cmdk__list:focus-visible{outline-offset:calc(var(--s-4) * -1)}
.cmdk__group{display:flex;flex-direction:column;gap:1px}
.cmdk__group + .cmdk__group:not(:empty){margin-top:var(--s-8)}
.cmdk__label{margin:0;padding:var(--s-8) var(--s-10) var(--s-4);font-size:var(--t-nano);line-height:var(--t-nano-lh);font-weight:700;color:var(--ink-subtle)}
.cmdk__item{display:flex;align-items:center;gap:var(--s-12);width:100%;min-height:var(--s-48);padding:var(--s-6) var(--s-10);border:0;border-radius:var(--r-md);
background:none;color:var(--ink);font:inherit;text-align:left;text-decoration:none;cursor:pointer}
.cmdk__item[aria-selected="true"]{background:var(--tint)}
.cmdk__ico{flex:none;display:grid;place-items:center;width:var(--s-32);height:var(--s-32);border-radius:var(--r-md);background:var(--canvas-alt);color:var(--ink-muted)}
.cmdk__ico--accent{background:var(--accent-soft);color:var(--accent-text)}
.cmdk__main{display:flex;flex-direction:column;gap:1px;flex:1;min-width:0}
.cmdk__title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--t-body-sm);line-height:var(--t-body-sm-lh);font-weight:600}
.cmdk__sub,.cmdk__snip{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--t-caption);line-height:var(--t-caption-lh);color:var(--ink-muted)}
.cmdk__snip{color:var(--ink-body)}
.cmdk__hit{padding:0 1px;border-radius:var(--r-xs);background:var(--accent-soft);color:var(--accent-text)}
.cmdk__go{flex:none;color:var(--ink-subtle);opacity:0;transform:translateX(calc(var(--s-4) * -1));transition:opacity var(--d-1) var(--ease-out),transform var(--d-1) var(--ease-out)}
.cmdk__item[aria-selected="true"] .cmdk__go{opacity:1;transform:none}
.cmdk__kbd{flex:none}
.cmdk__none,.cmdk__empty{margin:0;padding:var(--s-8) var(--s-10) var(--s-12);font-size:var(--t-body-sm);line-height:var(--t-body-sm-lh);color:var(--ink-muted)}
.cmdk__skel{display:flex;flex-direction:column;gap:var(--s-10);padding:var(--s-8) var(--s-10) var(--s-12)}
.cmdk__skel .skel:nth-child(2){width:62%}
.cmdk__foot{display:flex;align-items:center;gap:var(--s-16);padding:var(--s-10) var(--s-16);box-shadow:inset 0 1px 0 var(--line);background:var(--canvas-alt);
font-size:var(--t-caption);line-height:var(--t-caption-lh);color:var(--ink-muted)}
.cmdk__foot > span{display:inline-flex;align-items:center;gap:var(--s-4)}
.cmdk__foot-end{margin-left:auto}
@media (max-width:767px){
.cmdk.overlay{padding:var(--s-12)}
.cmdk .cmdk__panel{max-height:min(560px,calc(100dvh - var(--s-24)))}
}
@media (max-width:640px){.cmdk__foot{display:none}}
/* 판은 폰에서도 위에서 톡 뜬다(코어 .modal 은 640 아래에서 아래 시트처럼 올라온다) */
.overlay.cmdk[data-state="open"] .cmdk__panel{animation:pop var(--d-3) var(--ease-out) both}
.overlay.cmdk[data-state="closing"] .cmdk__panel{animation:pop-out var(--d-1) var(--ease-in) both}
/* 여는 버튼: 찾기 칸 모양(768 부터). 좁은 화면은 찾기 아이콘 버튼 하나로 바꿔 둔다 */
.cmdk-trigger{display:inline-flex;align-items:center;gap:var(--s-8);flex:1;min-width:0;max-width:30rem;height:var(--c-md-h);padding:0 var(--s-8) 0 var(--s-12);
border:0;border-radius:var(--r-md);background:var(--canvas-alt);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink-subtle);font:inherit;
font-size:var(--t-body-sm);text-align:left;cursor:pointer;transition:background-color var(--d-1) var(--ease-inout),box-shadow var(--d-1) var(--ease-inout)}
@media (hover:hover){.cmdk-trigger:hover{background:var(--surface);box-shadow:inset 0 0 0 1px var(--line-strong)}}
.cmdk-trigger__text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmdk-trigger__keys .kbd{background:var(--surface)}
@media (hover:none){.cmdk-trigger__keys{display:none}}
@media (prefers-reduced-motion:reduce){.cmdk__go{transition:none}}
/* ══ 4. 종이 쪽 미리보기 ════════════════════════════════════════
실제 문서(PDF 쪽을 그린 그림)를 보여 줄 때. 종이는 테마와 상관없이 흰 종이(--logo-plate)이고 안에는 문서를 그린 그림(![]()
)을 둔다.
.paper-sheet 한 쪽 · .paper-stack 겹친 두 쪽(누르면 넘겨 보기) · .paper-strip 쪽 나란히 · .page-viewer 넘겨 보기 창. */
.paper-sheet{position:relative;display:block;width:100%;aspect-ratio:210 / 297;overflow:hidden;border-radius:var(--r-xs);background:var(--logo-plate);
box-shadow:0 0 0 1px var(--line),var(--sh-md)}
.paper-sheet > img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.paper-sheet--auto{aspect-ratio:auto}
.paper-sheet--auto > img{height:auto}
.paper-sheet__tag{display:inline-flex;align-items:center;min-height:var(--s-20);padding-inline:var(--s-8);border-radius:var(--r-xs);background:var(--surface-invert);
font-size:var(--t-nano);line-height:var(--t-nano-lh);font-weight:700;color:var(--ink-invert);white-space:nowrap}
/* 겹친 두 쪽: 앞 쪽이 살짝 기울고 뒤 쪽이 오른쪽 뒤로. 올리면 조금 더 벌어진다 */
.paper-stack{position:relative;display:block;width:min(72%,calc(var(--s-240) + var(--s-80)));aspect-ratio:210 / 297;margin:var(--s-8) auto var(--s-40);translate:-8% 0;
padding:0;border:0;background:none;color:inherit;text-align:left;cursor:default}
button.paper-stack{cursor:zoom-in}
button.paper-stack:focus-visible{outline-offset:var(--s-8);border-radius:var(--r-sm)}
.paper-stack__sheet{position:absolute;inset:0;transition:rotate var(--d-3) var(--ease-out),translate var(--d-3) var(--ease-out)}
.paper-stack__sheet--front{z-index:1;rotate:-2deg}
.paper-stack__sheet--back{rotate:5deg;translate:20% 4%}
@media (hover:hover){
button.paper-stack:hover .paper-stack__sheet--front{rotate:-3deg;translate:-2% -1%}
button.paper-stack:hover .paper-stack__sheet--back{rotate:7deg;translate:24% 3%}
}
.paper-stack__tag,.paper-stack__zoom{position:absolute;z-index:1;bottom:calc(var(--s-12) * -1);display:inline-flex;align-items:center;gap:var(--s-6);min-height:var(--s-32);
padding-inline:var(--s-12);border-radius:var(--r-full);font-size:var(--t-caption);line-height:var(--t-caption-lh);font-weight:600;white-space:nowrap}
.paper-stack__tag{left:calc(var(--s-12) * -1);background:var(--surface-invert);color:var(--ink-invert)}
.paper-stack__zoom{right:calc(var(--s-12) * -1);background:var(--surface);box-shadow:0 0 0 1px var(--line),var(--sh-sm);color:var(--ink-body)}
/* 쪽 나란히: 좁은 화면은 옆으로 넘기는 줄, 768 부터 네 칸 격자 */
.paper-strip{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(calc(var(--s-120) + var(--s-24)),42%);gap:var(--s-16);margin:0 calc(var(--s-20) * -1);
padding:var(--s-4) var(--s-20) var(--s-12);list-style:none;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--s-20);scrollbar-width:none}
.paper-strip::-webkit-scrollbar{display:none}
@media (min-width:768px){.paper-strip{grid-auto-flow:row;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-24);margin:0;padding:0 0 var(--s-4);overflow:visible}}
.paper-strip__item{min-width:0;scroll-snap-align:start}
.paper-strip__hit{display:flex;flex-direction:column;gap:var(--s-8);width:100%;min-width:0;padding:0;border:0;border-radius:var(--r-sm);background:none;color:inherit;font:inherit;text-align:left}
button.paper-strip__hit{cursor:zoom-in}
.paper-strip__hit:focus-visible{outline-offset:var(--s-4)}
.paper-strip__hit .paper-sheet{transition:translate var(--d-2) var(--ease-out),box-shadow var(--d-2) var(--ease-inout)}
@media (hover:hover){button.paper-strip__hit:hover .paper-sheet{translate:0 calc(var(--s-4) * -1);box-shadow:0 0 0 1px var(--accent-line),var(--sh-lg)}}
.paper-strip__label{display:inline-flex;align-items:center;gap:var(--s-6);font-size:var(--t-caption);line-height:var(--t-caption-lh);font-weight:600;color:var(--ink-body)}
.paper-strip__label .ico{color:var(--ink-subtle)}
/* 넘겨 보기 창: 넓은 화면은 가운데 큰 창, 좁은 화면은 아래 시트(코어 .modal). 쪽은 한 장씩 가운데에 서고 양옆에 이웃 쪽이 조금 보인다.
넘기는 법: 양옆 ‹ › · 아래 줄 ‹ 1 / 4 › · 좌우 화살표 키 · Home/End · 끌어 넘기기(scroll-snap). 동작은 [data-page-viewer](patterns.js) */
.modal.page-viewer{--pw:80cqi;padding:var(--s-24) 0 calc(var(--s-16) + var(--safe-b))}
@media (min-width:768px){.modal.page-viewer{width:min(1120px,calc(100vw - var(--s-48)));padding-bottom:var(--s-16)}}
.page-viewer__head{display:flex;flex-direction:column;gap:var(--s-4);padding:0 calc(var(--s-48) + var(--s-16)) var(--s-16) var(--s-24)}
.page-viewer__title{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-8);margin:0;font-size:var(--t-heading-sm);line-height:var(--t-heading-sm-lh);
letter-spacing:var(--t-heading-sm-ls);font-weight:700;color:var(--ink)}
.page-viewer__desc{margin:0;max-width:72ch;font-size:var(--t-body-xs);line-height:var(--t-body-xs-lh);color:var(--ink-muted);word-break:keep-all}
.page-viewer__stage{position:relative;container-type:inline-size;background:var(--canvas-alt)}
.page-viewer__pages{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:var(--pw);gap:var(--s-20);margin:0;padding:var(--s-8) calc((100cqi - var(--pw)) / 2) var(--s-16);
list-style:none;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none}
.page-viewer__pages::-webkit-scrollbar{display:none}
.page-viewer__pages:focus-visible{outline-offset:calc(var(--s-4) * -1)}
.page-viewer__page{display:flex;flex-direction:column;gap:var(--s-8);min-width:0;padding-top:var(--s-16);scroll-snap-align:center;opacity:.55;transition:opacity var(--d-2) var(--ease-inout)}
.page-viewer__page[aria-current],html:not(.js) .page-viewer__page{opacity:1}
.page-viewer__label{font-size:var(--t-caption);line-height:var(--t-caption-lh);font-weight:600;color:var(--ink-muted)}
.page-viewer__nav{display:none}
.page-viewer__foot{display:flex;align-items:center;justify-content:center;gap:var(--s-8);padding:var(--s-12) var(--s-24) 0}
.page-viewer__pos{display:flex;flex-direction:column;align-items:center;min-width:calc(var(--s-120) + var(--s-40));margin:0;font-size:var(--t-caption);line-height:var(--t-caption-lh);
color:var(--ink-muted);text-align:center}
.page-viewer__pos b{font-weight:700;color:var(--ink)}
.page-viewer__now{font-weight:600;color:var(--ink-body);white-space:nowrap}
.page-viewer__step:disabled{opacity:.35;pointer-events:none}
@media (min-width:768px){
/* 창 머리·쪽 이름·아래 줄·창 여백을 뺀 높이에 한 쪽이 다 들어오게(쪽 높이에 폭을 맞춘다) */
.modal.page-viewer{--ph:min(calc(100dvh - var(--s-240) - var(--s-96)),calc(var(--s-240) * 4));--pw:calc(var(--ph) * 210 / 297)}
.page-viewer__page .paper-sheet{height:var(--ph)}
.page-viewer__nav{position:absolute;top:calc(var(--s-24) + var(--ph) / 2);z-index:1;display:inline-flex;translate:0 -50%;border-radius:var(--r-full);
background:var(--surface);color:var(--ink);box-shadow:0 0 0 1px var(--line),var(--sh-md)}
@media (hover:hover){.page-viewer__nav:hover{background:var(--surface-alt)}}
.page-viewer__nav--prev{left:var(--s-24)}
.page-viewer__nav--next{right:var(--s-24)}
.page-viewer__nav:disabled{opacity:0;pointer-events:none}
.page-viewer__pos{flex-direction:row;gap:var(--s-8)}
}
@media (prefers-reduced-motion:reduce){.paper-stack__sheet,.paper-strip__hit .paper-sheet,.page-viewer__page{transition:none}}
/* ══ 5. 비교표의 좁은 화면 카드 띠(.compare-swap > .compare + .compare-rail) ══════
767 아래에서는 표(.compare)를 숨기고 열마다 카드 한 장을 옆으로 넘긴다(코어 .rail + 진행 점 data-snapdots).
머리의 분절(.segment[data-rail-tabs="띠 id"])을 누르면 그 카드로 가고, 손가락으로 넘기면 분절이 따라온다(patterns.js).
띠는 열 방향 격자이고 카드는 subgrid 로 줄 높이를 나눠 가져, 항목 이름이 세 카드에서 줄마다 같은 자리에 온다. --rows = 항목 수 + 1(머리). */
.compare-rail{display:none}
@media (max-width:767px){
.compare-swap > .compare,.compare-swap > .compare__hint{display:none}
.compare-rail{display:grid;gap:var(--s-12)}
.compare-rail > .rail{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:min(80vw,360px);grid-template-rows:repeat(var(--rows,6),auto);
gap:0 var(--s-12);padding-block:var(--s-4) var(--s-8);scroll-padding-inline:var(--s-20)}
.compare-rail > .rail > *{width:auto}
}
.compare-rail__card{display:grid;grid-row:1 / -1;grid-template-rows:subgrid;margin:0;border-radius:var(--r-xl);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden}
.compare-rail__card--hot{background:color-mix(in srgb,var(--accent) 4%,var(--surface));box-shadow:inset 0 0 0 1px var(--accent-line)}
.compare-rail__head{display:grid;align-content:start;gap:var(--s-2);padding:var(--s-16) var(--s-16) var(--s-12);box-shadow:inset 0 -1px 0 var(--line)}
.compare-rail__card--hot .compare-rail__head{box-shadow:inset 0 -1px 0 var(--accent-line)}
.compare-rail__name{display:inline-flex;align-items:center;gap:var(--s-8);font-size:var(--t-body-md);line-height:var(--t-body-md-lh);font-weight:700;color:var(--ink)}
.compare-rail__card--hot .compare-rail__name{color:var(--accent-text)}
.compare-rail__price{display:block;margin-top:var(--s-6);font-size:var(--t-heading-sm);line-height:var(--t-heading-sm-lh);letter-spacing:var(--t-heading-sm-ls);font-weight:800;
color:var(--ink);font-variant-numeric:tabular-nums}
.compare-rail__head small{font-size:var(--t-caption);line-height:var(--t-caption-lh);font-weight:500;color:var(--ink-muted)}
.compare-rail__row{display:grid;align-content:start;gap:var(--s-6);padding:var(--s-12) var(--s-16);box-shadow:inset 0 -1px 0 var(--line)}
.compare-rail__row:last-child{box-shadow:none}
.compare-rail__k{font-size:var(--t-caption);line-height:var(--t-caption-lh);font-weight:700;color:var(--ink-subtle)}
.compare-rail__v{display:flex;align-items:flex-start;gap:var(--s-8);font-size:var(--t-body-sm);line-height:var(--t-body-sm-lh);color:var(--ink-body);word-break:keep-all}
.compare-rail__card--hot .compare-rail__v{font-weight:600;color:var(--ink)}
.compare-rail__v > .ico{flex:none;margin-top:var(--s-2)}
.compare-rail__tabs .segment__item{padding-inline:var(--s-8)}
/* ══ 6. 금액 견주기 막대(.cost-bars) ══════════════════════════════
우리 줄이 위(강조색), 견주는 줄은 아래(회색). 막대 길이는 --w(0~1). 금액은 큰 숫자 + 작은 단위().
드러날 때(data-reveal) 막대가 왼쪽에서 차오른다. 움직임 줄이기면 처음부터 다 찬 모습. */
.cost-bars{display:grid;gap:var(--s-20);margin:0}
.cost-bars__row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;column-gap:var(--s-12);row-gap:var(--s-10)}
.cost-bars__who{display:grid;gap:var(--s-2);min-width:0}
.cost-bars__who b{font-size:var(--t-body-md);line-height:var(--t-body-md-lh);font-weight:700;color:var(--ink);word-break:keep-all}
.cost-bars__who small{font-size:var(--t-caption);line-height:var(--t-caption-lh);color:var(--ink-muted);word-break:keep-all}
.cost-bars__amt{font-size:var(--t-heading-xl);line-height:var(--t-heading-xl-lh);letter-spacing:var(--t-heading-xl-ls);font-weight:800;color:var(--ink-muted);
white-space:nowrap;text-align:right;font-variant-numeric:tabular-nums}
.cost-bars__amt small{margin-left:var(--s-2);font-size:var(--t-body-sm);line-height:1;font-weight:700;letter-spacing:0;color:var(--ink-muted)}
.cost-bars__row--us .cost-bars__amt{color:var(--accent-text)}
@media (min-width:1024px){
.cost-bars__amt{font-size:var(--t-display-sm);line-height:var(--t-display-sm-lh);letter-spacing:var(--t-display-sm-ls)}
.cost-bars__amt small{font-size:var(--t-body-md)}
}
.cost-bars__track{grid-column:1 / -1;position:relative;display:block;height:var(--s-12);border-radius:var(--r-full);background:var(--surface-alt);box-shadow:inset 0 0 0 1px var(--line)}
@media (min-width:1024px){.cost-bars__track{height:var(--s-16)}}
.cost-bars__track > i{position:absolute;inset:0 auto 0 0;width:calc(var(--w,1) * 100%);min-width:var(--s-12);border-radius:inherit;background:var(--ink-subtle)}
.cost-bars__row--us .cost-bars__track > i{background:var(--accent)}
.cost-bars__gap{justify-self:start;margin:var(--s-4) 0 0;padding:var(--s-8) var(--s-16);border-radius:var(--r-xl);background:var(--good-soft);
font-size:var(--t-body-sm);line-height:var(--t-body-sm-lh);color:var(--good-text);word-break:keep-all;text-wrap:balance}
.cost-bars__gap b{font-weight:800}
.cost-bars__note{margin:0;padding-top:var(--s-16);box-shadow:inset 0 1px 0 var(--line);font-size:var(--t-caption);line-height:var(--t-caption-lh);color:var(--ink-muted);word-break:keep-all}
@media (max-width:767px){
.cost-bars__row{grid-template-columns:minmax(0,1fr);row-gap:var(--s-6)}
.cost-bars__amt{text-align:left}
.cost-bars__track{margin-top:var(--s-2)}
}
@media (prefers-reduced-motion:no-preference){
html.js .cost-bars__track > i{transform-origin:left center;transition:transform var(--d-7) var(--ease-out)}
html.js .cost-bars[data-reveal]:not(.is-in) .cost-bars__track > i{transform:scaleX(0)}
}
/* ══ 7. 고객 후기 카드(.review-cards > .review-card) ══════════════════
카드 = 이름표(쓰는 곳) · 큰 따옴표 · 인용 · 한 줄 성과 · 얼굴 글자와 이름(바닥에 붙음). 테두리와 그림자를 겹치지 않는 면 한 장.
1024 아래는 옆으로 넘기는 띠(코어 .rail + data-snapdots), 1024 부터 한 줄 격자(--cols, 기본 3). 하나뿐이면 .review-cards--solo. */
.review-cards{margin-block:0;list-style:none}
.review-cards.rail > .review-card{width:min(84vw,360px)}
@media (min-width:1024px){
.review-cards.rail{display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));gap:var(--s-20);overflow:visible;margin-inline:0;padding-inline:0;scroll-snap-type:none}
.review-cards.rail > .review-card{width:auto}
.review-cards.rail + .snapdots{display:none}
}
.review-cards--solo{padding:0}
.review-card{position:relative;display:flex;margin:0}
.review-card__body{position:relative;display:flex;flex-direction:column;gap:var(--s-16);width:100%;margin:0;padding:var(--s-24);border-radius:var(--r-3xl);
background:var(--surface);box-shadow:inset 0 0 0 1px var(--line),var(--sh-sm);transition:transform var(--d-3) var(--ease-out),box-shadow var(--d-3) var(--ease-out)}
@media (min-width:768px){.review-card__body{padding:var(--s-32)}}
@media (hover:hover){.review-card:hover .review-card__body{transform:translateY(calc(var(--s-2) * -1));box-shadow:inset 0 0 0 1px var(--accent-line),var(--sh-lg)}}
.review-card__top{display:flex;align-items:center;justify-content:space-between;gap:var(--s-8)}
.review-card__tag{display:inline-flex;align-items:center;gap:var(--s-6);min-height:var(--s-28);padding-inline:var(--s-10);border-radius:var(--r-full);background:var(--accent-soft);
font-size:var(--t-caption);line-height:var(--t-caption-lh);font-weight:700;color:var(--accent-text);white-space:nowrap}
.review-card__mark{flex:none;height:var(--s-28);font-size:var(--t-display-md);line-height:1;font-weight:800;color:var(--accent);opacity:.35}
.review-card__quote{flex:1;margin:0}
.review-card__quote p{margin:0;font-size:var(--t-body-lg);line-height:var(--t-body-lg-lh);font-weight:500;color:var(--ink);word-break:keep-all;text-wrap:pretty}
.review-card__result{display:flex;align-items:flex-start;gap:var(--s-10);margin:0;padding:var(--s-12) var(--s-16);border-radius:var(--r-xl);background:var(--good-soft);
font-size:var(--t-body-sm);line-height:var(--t-body-sm-lh);font-weight:700;color:var(--ink);word-break:keep-all;text-wrap:balance}
.review-card__result > .ico{flex:none;margin-top:var(--s-2);color:var(--good-text)}
.review-card__by{display:flex;align-items:center;gap:var(--s-12);margin:0;padding-top:var(--s-16);box-shadow:inset 0 1px 0 var(--line)}
.review-card__who{display:grid;gap:var(--s-2);min-width:0}
.review-card__who b{font-size:var(--t-body-md);line-height:var(--t-body-md-lh);font-weight:700;color:var(--ink)}
.review-card__who small{font-size:var(--t-caption);line-height:var(--t-caption-lh);color:var(--ink-muted);word-break:keep-all}
.review-cards--solo .review-card__body{padding:var(--s-28) var(--s-24)}
@media (min-width:768px){.review-cards--solo .review-card__body{padding:var(--s-48) var(--s-56)}}
.review-cards--solo .review-card__result{align-self:flex-start}
@media (min-width:1024px){.review-cards--solo .review-card__quote p{max-width:48rem;font-size:var(--t-heading-md);line-height:var(--t-heading-md-lh);letter-spacing:var(--t-heading-md-ls);font-weight:600;text-wrap:balance}}
@media (prefers-reduced-motion:reduce){.review-card__body{transition:none}}
/* ══ 8. 로고 띠의 이미지 로고(.logos__img) ══════════════════════════
글자 로고(.logos__item) 대신 고객사 로고 그림을 흐를 때. 높이는 --logo-h(기본 28). 회색조로 두고 올리거나 초점이 오면 제 색.
다크는 회색조를 조금 밝게. 어두운 바탕용 로고가 따로 있으면 의 prefers-color-scheme 으로 바꾼다. */
.logos__img{display:block;flex:none;width:auto;height:var(--logo-h,var(--s-28));max-width:none;filter:grayscale(1);opacity:.56;
transition:filter var(--d-3) var(--ease-out),opacity var(--d-3) var(--ease-out)}
@media (hover:hover){.logos__item:hover .logos__img{filter:none;opacity:1}}
.logos__item:focus-visible .logos__img{filter:none;opacity:1}
[data-theme="dark"] .logos__img{filter:grayscale(1) brightness(1.4);opacity:.62}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .logos__img{filter:grayscale(1) brightness(1.4);opacity:.62}}
@media (prefers-reduced-motion:reduce){.logos__img{transition:none}}
/* ══ 9. 시작 체크리스트(.checklist-card) ═════════════════════════════
진행 칸(끝난 칸은 초록으로 차오른다) · 칸마다 번호 → 체크 · 단계마다 버튼 하나(다음에 할 칸만 연한 강조) · 닫기(×).
순서를 강제하지 않는다. 다 끝나면 --done(짧은 완료 카드). 닫기는 되돌릴 수 있어 확인 창 대신 '되돌리기' 토스트(patterns.js). */
.checklist-card{display:grid;align-content:start;gap:var(--s-16);min-width:0;padding:var(--s-20);border-radius:var(--r-2xl);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);
transition:opacity var(--d-3) var(--ease-in),translate var(--d-3) var(--ease-in)}
@media (min-width:768px){.checklist-card{padding:var(--s-24) var(--s-28)}}
.checklist-card[data-closing]{opacity:0;translate:0 calc(var(--s-8) * -1)}
.checklist-card--done{background:linear-gradient(var(--good-soft),var(--good-soft)),var(--surface)}
.checklist-card__head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s-12)}
.checklist-card__heading{display:grid;gap:var(--s-4);min-width:0}
.checklist-card__eyebrow{margin:0;font-size:var(--t-caption);line-height:var(--t-caption-lh);font-weight:700;color:var(--accent-text)}
.checklist-card--done .checklist-card__eyebrow{color:var(--good-text)}
.checklist-card__title{margin:0;font-size:var(--t-heading-sm);line-height:var(--t-heading-sm-lh);font-weight:700;color:var(--ink);word-break:keep-all;text-wrap:balance}
.checklist-card__close{margin:calc(var(--s-6) * -1) calc(var(--s-8) * -1) 0 0}
.checklist-card__desc{margin:0;font-size:var(--t-body-sm);line-height:var(--t-body-sm-lh);color:var(--ink-body);word-break:keep-all}
.checklist-card__meter{display:flex;align-items:center;gap:var(--s-4)}
.checklist-card__seg{position:relative;flex:1;height:var(--s-6);overflow:hidden;border-radius:var(--r-full);background:var(--tint-active)}
.checklist-card__seg[data-done]::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--good);transform-origin:left center}
.checklist-card__count{flex:none;margin-left:var(--s-8);font-size:var(--t-caption);line-height:var(--t-caption-lh);font-weight:700;color:var(--ink-muted);font-variant-numeric:tabular-nums}
.checklist-card__list{display:grid;margin:0;padding:0;list-style:none}
.checklist-card__item{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"mark main" ". act";gap:var(--s-8) var(--s-12);padding-block:var(--s-12);box-shadow:inset 0 -1px 0 var(--line)}
.checklist-card__item:last-child{padding-bottom:0;box-shadow:none}
@media (min-width:640px){.checklist-card__item{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"mark main act";align-items:center}}
.checklist-card__mark{grid-area:mark;display:grid;place-items:center;width:var(--s-28);height:var(--s-28);border-radius:var(--r-full);box-shadow:inset 0 0 0 1.5px var(--line-strong);
font-size:var(--t-caption);line-height:1;font-weight:700;color:var(--ink-muted);font-variant-numeric:tabular-nums}
.checklist-card__item[aria-current="step"] .checklist-card__mark{box-shadow:inset 0 0 0 1.5px var(--accent);color:var(--accent-text)}
.checklist-card__item[data-done] .checklist-card__mark{background:var(--good);box-shadow:none;color:var(--media-ink)}
.checklist-card__main{grid-area:main;display:grid;gap:var(--s-2);min-width:0}
.checklist-card__main > p{margin:0}
.checklist-card__name{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-4) var(--s-8);font-size:var(--t-body-sm);line-height:var(--t-body-sm-lh);font-weight:600;color:var(--ink)}
.checklist-card__item[data-done] .checklist-card__name{color:var(--ink-muted)}
.checklist-card__time{padding:0 var(--s-6);border-radius:var(--r-full);background:var(--tint);font-size:var(--t-nano);line-height:var(--t-nano-lh);font-weight:600;color:var(--ink-muted)}
.checklist-card__why{font-size:var(--t-caption);line-height:var(--t-caption-lh);color:var(--ink-muted);word-break:keep-all;overflow-wrap:anywhere}
.checklist-card__act{grid-area:act;display:flex}
.checklist-card__ok{display:inline-flex;align-items:center;gap:var(--s-4);font-size:var(--t-caption);line-height:var(--t-caption-lh);font-weight:600;color:var(--good-text)}
@keyframes checklist-fill{from{scale:0 1}}
@media (prefers-reduced-motion:no-preference){
.checklist-card__seg[data-done]::after{animation:checklist-fill var(--d-5) var(--ease-out) both}
.checklist-card__seg:nth-child(2)::after{animation-delay:calc(var(--d-1) * .6)}
.checklist-card__seg:nth-child(3)::after{animation-delay:calc(var(--d-1) * 1.2)}
.checklist-card__seg:nth-child(4)::after{animation-delay:calc(var(--d-1) * 1.8)}
.checklist-card__seg:nth-child(5)::after{animation-delay:calc(var(--d-1) * 2.4)}
.checklist-card__seg:nth-child(n+6)::after{animation-delay:calc(var(--d-1) * 3)}
}
@media (prefers-reduced-motion:reduce){.checklist-card{transition:none}}
/* ══ 10. 사람 목록(.person-list > .person-row) ═════════════════════════
멤버·초대·참여자 목록. 화면 폭이 아니라 목록 칸 폭으로 모양을 바꾼다(설정 본문처럼 좁은 칸에서도 맞게, container query).
480 아래: 이름(아바타 · 이름 · 메일) 오른쪽에 관리 버튼, 그 아래 칸마다 '이름표 값' 한 줄.
480 부터: 표 칸(머리 줄 .person-list__head 가 보이고 이름표는 화면 읽기에만). 칸 너비는 --person-cols(기본: 이름 넓게 + 칸 둘 + 관리 120). 줄마다 따로 그리는 격자라 내용 따라 늘어나는 auto 칸을 두면 머리와 줄이 어긋난다. */
.person-list{container-type:inline-size;container-name:person-list}
.person-list__head{display:none}
.person-list__rows{display:flex;flex-direction:column;margin:0;padding:0;list-style:none}
.person-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s-8) var(--s-12);align-items:start;padding:var(--s-12) 0;box-shadow:inset 0 -1px 0 var(--line)}
.person-row:last-child{box-shadow:none}
.person-row__who{grid-column:1;grid-row:1;display:flex;align-items:center;gap:var(--s-12);min-width:0}
.person-row__who > .avatar{flex:none}
.person-row__id{display:flex;flex-direction:column;gap:var(--s-2);min-width:0}
.person-row__name{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-6);font-size:var(--t-body-md);line-height:var(--t-body-md-lh);font-weight:600;color:var(--ink);overflow-wrap:anywhere}
.person-row__sub{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--t-caption);line-height:var(--t-caption-lh);color:var(--ink-muted)}
.person-row__cell{grid-column:1 / -1;display:grid;grid-template-columns:5rem minmax(0,1fr);gap:var(--s-8);align-items:baseline;padding-left:calc(var(--s-28) + var(--s-12))}
.person-row__k{white-space:nowrap;font-size:var(--t-caption);line-height:var(--t-caption-lh);color:var(--ink-muted)}
.person-row__v{min-width:0;font-size:var(--t-body-sm);line-height:var(--t-body-sm-lh);color:var(--ink-body);overflow-wrap:anywhere}
.person-row__act{grid-column:2;grid-row:1;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--s-4)}
.person-row--invited .avatar{background:var(--canvas-alt);color:var(--ink-muted);box-shadow:inset 0 0 0 1px var(--line-strong)}
.person-row--past .avatar{background:var(--canvas-sunken);color:var(--ink-subtle)}
.person-row--past .person-row__name{color:var(--ink-muted)}
@container person-list (min-width:480px){
.person-list__head{display:grid;grid-template-columns:var(--person-cols, minmax(0,1.6fr) repeat(2,minmax(0,1fr)) var(--s-120));align-items:end;column-gap:var(--s-16);padding:0 0 var(--s-8);box-shadow:inset 0 -1px 0 var(--line);
font-size:var(--t-caption);line-height:var(--t-caption-lh);font-weight:600;color:var(--ink-muted)}
.person-row{grid-template-columns:var(--person-cols, minmax(0,1.6fr) repeat(2,minmax(0,1fr)) var(--s-120));column-gap:var(--s-16);align-items:center}
.person-row__cell{grid-column:auto;grid-row:1;display:block;padding-left:0}
.person-row__k{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.person-row__act{grid-column:-2 / -1}
}
/* ══ 11. 좁은 화면에서도 남는 머리 주버튼(.nav__cta--keep) ══════════════
코어는 560px 아래에서 .nav__cta 를 숨긴다(서랍 안 버튼으로 간다). 가입처럼 가장 중요한 버튼은 머리에 남기고 글자만 짧게 바꾼다.
14일 무료로 시작하기시작하기 */
.nav__cta-short{display:none}
@media (max-width:560px){
.nav__cta--keep{display:inline-flex;padding-inline:var(--s-12)}
.nav__cta--keep .nav__cta-long{display:none}
.nav__cta--keep .nav__cta-short{display:inline}
}