/* ===========================================================
   언제만나 (when) — 퍼블리싱 공통 스타일
   색·글자·간격 값은 tokens.css가 단일 출처입니다.
   이 파일에서는 새 색을 만들지 않고 var(--...)만 씁니다.
   예외: 소셜 브랜드 색 3종 (카카오·네이버·구글)
   =========================================================== */

/* ---------- 0. 리셋 ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;
     font-feature-settings:"ss03","case","tnum";}
body{margin:0;font-family:var(--font-sans);background:var(--cool-neutral-96);
     color:var(--fg-primary);font-size:var(--t-body-1-size);line-height:var(--t-body-1-lh);
     letter-spacing:var(--tracking-tight);}
img,svg{display:block;max-width:100%;}
button,input,select,textarea{font:inherit;letter-spacing:inherit;color:inherit;}
button{cursor:pointer;background:none;border:0;padding:0;}
a{color:var(--fg-link);text-decoration:none;}
a:hover{text-decoration:underline;}
ul,ol{margin:0;padding:0;list-style:none;}
h1,h2,h3,h4,p{margin:0;}
:focus-visible{outline:2px solid var(--border-focus);outline-offset:2px;border-radius:4px;}

/* ---------- 1. 퍼블리싱 전용 크롬 (실제 서비스에는 없음) ---------- */
.devbar{position:sticky;top:0;z-index:100;display:flex;align-items:center;gap:12px;
        height:48px;padding:0 16px;background:var(--surface-inverse);color:var(--static-white);
        font-size:var(--t-caption-1-size);}
.devbar a{color:var(--static-white);opacity:.85;}
.devbar a:hover{opacity:1;}
.devbar__id{font-family:var(--font-mono);font-size:11px;padding:2px 7px;border-radius:var(--radius-pill);
            background:rgba(255,255,255,.16);}
.devbar__title{font-weight:600;}
.devbar__spacer{flex:1;}
.devnote{max-width:760px;margin:24px auto 0;padding:0 16px;
         font-size:var(--t-body-3-size);color:var(--fg-secondary);text-wrap:pretty;}
.devnote strong{color:var(--fg-primary);}

.stage{display:flex;flex-wrap:wrap;gap:32px;justify-content:center;
       padding:32px 16px 64px;}
.frame{width:375px;flex:none;}
.frame__label{font-size:var(--t-caption-1-size);font-weight:600;color:var(--fg-secondary);
              margin-bottom:8px;padding-left:2px;}
.frame__desc{font-size:var(--t-caption-2-size);color:var(--fg-tertiary);
             margin:-4px 0 8px;padding-left:2px;text-wrap:pretty;}

/* ---------- 2. 앱 셸 ---------- */
.app{position:relative;width:375px;height:780px;overflow:hidden;display:flex;flex-direction:column;
     background:var(--surface-background);border:1px solid var(--border-subtle);
     border-radius:var(--radius-xl);}
.app--auto{height:auto;min-height:560px;}

.topbar{flex:none;display:flex;align-items:center;gap:8px;min-height:56px;
        padding:0 var(--screen-gutter);background:var(--surface-background);
        border-bottom:1px solid var(--border-subtle);}
.topbar__back{width:40px;height:40px;margin-left:-10px;display:flex;align-items:center;
              justify-content:center;font-size:20px;color:var(--fg-secondary);}
.topbar__title{flex:1;font-size:var(--t-body-2-size);font-weight:600;}
.topbar__title--center{text-align:center;}
.topbar__action{font-size:var(--t-caption-1-size);font-weight:600;color:var(--fg-link);}

.identity{flex:none;display:flex;align-items:center;gap:8px;padding:10px var(--screen-gutter);
          background:var(--brand-primary-soft);border-bottom:1px solid var(--border-subtle);
          font-size:var(--t-caption-1-size);font-weight:600;color:var(--brand-ink);
          position:sticky;top:0;z-index:20;}
.identity__name{flex:1;}
.identity__change{color:var(--brand-primary);font-weight:600;}

.progress{flex:none;display:flex;align-items:center;gap:10px;padding:10px var(--screen-gutter);}
.progress__track{flex:1;height:4px;border-radius:2px;background:var(--cool-neutral-94);overflow:hidden;}
.progress__fill{height:100%;background:var(--brand-primary);border-radius:2px;
                transition:width var(--motion-medium);}
