/* =====================================================================
   liquid.css — Pigent 리퀴드 글래스 레이어
   ---------------------------------------------------------------------
   기존 마크업을 그대로 두고 겉모습만 다시 입힙니다. 항상 마지막에 불러오세요.

   유리의 구성 요소 네 가지
     1) 배경 굴절   backdrop-filter 의 blur + saturate + brightness
     2) 유리 몸통   아주 옅은 흰색 그라데이션 (위가 밝고 아래가 어두움)
     3) 반사 림     위쪽 안쪽 테두리의 밝은 선 + 바깥 실루엣
     4) 부유감      아래로 길게 퍼지는 부드러운 그림자
   ===================================================================== */

/* 색은 glass.css 가 정합니다. 여기서는 이름만 이어 붙여, 이 파일의
   오래된 규칙들도 라이트/다크를 함께 따라가게 합니다.
   (이 파일이 가장 마지막에 실리기 때문에, 여기서 검정을 박아두면
    앞의 설정을 전부 덮어써서 라이트 모드가 통째로 무시됐습니다) */
:root {
  /* 바탕 */
  --lq-void:      var(--bg);
  --lq-deep:      var(--bg-2);

  /* 유리 */
  --lq-tint:      var(--g-tint);
  --lq-tint-2:    var(--g-tint-2);
  --lq-rim:       var(--g-rim);
  --lq-rim-soft:  var(--g-spec-soft);
  --lq-hairline:  var(--g-line);

  /* 강조 */
  --lq-iris:      var(--iris);
  --lq-iris-lift: var(--iris);
  --lq-brand:     var(--brand);
  --lq-brand-lift:var(--brand);
  --lq-rose:      var(--rose);
  --lq-amber:     var(--amber);

  /* 글자 */
  --lq-text:      var(--ink);
  --lq-text-2:    var(--ink-2);
  --lq-text-3:    var(--ink-3);

  /* 곡률 — 애플은 캡슐에 가깝게 큽니다 */
  --lq-r-xs: 12px;
  --lq-r-sm: 16px;
  --lq-r-md: 22px;
  --lq-r-lg: 28px;
  --lq-r-xl: 34px;
  --lq-r-pill: 999px;

  /* 움직임 */
  --lq-spring: cubic-bezier(.16, 1, .3, 1);
  --lq-swift:  cubic-bezier(.22, .61, .36, 1);

  /* 유리 뒤에 거는 필터 */
  --lq-blur:   blur(28px) saturate(180%) brightness(1.08);
  --lq-blur-s: blur(16px) saturate(160%) brightness(1.06);
}

/* ===================== 바탕 ===================== */

