/* 회의실 목록 — /room/ 에 처음 들어오면 여기가 뜬다 */
/* 본문은 한 폭(--col)으로 묶는다 — 제목·[새 회의실]·카드가 같은 선에서 시작하고 끝난다.
   폭이 카드 3장에 딱 맞으므로 빈 칸이 생기지 않는다. */
/* 본문은 카드 세 장이 딱 맞는 폭(--col)으로 묶는다 */
.lobby{--col:1052px;max-width:none;margin:0;padding:clamp(20px,4vw,40px) clamp(16px,2.5vw,32px) 60px}
.lobby-h{display:flex;align-items:flex-end;gap:16px;margin-bottom:22px;flex-wrap:wrap}
.lobby-h h1{font-size:clamp(22px,3vw,28px);font-weight:900;letter-spacing:-.04em;margin:0 0 6px}
.lobby-h p{margin:0;font-size:13.5px;color:var(--muted);max-width:52ch;line-height:1.7}
.lobby-h .primary{margin-left:auto;flex:none}

.newroom{background:var(--paper);border:1px solid var(--line);border-radius:16px;
  padding:18px;margin-bottom:22px;box-shadow:var(--shadow)}
.nr-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:720px){.nr-row{grid-template-columns:1fr}}
.nr-f{display:flex;align-items:center;gap:8px;margin-top:4px}
.nr-f .hint{flex:1;font-size:11.5px;color:var(--muted)}

/* 한 줄에 최대 세 장. 폭(--col)이 카드 수에 맞춰 줄어들므로 빈 칸이 남지 않는다. */
/* ‼ 예전엔 max-width:1052px 로 묶어 카드 세 장에 딱 맞췄는데, 화면이 그보다 넓으면
   **오른쪽이 세로로 통째로 비었다**(폴드 가로에서 그랬다).
   auto-fill 로 바꾸면 빈 칸을 자리로 남겨 두므로, 방이 하나여도 카드가 괴물처럼 커지지 않고
   화면이 넓어지면 넷째 칸이 생겨 폭을 다 쓴다. */
.rooms{display:grid;grid-template-columns:repeat(auto-fill,minmax(272px,1fr));gap:16px}
@media(max-width:1180px){.lobby{--cols:min(2,var(--n))}}
@media(max-width:660px){.lobby{--col:none}.rooms{grid-template-columns:minmax(0,1fr)}}
/* 파일 칩이 있는 카드와 없는 카드의 키가 달랐다 → 늘려서 맞추고 아래 줄만 바닥에 붙인다 */
.room-card{position:relative;display:flex;flex-direction:column;text-align:left;width:100%;background:var(--paper);
  border:1px solid var(--line);border-radius:16px;padding:18px;box-shadow:var(--shadow);
  transition:border-color .16s,transform .16s,box-shadow .16s}
.room-card:hover{border-color:var(--key);transform:translateY(-2px);
  box-shadow:0 1px 2px rgba(16,40,30,.05),0 8px 20px -6px rgba(16,40,30,.13)}