.progress__step{font-size:var(--t-caption-2-size);font-weight:600;color:var(--fg-tertiary);
                font-variant-numeric:tabular-nums;}

.content{flex:1;overflow-y:auto;padding:var(--space-5) var(--screen-gutter) var(--space-6);}
.content--flush{padding-left:0;padding-right:0;}

.actionbar{flex:none;padding:12px var(--screen-gutter) calc(12px + env(safe-area-inset-bottom,0px));
           background:var(--surface-background);box-shadow:var(--shadow-bar);}
.actionbar__sub{display:block;text-align:center;margin-top:10px;
                font-size:var(--t-caption-1-size);color:var(--fg-secondary);}

/* ---------- 3. 타이포 ---------- */
.h1{font-size:var(--t-title-1-size);line-height:var(--t-title-1-lh);font-weight:700;}
.h2{font-size:var(--t-title-2-size);line-height:var(--t-title-2-lh);font-weight:700;}
.h3{font-size:var(--t-heading-1-size);line-height:var(--t-heading-1-lh);font-weight:600;}
.body{font-size:var(--t-body-2-size);}
.sub{font-size:var(--t-body-3-size);color:var(--fg-secondary);}
.caption{font-size:var(--t-caption-1-size);color:var(--fg-tertiary);}
.center{text-align:center;}
.strong{font-weight:600;}
.num{font-variant-numeric:tabular-nums;}
.mt-1{margin-top:var(--space-1);} .mt-2{margin-top:var(--space-2);}
.mt-3{margin-top:var(--space-3);} .mt-4{margin-top:var(--space-4);}
.mt-5{margin-top:var(--space-5);} .mt-6{margin-top:var(--space-6);}
.mt-8{margin-top:var(--space-8);}
.mb-1{margin-bottom:var(--space-1);}
.mb-2{margin-bottom:var(--space-2);} .mb-3{margin-bottom:var(--space-3);}
.mb-4{margin-bottom:var(--space-4);} .mb-6{margin-bottom:var(--space-6);}