body {
  background: var(--lq-void);
  color: var(--lq-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* 유리가 굴절시킬 대상이 있어야 질감이 살아납니다 */
.env,
body::before {
  content: '';
  position: fixed;
  inset: 0;
  /* 본문 뒤로 보냅니다. 0 으로 두면 자리 지정이 없는 페이지(약관 등)의
     글자를 이 레이어가 덮어버려 화면이 비어 보입니다. */
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(58vw 46vw at 6% -10%,  rgba(0, 169, 79, .20),  transparent 62%),
    radial-gradient(52vw 44vw at 98% 4%,   rgba(124, 107, 255, .24), transparent 64%),
    radial-gradient(46vw 40vw at 50% 108%, rgba(255, 107, 150, .13), transparent 62%),
    var(--lq-void);
}
.env { background-image: none; }

::selection { background: rgba(124, 107, 255, .34); color:var(--ink); }

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  border-radius: var(--lq-r-pill);
  background: rgba(var(--surf-rgb),.14);
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(var(--spec-rgb),.24); background-clip: padding-box; }

:focus-visible {
  outline: 2px solid var(--lq-iris-lift);
  outline-offset: 3px;
  border-radius: var(--lq-r-xs);
}

/* ===================== 유리 몸통 ===================== */

.lg, .lgt, .modal, .sheet, .card, .panel,
.pgs-panel, .pgd-box, .pgt-box {
  /* position 은 여기서 정하지 않습니다.
     .sheet 나 .toast 처럼 원래 화면에 고정되는 요소까지 흐름으로 끌어내려
     페이지 맨 위에 빈칸을 만든 적이 있어요. 아래에서 따로 지정합니다. */
  border-radius: var(--lq-r-lg);
  background:
    linear-gradient(168deg, var(--lq-tint) 0%, var(--lq-tint-2) 58%, rgba(var(--surf-rgb),.05) 100%),
    rgba(var(--base-rgb),.58);
  backdrop-filter: var(--lq-blur);
  -webkit-backdrop-filter: var(--lq-blur);
  box-shadow:
    inset 0 1.5px 0 var(--lq-rim),
    inset 0 -1px 0 rgba(var(--surf-rgb),.08),
    inset 0 0 0 1px rgba(var(--surf-rgb),.07),
    0 26px 60px -22px rgba(0, 0, 0, .82),
    0 4px 14px -6px rgba(0, 0, 0, .5);
  border: 0;
}

/* 겹침 레이어를 얹으려면 자리 기준이 필요합니다.
   단, 이미 fixed·absolute·sticky 인 요소는 건드리지 않습니다. */
.lg:not(.sheet):not(.toast):not(.scrim),
.lgt:not(.sheet):not(.toast):not(.scrim),
.modal, .card, .panel {
  position: relative;
}

/* 원래 화면에 고정되는 요소는 유리 규칙보다 우선해서 지킵니다 */
.sheet, .toast, .scrim, .dockwrap {
  position: fixed;
}

/* 유리 윗면에 도는 빛 — 아주 옅게 */
.lg:not(.sheet):not(.toast)::after, .modal::after, .panel::after,
.pgs-panel::after, .pgd-box::after, .pgt-box::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(105deg,
    transparent 26%,
    rgba(var(--surf-rgb),.07) 46%,
    transparent 62%);
  opacity: .9;
}

/* 뒤에 굴절시킬 게 없는 환경(사파리 구버전 등) 대비 */
@supports not (backdrop-filter: blur(1px)) {
  .lg, .lgt, .modal, .sheet, .card, .panel,
  .pgs-panel, .pgd-box, .pgt-box {
    background: linear-gradient(168deg, rgba(var(--base-rgb),.97), rgba(var(--base-rgb),.97));
  }
}

/* ===================== 컨트롤 ===================== */

.pill, .btn, button.submit,
.pgs-btn, .pgx-b, .pgb-b, .pgn-b, .pgd-b, .pga-b, .pgt-b {
  border-radius: var(--lq-r-pill);
  font-weight: 700;
  letter-spacing: -.015em;
  transition: transform .42s var(--lq-spring), filter .24s var(--lq-swift),
              background .26s var(--lq-swift);
}
.pill:active, .btn:active, button.submit:active,
.pgs-btn:active, .pgx-b:active, .pgb-b:active,
.pgn-b:active, .pgd-b:active, .pga-b:active, .pgt-b:active {
  transform: scale(.965);
}