.room-card:active{transform:translateY(-1px) scale(.985)}
.room-card .rc-brand{font-size:16px;font-weight:900;letter-spacing:-.03em;display:block;margin-bottom:2px}
.room-card .rc-prod{font-size:13px;color:var(--ink2);display:block;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.room-card .rc-tags{display:flex;flex-wrap:wrap;gap:5px;margin:12px 0 14px}
.rc-tag{font-size:10.5px;font-weight:800;color:var(--key-deep);background:var(--key-tint);
  border:1px solid rgba(11,143,85,.18);border-radius:999px;padding:1px 8px}
.rc-tag.file{color:var(--ink2);background:var(--paper2);border-color:var(--line2);
  max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;direction:rtl;text-align:left}
.room-card .rc-foot{display:flex;align-items:center;gap:10px;font-size:11.5px;color:var(--muted);
  font-family:var(--mono);border-top:1px solid var(--line);padding-top:11px;
  margin-top:auto;font-variant-numeric:tabular-nums}
.room-card .rc-foot b{color:var(--ink2);font-weight:700}
.room-card .rc-kept{color:var(--keep)}
/* ── 골라서 지우기 ── */
.pickable{position:relative}
/* 체크칸은 늘 왼쪽에 있다 */
.pick{display:grid;position:absolute;place-items:center;width:34px;height:34px;
  border-radius:9px;cursor:pointer;transition:background-color .14s}
.pick:hover{background:var(--paper2)}
.pick input{width:16px;height:16px;margin:0;accent-color:var(--key-deep);cursor:pointer}

/* 줄로 된 것 — 줄 어디를 눌러도 골라진다. 그래서 빈 곳이 눌려도 이상하지 않다. */
.pick-row{cursor:pointer;border-radius:10px}
/* .mat-row / .tz 가 뒤에서 padding 을 통째로 다시 잡는다 → 두 클래스로 눌러 자리를 확보한다.
   안 그러면 체크칸이 글자 위로 겹쳐 앉는다. */
/* 고른 줄에 깔리는 초록 판이 글자에 딱 붙지 않게 좌우로 숨통을 준다 */
.mat-row.pick-row,.tz.pick-row{padding-left:13px;padding-right:38px}
.tzg-h.pick-row{padding-right:44px;border-radius:0}
.pick-row .pick{right:3px;top:50%;transform:translateY(-50%)}
.pick-row:hover{background:var(--paper2)}
.pick-row.picked{background:var(--key-tint)}

/* 카드 — 오른쪽 위. 카드 자체는 눌러서 여는 것이라 체크칸에서만 골라진다. */
.pick-card{padding-right:44px}
.pick-card .pick{right:8px;top:10px;opacity:.4;transition:opacity .14s,background-color .14s}
.pick-card:hover .pick,.pick-card .pick:focus-within,.pick-card.picked .pick{opacity:1}
.pick-card.picked{outline:2px solid var(--key);outline-offset:-2px}

/* 하나라도 고르면 위에 뜬다. 아무것도 안 골랐을 땐 자리도 차지하지 않는다. */
/* top 은 헤더(52px) 밑으로 — 10px 로 두면 스크롤할 때 검은 헤더 뒤로 숨는다 */
.selbar{display:none;grid-column:1/-1;align-items:center;gap:8px;
  position:sticky;top:62px;z-index:6;margin:0 0 14px;padding:8px 9px 8px 11px;
  border-radius:13px;background:var(--paper);border:1px solid var(--line2);
  box-shadow:0 1px 2px rgba(16,40,30,.05),0 10px 24px -10px rgba(16,40,30,.22)}
.selbar.on{display:flex;animation:riseIn .18s cubic-bezier(.2,0,0,1) both}
.sel-x{font-size:12px;font-weight:700;color:var(--muted);padding:7px 11px;
  border:1px solid var(--line);border-radius:9px;background:var(--paper);
  transition:color .14s,border-color .14s,background-color .14s,transform .12s}
.sel-x:hover{color:var(--ink);border-color:var(--line2);background:var(--paper2)}
.sel-x:active{transform:scale(.96)}
.sel-all{display:flex;align-items:center;gap:8px;cursor:pointer;padding:6px 8px;border-radius:9px;
  font-size:12.5px;font-weight:700;color:var(--ink2);transition:background-color .14s}
.sel-all:hover{background:var(--paper2)}
.sel-all input{width:16px;height:16px;margin:0;accent-color:var(--key-deep);cursor:pointer}
.selbar b{flex:1;font-size:12.5px;font-weight:800;color:var(--key-deep);font-variant-numeric:tabular-nums}
/* 지우기는 눈에 띄되 빨간 덩어리는 아니다 — 글자만 붉게, 누를 때 옅게 채워진다 */
.sel-go{font-size:12.5px;font-weight:800;color:var(--alert);background:var(--paper);padding:7px 13px;
  border:1px solid rgba(211,59,34,.32);border-radius:9px;font-variant-numeric:tabular-nums;
  transition:background-color .14s,border-color .14s,transform .12s}
.sel-go:hover{background:#FDF1EE;border-color:rgba(211,59,34,.6)}
.sel-go:active{transform:scale(.96)}
.sel-go:disabled{color:var(--muted);border-color:var(--line);background:var(--paper);
  opacity:.55;cursor:default;transform:none}

.askbox{position:fixed;z-index:151;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(440px,calc(100vw - 32px));max-height:80vh;overflow:auto;
  background:var(--paper);border:1px solid var(--line2);border-radius:18px;padding:20px;box-shadow:var(--shadow)}
.ask-h{margin:0 0 12px;font-size:16px;font-weight:900;letter-spacing:-.03em}
.ask-list{margin:0;padding:0 0 0 2px;list-style:none;font-size:13px;line-height:1.65;color:var(--ink2)}
.ask-list li{padding:6px 10px;border-radius:8px;background:var(--paper2);margin-bottom:4px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ask-list li.more{background:none;color:var(--muted);font-size:12px;padding-left:2px}
.ask-note{margin:12px 0 0;font-size:12.5px;color:var(--muted)}
.ask-f{display:flex;gap:8px;justify-content:flex-end;margin-top:16px}
.ask-f .sel-x{color:var(--muted);border-color:var(--line2)}
.ask-f .sel-x:hover{color:var(--ink);border-color:var(--ink2)}
.ask-go{font-size:13px;font-weight:800;color:#fff;background:var(--alert);padding:9px 18px;border-radius:10px;
  transition:background-color .14s,transform .12s}
.ask-go:hover{background:#B3311C}
.ask-go:active{transform:scale(.96)}
.ask-go:disabled{opacity:.6}

.rooms-empty{grid-column:1/-1;border:1.5px dashed var(--line2);border-radius:16px;
  padding:40px 20px;text-align:center;color:var(--muted);font-size:13.5px;line-height:1.8;background:var(--paper2)}
.rooms-empty b{color:var(--ink2)}


/* ── 왼쪽 탭 ── */
/* 탭(190) + 안쪽 여백 + 카드 세 장(1052)에 딱 맞는 폭. 예전엔 1720 이라 오른쪽에 큰 빈 자리가 남았다. */
.lobbywrap{display:grid;grid-template-columns:190px minmax(0,1fr);gap:0}
.ltabs{display:flex;flex-direction:column;gap:3px;min-height:calc(100vh - var(--head));
  padding:clamp(20px,4vw,40px) 0 24px clamp(14px,2vw,20px)}
/* ‼ 이 미디어 쿼리는 반드시 위 기본 규칙 **뒤에** 있어야 한다.
   앞에 있었더니 우선순위가 같아 나중에 오는 flex-direction:column 이 이겨서,
   폰에서 탭 다섯 개가 세로로 쌓여 화면 절반을 먹고 있었다. */
@media(max-width:820px){
  .lobbywrap{grid-template-columns:1fr}
  /* ‼ min-height 를 같이 풀어야 한다. 세로로 세울 때 쓰던 100vh 가 그대로 남아 있으면
     가로 줄이 화면 높이를 통째로 먹고, 회의실 목록이 한 화면 아래로 밀려난다
     (폴드 접은 화면에서 목록이 통째로 안 보였다). align-items 도 같이 준다 —
     안 그러면 켜진 탭 하나가 세로로 길게 늘어난다. */
  .ltabs{flex-direction:row;align-items:center;min-height:0;overflow-x:auto;padding:12px;scrollbar-width:none}
  .ltabs::-webkit-scrollbar{display:none}
  .ltab{flex:none}
}
.ltab{text-align:left;font-size:13.5px;font-weight:800;color:var(--muted);background:none;border:0;
  border-radius:10px;padding:9px 12px;text-decoration:none;white-space:nowrap;transition:all .13s}
.ltab:hover{background:var(--paper);color:var(--ink)}
.ltab.on{background:var(--key-dark);color:#fff}
/* 내 자료는 일하는 탭이 아니라 내가 적어 둔 자료다 — 목록 **맨 아래**로 떨어뜨린다.
   (탭 줄이 세로 flex 라 margin-top:auto 면 바닥에 붙는다.) */
.ltab.link{font-weight:700;color:var(--muted);margin-top:auto;border-top:1px solid var(--line);
  padding-top:14px;border-radius:0}
.ltab.link.on{background:var(--key-dark);color:#fff;border-radius:10px}
@media(max-width:820px){ .ltab.link{margin-top:0;margin-left:auto;border-top:0;padding-top:9px} }
.ltab.link em{font-style:normal;font-size:11px;color:#A8B8B1}
.lobby{padding-left:clamp(14px,2vw,28px)}

.panel-mat,.panel-taste{background:var(--paper);border:1px solid var(--line);border-radius:16px;
  padding:20px;box-shadow:var(--shadow)}
.mat-h{font-size:13px;font-weight:900;color:var(--ink2);margin:0 0 4px}
.mat-sub{font-size:12.5px;color:var(--muted);margin:0 0 16px;line-height:1.7}
/* 글자수·[읽기]·체크칸이 서로 다른 높이에 떠 있었다 — baseline 정렬이라 체크칸만 아래로 처졌다.
   가운데로 맞춘다. 제목은 여러 줄이 될 수 있으니 제목만 따로 위로 붙인다. */
.mat-row{display:flex;gap:12px;align-items:center;padding:11px 0;border-top:1px solid var(--line)}
.mat-row b{align-self:center}
.mat-row b{font-size:13.5px;font-weight:800;flex:1;min-width:0}
.mat-row span{font-size:11.5px;color:var(--muted);font-family:var(--mono);flex:none}
.mat-row em{display:block;font-style:normal;font-size:12px;color:var(--muted);font-weight:500;margin-top:2px}
.mat-tot{margin-top:14px;padding-top:14px;border-top:2px solid var(--line);font-size:13px;font-weight:800}
/* 이유 하나 = 한 덩어리. 펼쳐야 그 안의 발언이 나온다 */
.tz-list{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.tzg{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--paper)}
.tzg.up{border-color:rgba(11,143,85,.3)}
.tzg-h{display:flex;align-items:center;gap:10px;padding:12px 14px;position:relative;cursor:pointer}
.tzg-h>b{flex:1;font-size:13.5px;font-weight:800;color:var(--alert);line-height:1.5}
.tzg.up .tzg-h>b{color:var(--key-deep)}
.tzg-n{font-size:11.5px;font-weight:800;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.tzg-more{font-size:11.5px;font-weight:700;color:var(--muted);padding:4px 9px;white-space:nowrap;
  border:1px solid var(--line);border-radius:7px;background:var(--paper);
  transition:color .14s,border-color .14s,transform .12s}
.tzg-more:hover{color:var(--ink);border-color:var(--line2)}
.tzg-more:active{transform:scale(.96)}
.tzg-body{border-top:1px solid var(--line);padding:0 14px;background:var(--paper2)}
.tzg-body .tz:first-child{border-top:0}

.pager{display:flex;align-items:center;gap:5px;margin-top:18px;flex-wrap:wrap}
.pager-info{flex:1;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.pg{min-width:32px;height:32px;font-size:12.5px;font-weight:700;color:var(--ink2);
  border:1px solid var(--line);border-radius:9px;background:var(--paper);
  transition:color .14s,border-color .14s,background-color .14s,transform .12s}
.pg:hover{border-color:var(--line2);background:var(--paper2)}
.pg:active{transform:scale(.96)}
.pg.on{color:#fff;background:var(--ink);border-color:var(--ink)}

.tz{padding:11px 0;border-top:1px solid var(--line);font-size:13px}
.tz b{color:var(--alert);font-weight:800}
.tz.up b{color:var(--key-deep)}
.tz p{margin:3px 0 0;font-size:12.5px;color:var(--muted);line-height:1.6;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}


/* ── 첫 로딩 — 로고를 키컬러로 한 번 보여준다 (말랑 앱과 같은 결) ── */
/* 배경은 살짝 비치게 — 뒤 화면이 흐릿하게 보인다 */
/* 가운데만 진하고 바깥은 투명 — 뒤 화면이 흐릿하게 비친다.
   끊김의 주범은 블러가 아니라 로고에 얹었던 그림자 4겹이었다(한 겹으로 줄임). 블러는 다시 넣되
   반경을 낮춰 둔다. 로고가 멈춰 있는 동안엔 다시 그릴 일이 없어 값이 싸다. */
.splash{position:fixed;inset:0;z-index:200;pointer-events:none;will-change:opacity;
  backdrop-filter:blur(7px) saturate(1.1);-webkit-backdrop-filter:blur(7px) saturate(1.1);
  background:
    radial-gradient(40vmax 28vmax at 50% 50%,
      rgba(3,14,10,.86) 0%,
      rgba(3,14,10,.70) 20%,
      rgba(3,14,10,.46) 40%,
      rgba(4,18,12,.24) 62%,
      rgba(4,18,12,.08) 82%,
      rgba(4,18,12,0) 100%),
    radial-gradient(72vmax 72vmax at 50% 50%, rgba(4,18,12,.13), rgba(4,18,12,0) 70%)}
/* 가운데에서 시작해 헤더 로고 자리로 날아가 안착한다.
   그림자는 한 겹만. 네 겹을 얹은 채로 scale 을 돌리면 프레임마다 전부 다시 그린다. */
.splash-mark{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(320px,50vw);height:66px;transform-origin:50% 50%;
  background:var(--key);will-change:transform,opacity;
  -webkit-mask:center/contain no-repeat url("/assets/wordmark-alpha.png");
  mask:center/contain no-repeat url("/assets/wordmark-alpha.png");
  filter:drop-shadow(0 5px 16px rgba(4,18,12,.5))}
/* 로고 뒤 은은한 빛 — 따로 깔아 두면 로고가 움직여도 이 판은 다시 그리지 않는다 */
.splash::after{content:'';position:absolute;left:50%;top:50%;width:min(420px,66vw);height:150px;
  transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(closest-side,rgba(70,215,146,.30),rgba(70,215,146,0))}

/* 로고가 비켜난 자리로 본문이 차례로 올라온다 — 한 덩어리로 띄우면 그냥 깜빡인 것처럼 보인다 */
@keyframes riseIn{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
.intro .lobby-h{animation:riseIn .40s cubic-bezier(.2,0,0,1) 40ms both}
.intro .ltabs{animation:riseIn .40s cubic-bezier(.2,0,0,1) 0ms both}
.intro .room-card{animation:riseIn .38s cubic-bezier(.2,0,0,1) both}
.intro .room-card:nth-child(1){animation-delay:120ms}
.intro .room-card:nth-child(2){animation-delay:170ms}
.intro .room-card:nth-child(3){animation-delay:220ms}
.intro .room-card:nth-child(n+4){animation-delay:260ms}

@media (prefers-reduced-motion: reduce){
  .splash{display:none}
  .intro .lobby-h,.intro .ltabs,.intro .room-card{animation:none}}

/* 컨셉안 전문 보기 */
.cdim{position:fixed;inset:0;z-index:150;background:rgba(11,21,18,.4)}
.cbox{position:fixed;z-index:151;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(860px,calc(100vw - 32px));max-height:86vh;display:flex;flex-direction:column;
  background:var(--paper);border:1px solid var(--line2);border-radius:16px;box-shadow:var(--shadow)}
.cbox-h{display:flex;gap:8px;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line)}
.cbox-h b{flex:1;font-size:14px;font-weight:900}
/* 모델이 주는 건 마크다운이다. 예전엔 <pre> 로 그대로 부어서 ** 가 글자로 보였다. */
.cbox-body{margin:0;padding:22px 26px 30px;overflow:auto;word-break:keep-all;
  font-family:var(--sans);font-size:14px;line-height:1.85;color:var(--ink);text-wrap:pretty}
.cbox-body>*:first-child{margin-top:0}
.cbox-body p{margin:0 0 12px}
.cbox-body h2{font-size:19px;font-weight:900;letter-spacing:-.03em;margin:28px 0 12px}
.cbox-body h3{font-size:15.5px;font-weight:900;letter-spacing:-.02em;margin:26px 0 10px;
  padding-left:11px;border-left:3px solid var(--key);text-wrap:balance}
.cbox-body h4{font-size:14px;font-weight:800;color:var(--key-deep);margin:18px 0 7px;text-wrap:balance}
.cbox-body ul,.cbox-body ol{margin:0 0 12px;padding-left:20px}
.cbox-body li{margin:0 0 5px;padding-left:2px}
.cbox-body li::marker{color:var(--muted)}
.cbox-body b{font-weight:800}
.cbox-body code{font-family:var(--mono);font-size:12.5px;background:var(--paper2);
  border:1px solid var(--line);border-radius:5px;padding:1px 5px}
.cbox-body hr{border:0;border-top:1px solid var(--line);margin:24px 0}
.cbox-body em.note{font-style:normal;display:block;font-size:13px;color:var(--ink2);
  background:var(--paper2);border-radius:9px;padding:9px 12px;margin:0 0 12px}

/* 재료 읽기 버튼 — 목록에서 바로 원문을 연다 */
.mat-read{font-size:11.5px;font-weight:700;color:var(--muted);padding:4px 10px;white-space:nowrap;
  border:1px solid var(--line);border-radius:7px;background:var(--paper);margin-left:10px;
  transition:color .14s,border-color .14s,background-color .14s,transform .12s}
.mat-read:hover{color:var(--key-deep);border-color:var(--key);background:var(--key-tint)}
.mat-read:active{transform:scale(.96)}
/* 비트 다이어그램처럼 줄 정렬이 뜻인 블록 — 접히지 않게 가로로만 흐르게 둔다 */
.cbox-body .md-pre{margin:0 0 16px;padding:14px 16px;border-radius:10px;
  background:var(--paper2);border:1px solid var(--line);
  font-family:var(--mono);font-size:12px;line-height:1.75;color:var(--ink2);
  white-space:pre;overflow-x:auto;word-break:normal}