/* ---------- 4. 버튼 ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
     width:100%;height:52px;padding:0 18px;border-radius:var(--radius-lg);
     font-size:var(--t-body-1-size);font-weight:600;text-align:center;
     transition:background var(--motion-fast),opacity var(--motion-fast);}
.btn:hover{text-decoration:none;}
.btn--primary{background:var(--brand-primary);color:var(--fg-on-primary);}
.btn--primary:hover{background:var(--brand-primary-hover);}
.btn--primary:active{background:var(--brand-primary-press);}
.btn--secondary{background:var(--surface-background);color:var(--fg-primary);
                border:1px solid var(--border-default);}
.btn--secondary:hover{background:var(--interaction-hover);}
.btn--danger{background:var(--status-danger);color:var(--static-white);}
.btn--ghost{background:transparent;color:var(--fg-secondary);}
.btn[disabled],.btn.is-disabled{background:var(--cool-neutral-94);color:var(--fg-disabled);
                                border-color:transparent;cursor:not-allowed;pointer-events:none;}
.btn--sm{height:40px;font-size:var(--t-body-3-size);width:auto;padding:0 14px;
         border-radius:var(--radius-md);}
.btn--xs{height:32px;font-size:var(--t-caption-1-size);width:auto;padding:0 10px;
         border-radius:var(--radius-md);}
.btn-row{display:flex;gap:8px;}
.btn-row .btn{flex:1;}

.link{font-size:var(--t-body-3-size);color:var(--fg-secondary);text-decoration:underline;
      text-underline-offset:3px;}
.link--brand{color:var(--brand-primary);}
.link--danger{color:var(--status-danger);}
.link-center{display:block;text-align:center;}

/* 소셜 로그인 — 브랜드 색은 각 사가 정한 값이라 토큰 밖 사용을 허용 */
.btn--kakao{background:#FEE500;color:#191600;}
.btn--naver{background:#03C75A;color:#fff;}
.btn--google{background:#fff;color:var(--fg-primary);border:1px solid var(--border-default);}
.btn__brand{width:20px;height:20px;flex:none;border-radius:4px;display:grid;place-items:center;
            font-size:11px;font-weight:800;}

/* ---------- 5. 폼 ---------- */
.field{margin-bottom:var(--space-5);}
.field__label{display:block;font-size:var(--t-caption-1-size);font-weight:600;
              color:var(--fg-secondary);margin-bottom:6px;}
.input{width:100%;height:52px;padding:0 14px;border:1px solid var(--border-default);
       border-radius:var(--radius-lg);background:var(--surface-background);
       font-size:var(--t-body-1-size);transition:border-color var(--motion-fast);}
.input::placeholder{color:var(--fg-disabled);}
.input:focus{outline:none;border-color:var(--border-focus);
             box-shadow:0 0 0 3px var(--alpha-primary-08);}
.input--error{border-color:var(--status-danger);}
.input-wrap{position:relative;}
.input-wrap .input{padding-right:48px;}
.input__toggle{position:absolute;right:6px;top:6px;width:40px;height:40px;
               display:grid;place-items:center;color:var(--fg-tertiary);font-size:14px;}
.field__counter{margin-top:6px;text-align:right;font-size:var(--t-caption-2-size);
                color:var(--fg-tertiary);font-variant-numeric:tabular-nums;}
.field__counter.is-max{color:var(--status-danger);font-weight:600;}
.field__error{margin-top:6px;font-size:var(--t-caption-1-size);color:var(--status-danger-fg);}
.field__hint{margin-top:6px;font-size:var(--t-caption-1-size);color:var(--fg-tertiary);}

.check{display:flex;align-items:flex-start;gap:10px;padding:8px 0;
       font-size:var(--t-body-3-size);cursor:pointer;}
.check input{width:20px;height:20px;flex:none;margin:1px 0 0;accent-color:var(--brand-primary);}
.check__req{color:var(--fg-tertiary);}
.check__view{margin-left:auto;font-size:var(--t-caption-1-size);color:var(--fg-link);}

.stepper{display:flex;align-items:center;justify-content:center;gap:20px;margin:var(--space-5) 0;}
.stepper__btn{width:44px;height:44px;border:1px solid var(--border-default);
              border-radius:var(--radius-md);display:grid;place-items:center;font-size:20px;}
.stepper__val{min-width:56px;text-align:center;font-size:var(--t-title-2-size);font-weight:700;
              font-variant-numeric:tabular-nums;}

/* ---------- 6. 칩 ---------- */
.chips{display:flex;flex-wrap:wrap;gap:8px;}
.chip{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 12px;
      border-radius:var(--radius-pill);background:var(--cool-neutral-96);
      font-size:var(--t-body-3-size);font-weight:500;}
.chip--brand{background:var(--brand-primary-soft);color:var(--brand-ink);}
.chip--outline{background:transparent;border:1px solid var(--border-default);}
.chip--dashed{background:transparent;border:1px dashed var(--border-strong);color:var(--fg-secondary);}
.chip__x{width:18px;height:18px;margin-right:-4px;display:grid;place-items:center;
         border-radius:50%;background:var(--alpha-neutral-16);font-size:11px;color:var(--fg-secondary);}
.chip.is-on{background:var(--brand-primary);color:var(--fg-on-primary);}
.chip.is-disabled{opacity:.45;pointer-events:none;}

/* ---------- 7. 카드·리스트 ---------- */
.card{padding:var(--space-4);border:1px solid var(--border-subtle);
      border-radius:var(--radius-lg);background:var(--surface-background);}
.card + .card{margin-top:var(--space-3);}
.card--soft{background:var(--surface-background-alt);border-color:transparent;}
.card--brand{background:var(--brand-primary-soft);border-color:transparent;}

.list{border:1px solid var(--border-subtle);border-radius:var(--radius-lg);overflow:hidden;}
.list__item{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;
            padding:12px var(--space-4);background:var(--surface-background);text-align:left;
            border-bottom:1px solid var(--border-subtle);}
.list__item:last-child{border-bottom:0;}
.list__item:hover{background:var(--interaction-hover);}
.list__main{flex:1;min-width:0;}
.list__title{font-size:var(--t-body-2-size);font-weight:500;}
.list__sub{font-size:var(--t-caption-1-size);color:var(--fg-tertiary);margin-top:2px;}
.list__arrow{color:var(--fg-disabled);font-size:16px;}
.list__item.is-done .list__title{color:var(--fg-tertiary);font-weight:400;}
.list__item.is-danger .list__title{color:var(--status-danger);}

.section-title{display:flex;align-items:center;gap:8px;margin:var(--space-6) 0 var(--space-3);
               font-size:var(--t-caption-1-size);font-weight:600;color:var(--fg-secondary);}
.section-title .btn{width:auto;margin-left:auto;}

.divider{height:1px;background:var(--border-subtle);margin:var(--space-6) 0;}

/* ---------- 8. 배지·상태 ---------- */
.badge{display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 8px;
       border-radius:var(--radius-pill);font-size:var(--t-caption-2-size);font-weight:600;}
.badge--brand{background:var(--brand-primary-soft);color:var(--brand-primary);}
.badge--success{background:var(--status-success-soft);color:var(--status-success-fg);}
.badge--warn{background:var(--status-warn-soft);color:var(--status-warn-fg);}
.badge--muted{background:var(--cool-neutral-96);color:var(--fg-tertiary);}

/* 참여자 응답 상태 — "전부 불가"에 위험색을 쓰지 않는다 (정상적으로 답을 마친 상태) */
.pstate{display:inline-flex;align-items:center;gap:6px;font-size:var(--t-caption-1-size);}
.pstate__icon{width:18px;height:18px;flex:none;border-radius:50%;display:grid;place-items:center;
              font-size:11px;font-weight:700;}
.pstate--answered{color:var(--fg-secondary);}
.pstate--answered .pstate__icon{background:var(--status-success-soft);color:var(--status-success);}
.pstate--none{color:var(--fg-tertiary);}
.pstate--none .pstate__icon{background:var(--cool-neutral-96);color:var(--fg-tertiary);}
.pstate--pending{color:var(--status-warn-fg);}
.pstate--pending .pstate__icon{background:var(--status-warn-soft);color:var(--status-warn);}

.meter{display:flex;align-items:center;gap:10px;}
.meter__track{flex:1;height:6px;border-radius:3px;background:var(--cool-neutral-94);overflow:hidden;}
.meter__fill{height:100%;background:var(--brand-primary);border-radius:3px;}
.meter__label{font-size:var(--t-caption-1-size);font-weight:600;white-space:nowrap;}

/* ---------- 9. 배너 ---------- */
.banner{display:flex;align-items:flex-start;gap:8px;padding:12px var(--screen-gutter);
        font-size:var(--t-caption-1-size);font-weight:500;line-height:1.45;}
.banner__icon{width:20px;height:20px;flex:none;border-radius:50%;display:grid;place-items:center;
              font-size:12px;font-weight:700;color:var(--static-white);}
.banner__body{flex:1;text-wrap:pretty;}
.banner--info{background:var(--brand-primary-soft);color:var(--brand-ink);}
.banner--info .banner__icon{background:var(--brand-primary);}
.banner--warn{background:var(--status-warn-soft);color:var(--status-warn-fg);}
.banner--warn .banner__icon{background:var(--status-warn);}
.banner--success{background:var(--status-success-soft);color:var(--status-success-fg);}
.banner--success .banner__icon{background:var(--status-success);}
.banner--danger{background:var(--status-danger-soft);color:var(--status-danger-fg);}
.banner--danger .banner__icon{background:var(--status-danger);}

/* ---------- 10. 탭·세그먼트 ---------- */
.tabs{display:flex;border-bottom:1px solid var(--border-subtle);}
.tabs__btn{flex:1;height:48px;font-size:var(--t-body-3-size);font-weight:600;
           color:var(--fg-tertiary);border-bottom:2px solid transparent;margin-bottom:-1px;}
.tabs__btn.is-on{color:var(--fg-primary);border-bottom-color:var(--brand-primary);}

.segmented{display:inline-flex;padding:3px;border-radius:var(--radius-md);
           background:var(--cool-neutral-96);}
.segmented__btn{height:34px;padding:0 14px;border-radius:6px;font-size:var(--t-caption-1-size);
                font-weight:600;color:var(--fg-tertiary);}
.segmented__btn.is-on{background:var(--surface-background);color:var(--fg-primary);
                      box-shadow:0 1px 2px rgba(20,25,30,.08);}

/* ---------- 11. 시간 그리드 ---------- */
.grid-wrap{position:relative;overflow-x:auto;-webkit-overflow-scrolling:touch;
           padding:0 var(--screen-gutter);}
.grid-wrap::after{content:"";position:sticky;right:0;top:0;float:right;width:12px;height:100%;
                  box-shadow:var(--shadow-scroll-edge);pointer-events:none;}
.grid{display:grid;gap:3px;min-width:min-content;}
.grid__head{font-size:var(--t-caption-2-size);font-weight:600;color:var(--fg-secondary);
            text-align:center;padding:6px 0;line-height:1.25;}
.grid__head--btn:hover{background:var(--interaction-hover);border-radius:var(--radius-md);}
.grid__head small{display:block;font-weight:400;color:var(--fg-tertiary);}
.grid__time{position:sticky;left:0;z-index:2;display:flex;align-items:center;justify-content:flex-end;
            padding-right:8px;background:var(--surface-background);
            font-size:var(--t-caption-2-size);font-weight:600;color:var(--fg-tertiary);
            font-variant-numeric:tabular-nums;min-width:34px;}
.grid__time--btn:hover{color:var(--brand-primary);}

.slot{position:relative;height:var(--touch-min);border-radius:var(--radius-md);
      border:1px solid var(--border-default);background:var(--surface-background);
      display:grid;place-items:center;font-size:var(--t-body-3-size);font-weight:700;
      font-variant-numeric:tabular-nums;transition:background var(--motion-fast);}
.slot.is-on{background:var(--brand-primary);border-color:var(--brand-primary);
            color:var(--fg-on-primary);}
.slot.is-on::after{content:"✓";font-size:14px;}
.slot.is-off{background:repeating-linear-gradient(45deg,var(--cool-neutral-96),
             var(--cool-neutral-96) 4px,var(--cool-neutral-94) 4px,var(--cool-neutral-94) 8px);
             border-color:var(--border-subtle);cursor:not-allowed;pointer-events:none;}
.slot__star{position:absolute;top:2px;right:4px;font-size:9px;line-height:1;}
.slot__dot{position:absolute;top:3px;left:4px;width:5px;height:5px;border-radius:50%;
           background:currentColor;opacity:.5;}

/* 히트맵 5단계 — 색만으로 구분하지 않도록 항상 숫자를 함께 표시한다 */
.heat-0{background:transparent;border-color:var(--heat-0-border);color:var(--heat-0-fg);}
.heat-1{background:var(--heat-1-bg);border-color:var(--heat-1-border);color:var(--heat-1-fg);}
.heat-2{background:var(--heat-2-bg);border-color:var(--heat-2-border);color:var(--heat-2-fg);}
.heat-3{background:var(--heat-3-bg);border-color:var(--heat-3-border);color:var(--heat-3-fg);}
.heat-4{background:var(--heat-4-bg);border-color:var(--heat-4-border);color:var(--heat-4-fg);}

.legend{display:flex;flex-wrap:wrap;gap:10px;margin-top:var(--space-3);
        padding:0 var(--screen-gutter);font-size:var(--t-caption-2-size);color:var(--fg-tertiary);}
.legend__item{display:inline-flex;align-items:center;gap:4px;}
.legend__sw{width:14px;height:14px;border-radius:4px;border:1px solid var(--border-default);}

/* 시간 칸 안에 인원수까지 넣는 편집 화면용 */
.slot--stack{height:52px;flex-direction:column;gap:1px;display:flex;align-items:center;
             justify-content:center;font-size:var(--t-caption-1-size);}
.slot--stack small{font-size:10px;font-weight:600;opacity:.75;}

/* ---------- 12. 아코디언 ---------- */
.acc{border:1px solid var(--border-subtle);border-radius:var(--radius-lg);overflow:hidden;}
.acc + .acc{margin-top:var(--space-3);}
.acc__head{display:flex;align-items:center;gap:8px;width:100%;min-height:52px;
           padding:0 var(--space-4);background:var(--surface-background);text-align:left;}
.acc__caret{color:var(--fg-tertiary);font-size:12px;transition:transform var(--motion-fast);}
.acc.is-open .acc__caret{transform:rotate(90deg);}
.acc__title{flex:1;font-size:var(--t-body-2-size);font-weight:600;}
.acc__body{display:none;padding:0 var(--space-4) var(--space-4);
           border-top:1px solid var(--border-subtle);}
.acc.is-open .acc__body{display:block;}

/* ---------- 13. 달력 ---------- */
.cal{margin-top:var(--space-4);}
.cal__month{font-size:var(--t-body-3-size);font-weight:600;color:var(--fg-secondary);
            text-align:center;margin-bottom:var(--space-3);}
.cal__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;}
.cal__dow{text-align:center;font-size:var(--t-caption-2-size);color:var(--fg-tertiary);
          padding-bottom:4px;}
.cal__day{height:var(--touch-min);border-radius:var(--radius-md);display:grid;place-items:center;
          font-size:var(--t-body-3-size);font-variant-numeric:tabular-nums;}
.cal__day:hover{background:var(--interaction-hover);}
.cal__day.is-on{background:var(--brand-primary);color:var(--fg-on-primary);font-weight:700;}
.cal__day.is-past{color:var(--fg-disabled);pointer-events:none;}
.cal__day.is-today{box-shadow:inset 0 0 0 1px var(--brand-primary);}
/* 이미 후보 날짜로 들어가 있어 다시 고를 수 없음(devplan007 SCR-13 날짜 추가 시트). is-past와
   같은 회색·비활성 스타일을 쓰되, "진짜 과거"와 구분되는 별도 클래스로 토글합니다. */
.cal__day.is-taken{color:var(--fg-disabled);pointer-events:none;}

/* ---------- 14. 추천 카드 ---------- */
.reco{display:flex;gap:10px;overflow-x:auto;padding:0 var(--screen-gutter) 4px;
      -webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;}
.reco__card{flex:none;width:262px;padding:var(--space-4);border-radius:var(--radius-xl);
            border:1px solid var(--border-default);background:var(--surface-background);
            scroll-snap-align:start;}
.reco__card--top{background:var(--brand-primary);border-color:var(--brand-primary);
                 color:var(--fg-on-primary);}
.reco__when{font-size:var(--t-heading-1-size);font-weight:700;}
.reco__who{font-size:var(--t-body-3-size);color:var(--fg-secondary);margin-top:6px;}
.reco__card--top .reco__who{color:var(--fg-on-primary);opacity:.92;font-weight:600;}

/* ---------- 15. 바텀 시트 ---------- */
.sheet{position:absolute;inset:0;z-index:40;display:none;}
.sheet.is-open{display:block;}
.sheet__backdrop{position:absolute;inset:0;background:var(--surface-overlay);}
.sheet__panel{position:absolute;left:0;right:0;bottom:0;max-height:80%;display:flex;
              flex-direction:column;background:var(--surface-elevated);
              border-radius:var(--radius-xl) var(--radius-xl) 0 0;box-shadow:var(--shadow-sheet);
              animation:sheet-up var(--motion-medium);}
@keyframes sheet-up{from{transform:translateY(16px);opacity:.6;}to{transform:none;opacity:1;}}
.sheet__grip{width:44px;height:4px;border-radius:2px;background:var(--cool-neutral-90);
             margin:10px auto 4px;}
.sheet__head{padding:8px var(--space-5) 0;text-align:center;}
.sheet__nav{display:flex;align-items:center;gap:8px;padding:0 var(--space-3);}
.sheet__nav button{width:44px;height:44px;display:grid;place-items:center;font-size:20px;
                   color:var(--fg-secondary);}
.sheet__title{flex:1;text-align:center;font-size:var(--t-body-1-size);font-weight:700;}
.sheet__sub{font-size:var(--t-body-3-size);color:var(--fg-secondary);margin-top:2px;}
.sheet__body{flex:1;overflow-y:auto;padding:var(--space-4) var(--space-5);}
.sheet__foot{padding:12px var(--space-5) calc(12px + env(safe-area-inset-bottom,0px));
             border-top:1px solid var(--border-subtle);}

.group{margin-bottom:var(--space-5);}
.group__title{display:flex;align-items:center;gap:6px;font-size:var(--t-caption-1-size);
              font-weight:700;margin-bottom:8px;}
.group--yes .group__title{color:var(--status-success-fg);}
.group--no .group__title{color:var(--fg-tertiary);}
.group--pending .group__title{color:var(--status-warn-fg);}

/* ---------- 16. 토스트 ---------- */
.toast{position:absolute;left:var(--screen-gutter);right:var(--screen-gutter);bottom:88px;z-index:60;
       display:none;align-items:center;gap:10px;padding:14px 16px;border-radius:var(--radius-lg);
       background:var(--surface-inverse);color:var(--static-white);
       font-size:var(--t-body-3-size);box-shadow:var(--shadow-toast);}
.toast.is-open{display:flex;animation:toast-in var(--motion-medium);}
@keyframes toast-in{from{transform:translateY(8px);opacity:0;}to{transform:none;opacity:1;}}
.toast__body{flex:1;text-wrap:pretty;}
.toast__action{font-weight:700;color:var(--brand-on-dark);white-space:nowrap;}

/* ---------- 17. 빈 상태 ---------- */
.empty{padding:var(--space-10) var(--space-5);text-align:center;}
.empty__art{width:56px;height:56px;margin:0 auto var(--space-4);border-radius:var(--radius-xl);
            background:var(--cool-neutral-96);display:grid;place-items:center;
            font-size:22px;color:var(--fg-disabled);}
.empty__title{font-size:var(--t-body-1-size);font-weight:600;}
.empty__desc{font-size:var(--t-body-3-size);color:var(--fg-secondary);margin-top:6px;
             text-wrap:pretty;}

/* ---------- 18. 기타 ---------- */
.avatar{width:44px;height:44px;flex:none;border-radius:50%;display:grid;place-items:center;
        background:var(--brand-primary-soft);color:var(--brand-primary);font-weight:700;
        font-size:var(--t-body-2-size);}
.avatar--sm{width:32px;height:32px;font-size:var(--t-caption-1-size);}

.linkbox{padding:var(--space-4);border-radius:var(--radius-lg);
         border:1px solid var(--border-default);background:var(--surface-background);}
.linkbox__label{font-size:var(--t-caption-1-size);font-weight:600;color:var(--fg-secondary);}
.linkbox__url{margin:8px 0 12px;font-family:var(--font-mono);font-size:var(--t-caption-1-size);
              word-break:break-all;color:var(--fg-primary);}

.steps{counter-reset:s;}
.steps li{counter-increment:s;display:flex;gap:12px;align-items:flex-start;
          margin-bottom:var(--space-4);font-size:var(--t-body-3-size);}
.steps li::before{content:counter(s);flex:none;width:24px;height:24px;border-radius:50%;
                  background:var(--brand-primary-soft);color:var(--brand-primary);
                  font-size:12px;font-weight:700;display:grid;place-items:center;}

.hidden{display:none !important;}

/* ---------- 19. 인덱스 페이지 ---------- */
.idx{max-width:960px;margin:0 auto;padding:40px 20px 80px;}
.idx__group{margin-top:var(--space-8);}
.idx__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;
           margin-top:var(--space-3);}
.idx__card{display:block;padding:16px;border:1px solid var(--border-subtle);
           border-radius:var(--radius-lg);background:var(--surface-background);color:inherit;}
.idx__card:hover{border-color:var(--brand-primary);background:var(--brand-primary-soft);
                 text-decoration:none;}
.idx__id{font-family:var(--font-mono);font-size:11px;color:var(--brand-primary);}
.idx__name{font-size:var(--t-body-2-size);font-weight:600;margin-top:4px;}
.idx__desc{font-size:var(--t-caption-2-size);color:var(--fg-tertiary);margin-top:4px;
           text-wrap:pretty;}

/* ---------- 20. 반응형 (PC는 동작만 보장) ---------- */
@media (max-width:420px){
  .stage{padding:16px 0 48px;gap:24px;}
  .frame,.app{width:100%;}
  .app{height:auto;min-height:100vh;border:0;border-radius:0;}
  .frame__label,.frame__desc{padding-left:16px;}
  .devnote{padding:0 16px;}
}

/* part009 §D — 실제 서비스(body 바로 아래의 .app)만 겨냥합니다.
   design/publish 목업 갤러리는 .frame > .app 구조라 이 선택자에 걸리지 않습니다. */

/* 421~767px — 기본 모바일. 위 420px 규칙과 이어져 321~767px 전체가 카드 없이 꽉 차게 합니다
   (handoff.md §8.4). 이 구간이 없으면 .app의 기본값(375×780, overflow:hidden)에 그대로 걸려
   큰 폰 화면에서 375px 카드로 잘려 보입니다. */
@media (min-width:421px) and (max-width:767px){
  body > .app{width:100%;height:auto;min-height:100vh;border:0;border-radius:0;}
}

/* 768px 이상 — 본문 최대 폭 560px 중앙 정렬. 모바일 레이아웃을 그대로 폭만 제한하며,
   PC 전용 사이드바 등은 만들지 않습니다(handoff.md §8.4). */
@media (min-width:768px){
  body > .app{width:100%;max-width:560px;height:auto;min-height:100vh;
              border:0;border-radius:0;margin:0 auto;}
}