/* 밝은 버튼 — 유리 위에 얹힌 아크릴 조각처럼 */
.pill-solid, .pgs-send, .pgx-b.primary, .pgb-b.primary,
.pgn-b.primary, .pga-b.primary, .pgd-b, .pgt-b.agree, .pgs-btn {
  background: linear-gradient(168deg, #FFFFFF 0%, #E4E7F0 100%);
  color:var(--solid-ink);
  box-shadow:
    inset 0 1px 0 rgba(var(--spec-rgb),.95),
    0 8px 22px -10px rgba(0, 0, 0, .7);
}
.pill-solid:hover, .pgx-b.primary:hover, .pgb-b.primary:hover,
.pgn-b.primary:hover, .pga-b.primary:hover, .pgd-b:hover:not(:disabled) {
  filter: brightness(1.05);
}

/* 유리 버튼 */
.pill-ghost, .pgs-x, .pgs-back, .pgs-act, .pgx-b.ghost,
.pgb-b.ghost, .pgn-b.ghost, .pga-b.ghost, .pgt-b.no, .icon-btn {
  background: rgba(var(--surf-rgb),.09);
  backdrop-filter: var(--lq-blur-s);
  -webkit-backdrop-filter: var(--lq-blur-s);
  box-shadow:
    inset 0 1px 0 rgba(var(--spec-rgb),.3),
    inset 0 0 0 1px rgba(var(--surf-rgb),.07);
  color: var(--lq-text);
}
.pill-ghost:hover, .pgs-x:hover, .pgs-back:hover, .pgs-act:hover,
.pgx-b.ghost:hover, .pgb-b.ghost:hover, .pgn-b.ghost:hover {
  background: rgba(var(--surf-rgb),.16);
}

/* 입력 */
/* 색은 전환 대상에서 뺐습니다 — 이 파일 전체에 걸친 규칙입니다.
   값이 커스텀 속성에서 오는 속성(background: rgba(var(--surf-rgb),…) 등)을
   transition 에 걸어두면, 테마가 바뀌어 토큰이 달라져도 브라우저가 그 속성을
   옛 값에 영구히 붙들어 둡니다. 기다려도 돌아오지 않습니다.
   이 규칙은 특이도가 (0,1,1) 이라 클래스 하나짜리 컴포넌트 규칙(0,1,0)을
   이깁니다. 그래서 어둡게→밝게로 바꾸면 앱 안의 입력칸이 전부 어두운
   배경을 그대로 들고 있었습니다. 남길 움직임 속성이 없어 none 입니다. */
input[type="text"], input[type="email"], input[type="password"],
input[type="search"], input[type="url"], select, textarea,
.pgs-in, .pgx-bar input, .pgb-in, .pgn-in, .pgd-note, .pgl-acc {
  border-radius: var(--lq-r-sm);
  background: rgba(var(--surf-rgb),.06);
  border: 1px solid rgba(var(--surf-rgb),.11);
  color: var(--lq-text);
  transition: border-color .24s var(--lq-swift), background .24s var(--lq-swift);
}
input:focus, select:focus, textarea:focus,
.pgs-in:focus, .pgb-in:focus, .pgn-in:focus, .pgd-note:focus {
  border-color: rgba(179, 168, 255, .62);
  background: rgba(var(--surf-rgb),.1);
  outline: none;
  box-shadow: 0 0 0 4px rgba(124, 107, 255, .14);
}

/* ===================== 독 · 상단바 ===================== */

.dock {
  border-radius: var(--lq-r-pill);
  background:
    linear-gradient(168deg, rgba(var(--surf-rgb),.13), rgba(var(--surf-rgb),.04)),
    rgba(var(--base-rgb),.5);
  backdrop-filter: var(--lq-blur);
  -webkit-backdrop-filter: var(--lq-blur);
  box-shadow:
    inset 0 1.5px 0 rgba(var(--spec-rgb),.7),
    inset 0 -1px 0 rgba(var(--surf-rgb),.1),
    inset 0 0 0 1px rgba(var(--surf-rgb),.08),
    0 20px 44px -16px rgba(0, 0, 0, .8);
}

/* 독 안에서 움직이는 렌즈 — 유리 알갱이가 미끄러지듯 */
.dock-lens {
  border-radius: var(--lq-r-pill);
  pointer-events: none;
  background: linear-gradient(168deg, rgba(var(--spec-rgb),.3), rgba(var(--surf-rgb),.1));
  backdrop-filter: blur(2px) brightness(1.4) saturate(1.6);
  -webkit-backdrop-filter: blur(2px) brightness(1.4) saturate(1.6);
  box-shadow:
    inset 0 1.5px 0 rgba(var(--spec-rgb),.82),
    inset 0 -1px 0 rgba(var(--spec-rgb),.24),
    0 6px 18px -6px rgba(0, 0, 0, .6);
  transition:
    transform .58s var(--lq-spring),
    width .58s var(--lq-spring),
    opacity .34s var(--lq-swift);
}

.topbar {
  background: linear-gradient(180deg, rgba(var(--base-rgb),.82), rgba(var(--base-rgb),.48));
  backdrop-filter: var(--lq-blur-s);
  -webkit-backdrop-filter: var(--lq-blur-s);
  border-bottom: 1px solid var(--lq-hairline);
}

/* ===================== 사이드바 ===================== */

.rail {
  background: linear-gradient(168deg, rgba(var(--surf-rgb),.05), rgba(var(--surf-rgb),.015));
  backdrop-filter: var(--lq-blur);
  -webkit-backdrop-filter: var(--lq-blur);
  border-right: 1px solid var(--lq-hairline);
}

.nav-item {
  border-radius: var(--lq-r-sm);
  font-weight: 600;
  letter-spacing: -.015em;
  transition: none;   /* 색 전환 금지 — 위 '입력' 항목의 설명과 같은 이유 */
}
.nav-item:hover { background: rgba(var(--surf-rgb),.07); }
.nav-item[aria-current="page"] {
  background: linear-gradient(168deg, rgba(124,107,255,.26), rgba(124,107,255,.13));
  color:var(--ink);
  box-shadow:
    inset 0 1px 0 rgba(var(--spec-rgb),.26),
    inset 0 0 0 1px rgba(124, 107, 255, .3);
}
.nav-item[hidden], [hidden] { display: none !important; }

.rail-foot .me .av {
  border-radius: var(--lq-r-pill);
  box-shadow: inset 0 1px 0 rgba(var(--spec-rgb),.34), 0 4px 12px -4px rgba(0, 0, 0, .6);
}

.signout {
  border-radius: var(--lq-r-sm);
  background: rgba(255, 107, 150, .12);
  color:var(--rose);
  box-shadow: inset 0 0 0 1px rgba(255, 107, 150, .22);
  transition: none;   /* 색 전환 금지 — 위 '입력' 항목의 설명과 같은 이유 */
}
.signout:hover { background: rgba(255, 107, 150, .2); }

/* ===================== 채팅 ===================== */

.msg .bubble, .msg > div {
  letter-spacing: -.01em;
}

.msg.user .bubble, .pgs-mine {
  border-radius: var(--lq-r-md);
  border-bottom-right-radius: var(--lq-r-xs);
  background: linear-gradient(168deg, #8878FF, #6355E0);
  box-shadow:
    inset 0 1px 0 rgba(var(--spec-rgb),.28),
    0 10px 26px -12px rgba(99, 85, 224, .8);
}

.msg.assistant .bubble, .pgs-theirs {
  border-radius: var(--lq-r-md);
  border-bottom-left-radius: var(--lq-r-xs);
  background: linear-gradient(168deg, rgba(var(--surf-rgb),.085), rgba(var(--surf-rgb),.035));
  backdrop-filter: var(--lq-blur-s);
  -webkit-backdrop-filter: var(--lq-blur-s);
  box-shadow:
    inset 0 1px 0 rgba(var(--spec-rgb),.22),
    inset 0 0 0 1px rgba(var(--surf-rgb),.06);
}

.composer {
  border-radius: var(--lq-r-xl);
  background:
    linear-gradient(168deg, rgba(var(--surf-rgb),.11), rgba(var(--surf-rgb),.035)),
    rgba(var(--base-rgb),.52);
  backdrop-filter: var(--lq-blur);
  -webkit-backdrop-filter: var(--lq-blur);
  box-shadow:
    inset 0 1.5px 0 rgba(var(--spec-rgb),.58),
    inset 0 0 0 1px rgba(var(--surf-rgb),.07),
    0 22px 50px -20px rgba(0, 0, 0, .8);
  transition: box-shadow .4s var(--lq-swift);
}
.composer:focus-within {
  box-shadow:
    inset 0 1.5px 0 rgba(var(--spec-rgb),.7),
    inset 0 0 0 1px rgba(124, 107, 255, .3),
    0 22px 50px -20px rgba(0, 0, 0, .8),
    0 0 0 4px rgba(124, 107, 255, .12);
}

.round, .composer button {
  border-radius: var(--lq-r-pill);
  transition: transform .42s var(--lq-spring), filter .24s var(--lq-swift);
}
.round:active, .composer button:active { transform: scale(.9); }

pre {
  border-radius: var(--lq-r-sm);
  background: rgba(0, 0, 0, .36);
  box-shadow: inset 0 0 0 1px rgba(var(--surf-rgb),.07);
}

/* ===================== 타이포 ===================== */

h1, .view-head h1 { font-weight: 780; letter-spacing: -.035em; line-height: 1.16; }
h2 { font-weight: 750; letter-spacing: -.028em; }
h3 { font-weight: 720; letter-spacing: -.022em; }
.view-head p, .note, .sub { color: var(--lq-text-2); letter-spacing: -.008em; }

/* ===================== 위젯 ===================== */

.pgs-fab {
  border-radius: var(--lq-r-pill);
  background:
    linear-gradient(168deg, rgba(var(--spec-rgb),.22), rgba(var(--surf-rgb),.06)),
    linear-gradient(150deg, var(--lq-iris), var(--lq-brand));
  backdrop-filter: blur(6px) saturate(160%);
  -webkit-backdrop-filter: blur(6px) saturate(160%);
  box-shadow:
    inset 0 1.5px 0 rgba(var(--spec-rgb),.58),
    inset 0 0 0 1px rgba(var(--surf-rgb),.16),
    0 16px 36px -12px rgba(0, 0, 0, .74);
}

.pgs-card, .pgs-q, .pgs-fix, .pgx-row, .pgn-card, .pgd-item,
.pgb-item, .pgx-diag, .pgn-q {
  border-radius: var(--lq-r-md);
  background: linear-gradient(168deg, rgba(var(--surf-rgb),.07), rgba(var(--surf-rgb),.028));
  box-shadow:
    inset 0 1px 0 rgba(var(--surf-rgb),.16),
    inset 0 0 0 1px rgba(var(--surf-rgb),.05);
  border: 0;
  transition: background .26s var(--lq-swift), transform .42s var(--lq-spring);
}
.pgs-card:hover, .pgs-q:hover, .pgn-card:hover,
.pgd-item:hover, .pgx-row:hover, .pgx-diag:hover {
  background: linear-gradient(168deg, rgba(var(--surf-rgb),.12), rgba(var(--surf-rgb),.05));
}

.pgs-ico, .pgn-tab, .pgd-check, .pgl-av {
  border-radius: var(--lq-r-sm);
}
.pgl-av, .pgd-agree .pgd-check { border-radius: var(--lq-r-pill); }

.pgd-item.on, .pgt-agree.on, .pgd-agree.on, .pgn-tab.on {
  box-shadow:
    inset 0 1px 0 rgba(var(--spec-rgb),.24),
    inset 0 0 0 1px rgba(124, 107, 255, .38);
}

/* 마크다운 */
.md-code { border-radius: 7px; background: rgba(var(--surf-rgb),.11); }
.md-table { border-radius: var(--lq-r-xs); overflow: hidden; }
.md-quote { border-left-color: rgba(124, 107, 255, .58); }

/* ===================== 움직임 ===================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ===================== 좁은 화면 ===================== */

@media (max-width: 640px) {
  :root {
    --lq-r-lg: 24px;
    --lq-r-xl: 28px;
    /* 모바일에서 blur 를 낮춰 스크롤을 가볍게 */
    --lq-blur:   blur(20px) saturate(170%) brightness(1.07);
    --lq-blur-s: blur(12px) saturate(155%);
  }
  h1, .view-head h1 { letter-spacing: -.03em; }
}