/* ===================================================================== glass.css — Pigent 공용 리퀴드 글래스 --------------------------------------------------------------------- 모든 페이지가 이 한 장을 먼저 읽고, 각자 필요한 것만 위에 얹습니다. 유리 한 장을 만드는 다섯 겹 1) 굴절 backdrop-filter 안의 SVG 변위 필터. 뒤 배경이 실제로 휩니다. 2) 흐림 blur + saturate. 뒤가 비치되 글자는 읽히도록. 3) 색 유리 자체의 옅은 틴트. 위가 밝고 아래가 어두운 기울기. 4) 테두리 conic-gradient 로 만든 1px 굴절 테. 각도마다 밝기가 다릅니다. 5) 정반사 위쪽 모서리의 흰 선과, 안쪽 바닥의 은은한 되비침. 라이트/다크 기기 설정을 따르고, 로 덮어쓸 수 있습니다. 검정만 쓰지 않습니다. 라이트에서는 흰 유리가 밝은 배경 위에 뜹니다. 읽기 쉬움이 먼저입니다 유리는 배경이지 주인공이 아닙니다. 글자 대비는 어느 모드에서도 WCAG AA 를 넘도록 --ink 계열을 따로 잡아뒀습니다. ===================================================================== */ /* --------------------------------------------------------------------- 라이트 / 다크 기기 설정을 따르고, 로 덮어쓸 수 있습니다. 예전 스타일시트들은 rgba(255,255,255,…) 와 #fff 를 200 곳 가까이 직접 적어 두어서 라이트 모드가 아예 불가능했습니다. 그 값들을 세 갈래로 나눠 토큰으로 옮겼습니다. --surf-rgb 표면·테두리 → 모드에 따라 뒤집힙니다 --spec-rgb 정반사 하이라이트 → 두 모드 모두 흰색 (유리의 성질) --base-rgb 유리 밑판 → 모드에 따라 뒤집힙니다 알파 값은 하나도 건드리지 않아서, 다크 모드 겉모습은 그대로입니다. --------------------------------------------------------------------- */ @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { color-scheme: light; --surf-rgb: 10, 12, 18; --base-rgb: 252, 253, 255; --spec-rgb: 255, 255, 255; --solid-a: #14161F; --solid-b: #2A2E3D; --solid-ink: #FFFFFF; --bg: #EEF1F7; --bg-2: #F7F9FC; --ink: #0A0C12; --ink-2: rgba(10,12,18,.66); --ink-3: rgba(10,12,18,.44); --ink-4: rgba(10,12,18,.22); --g-tint: rgba(255,255,255,.62); --g-tint-2: rgba(255,255,255,.42); --g-tint-hi: rgba(255,255,255,.86); --g-line: rgba(10,12,18,.09); --g-spec: rgba(255,255,255,.95); --g-spec-soft: rgba(255,255,255,.55); --g-rim: rgba(255,255,255,.75); --g-shadow: 0 24px 60px -22px rgba(12,18,40,.28), 0 3px 10px -3px rgba(12,18,40,.14); --g-shadow-sm: 0 8px 24px -12px rgba(12,18,40,.24); --g-blur: 26px; --g-sat: 180%; --g-bright: 1.06; --brand: #00934A; --brand-ink: #FFFFFF; --iris: #5B4BD6; --iris-soft: rgba(91,75,214,.12); --cyan: #0E93A8; --amber: #B5720A; --rose: #C8305C; --ok: #12A150; --warn: #C77A05; --down: #D93552; --maint: #2E6FD4; --aura-1: rgba(0,147,74,.16); --aura-2: rgba(91,75,214,.18); --aura-3: rgba(14,147,168,.14); } } :root[data-theme="light"] { color-scheme: light; /* 표면·테두리용 기준색. 예전 스타일시트 곳곳의 rgba(255,255,255,α) 를 rgba(var(--surf-rgb),α) 로 바꿔 두면 알파는 그대로 둔 채 밝기만 모드에 따라 뒤집힙니다. 라이트에서는 어두운 잉크가 표면을 만듭니다. */ --surf-rgb: 10, 12, 18; /* 유리 밑에 깔리는 불투명 판. 뒤가 너무 훤히 비쳐 글자가 읽히지 않을 때 받쳐주는 층입니다. */ --base-rgb: 252, 253, 255; /* 정반사는 두 모드 모두 흰색입니다. 실제 유리도 밝은 곳에서 흰 하이라이트가 생기지, 검은 하이라이트가 생기지는 않아요. */ --spec-rgb: 255, 255, 255; /* 가장 강한 버튼. 다크에서는 흰 알약이, 라이트에서는 검은 알약이 배경에서 가장 멀리 떨어져 눈에 먼저 들어옵니다. */ --solid-a: #14161F; --solid-b: #2A2E3D; --solid-ink: #FFFFFF; --bg: #EEF1F7; --bg-2: #F7F9FC; --ink: #0A0C12; --ink-2: rgba(10,12,18,.66); --ink-3: rgba(10,12,18,.44); --ink-4: rgba(10,12,18,.22); /* 유리 재질 */ --g-tint: rgba(255,255,255,.62); --g-tint-2: rgba(255,255,255,.42); --g-tint-hi: rgba(255,255,255,.86); --g-line: rgba(10,12,18,.09); --g-spec: rgba(255,255,255,.95); --g-spec-soft: rgba(255,255,255,.55); --g-rim: rgba(255,255,255,.75); --g-shadow: 0 24px 60px -22px rgba(12,18,40,.28), 0 3px 10px -3px rgba(12,18,40,.14); --g-shadow-sm: 0 8px 24px -12px rgba(12,18,40,.24); --g-blur: 26px; --g-sat: 180%; --g-bright: 1.06; /* 강조색 — 두 모드에서 대비가 유지되는 값만 씁니다 */ --brand: #00934A; --brand-ink: #FFFFFF; --iris: #5B4BD6; --iris-soft: rgba(91,75,214,.12); --cyan: #0E93A8; --amber: #B5720A; --rose: #C8305C; --ok: #12A150; --warn: #C77A05; --down: #D93552; --maint: #2E6FD4; /* 배경 광원 — 유리가 비출 대상 */ --aura-1: rgba(0,147,74,.16); --aura-2: rgba(91,75,214,.18); --aura-3: rgba(14,147,168,.14); } /* --------------------------------------------------------------------- 색과 무관한 토큰 — 두 모드가 함께 씁니다. 여기 있어야 하는 이유: 예전에는 이 값들이 라이트 블록 안에만 있어서 다크 모드에서는 --refract 가 아예 정의되지 않았습니다. 그러면 backdrop-filter: var(--refract) blur(...) 이 통째로 무효가 돼, 유리에 흐림이 하나도 걸리지 않았습니다. --------------------------------------------------------------------- */ :root { /* opacity(1) 은 아무것도 바꾸지 않는 자리지킴입니다. none 을 두면 backdrop-filter: none blur(...) 이 되는데, CSS 에서 none 은 단독으로만 쓸 수 있어서 선언 전체가 버려집니다. 굴절을 쓸 수 있는 기기에서는 JS 가 url(#lqGlass) 로 바꿔줍니다. (CSS 안에 url(#...) 을 직접 적으면 이 파일 기준으로 풀려 404 가 납니다) */ --refract: opacity(1); --r-xl: 28px; --r-lg: 22px; --r-md: 16px; --r-sm: 12px; --spring: cubic-bezier(.16,1,.3,1); --swift: cubic-bezier(.4,0,.2,1); --safe-t: env(safe-area-inset-top,0px); --safe-b: env(safe-area-inset-bottom,0px); --safe-l: env(safe-area-inset-left,0px); --safe-r: env(safe-area-inset-right,0px); } /* 다크 — 지금의 기본값입니다. */ :root { color-scheme: dark; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --surf-rgb: 255, 255, 255; --spec-rgb: 255, 255, 255; --base-rgb: 12, 14, 22; --solid-a: #FFFFFF; --solid-b: #D9DCE7; --solid-ink: #07080D; --bg: #06070C; --bg-2: #0B0D14; --ink: #F4F6FC; --ink-2: rgba(244,246,252,.68); --ink-3: rgba(244,246,252,.44); --ink-4: rgba(244,246,252,.22); --g-tint: rgba(255,255,255,.085); --g-tint-2: rgba(255,255,255,.045); --g-tint-hi: rgba(255,255,255,.16); --g-line: rgba(255,255,255,.10); --g-spec: rgba(255,255,255,.58); --g-spec-soft: rgba(255,255,255,.20); --g-rim: rgba(255,255,255,.30); --g-shadow: 0 32px 72px -24px rgba(0,0,0,.85), 0 4px 12px -3px rgba(0,0,0,.55); --g-shadow-sm: 0 12px 30px -16px rgba(0,0,0,.7); --g-blur: 24px; --g-sat: 195%; --g-bright: 1.12; --brand: #3FE08A; --brand-ink: #04240F; --iris: #B3A8FF; --iris-soft: rgba(124,107,255,.18); --cyan: #3FD8E8; --amber: #FFB65E; --rose: #FF6B96; --ok: #30D158; --warn: #FF9F0A; --down: #FF453A; --maint: #5AA3FF; --aura-1: rgba(0,169,79,.20); --aura-2: rgba(124,107,255,.24); --aura-3: rgba(63,216,232,.13); } } :root, :root[data-theme="dark"] { --surf-rgb: 255, 255, 255; --spec-rgb: 255, 255, 255; --base-rgb: 12, 14, 22; --solid-a: #FFFFFF; --solid-b: #D9DCE7; --solid-ink: #07080D; --bg: #06070C; --bg-2: #0B0D14; --ink: #F4F6FC; --ink-2: rgba(244,246,252,.68); --ink-3: rgba(244,246,252,.44); --ink-4: rgba(244,246,252,.22); --g-tint: rgba(255,255,255,.085); --g-tint-2: rgba(255,255,255,.045); --g-tint-hi: rgba(255,255,255,.16); --g-line: rgba(255,255,255,.10); --g-spec: rgba(255,255,255,.58); --g-spec-soft: rgba(255,255,255,.20); --g-rim: rgba(255,255,255,.30); --g-shadow: 0 32px 72px -24px rgba(0,0,0,.85), 0 4px 12px -3px rgba(0,0,0,.55); --g-shadow-sm: 0 12px 30px -16px rgba(0,0,0,.7); --g-blur: 24px; --g-sat: 195%; --g-bright: 1.12; --brand: #3FE08A; --brand-ink: #04240F; --iris: #B3A8FF; --iris-soft: rgba(124,107,255,.18); --cyan: #3FD8E8; --amber: #FFB65E; --rose: #FF6B96; --ok: #30D158; --warn: #FF9F0A; --down: #FF453A; --maint: #5AA3FF; --aura-1: rgba(0,169,79,.20); --aura-2: rgba(124,107,255,.24); --aura-3: rgba(63,216,232,.13); } /* ---------------------------------------------------------------- 바탕 */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Noto Sans KR', system-ui, sans-serif; font-weight: 450; line-height: 1.6; -webkit-font-smoothing: antialiased; } /* 유리가 비출 배경. 움직이지 않습니다 — 계속 움직이면 GPU 만 먹고 글 읽는 데 방해가 됩니다. */ .aura { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(58vw 46vw at 6% -10%, var(--aura-1), transparent 62%), radial-gradient(52vw 44vw at 98% 4%, var(--aura-2), transparent 64%), radial-gradient(62vw 48vw at 42% 112%, var(--aura-3), transparent 66%), var(--bg); } .lq-defs { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; } /* ------------------------------------------------------------- 유리 한 장 */ .glass { position: relative; isolation: isolate; border-radius: var(--r-lg); background: linear-gradient(155deg, var(--g-tint-hi) 0%, var(--g-tint) 28%, var(--g-tint-2) 64%, var(--g-tint) 100%); backdrop-filter: var(--refract) blur(var(--g-blur)) saturate(var(--g-sat)) brightness(var(--g-bright)); -webkit-backdrop-filter: var(--refract) blur(var(--g-blur)) saturate(var(--g-sat)) brightness(var(--g-bright)); box-shadow: var(--g-shadow), inset 0 1.5px 0 var(--g-spec), inset 0 -1px 0 var(--g-spec-soft), inset 0 0 40px -16px var(--g-spec-soft); } /* 굴절 테두리 — 각도마다 밝기가 달라, 유리 모서리가 빛을 꺾는 것처럼 보입니다 */ .glass::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; padding: 1px; background: conic-gradient(from 128deg, var(--g-rim), transparent 18%, var(--iris) 33%, transparent 48%, var(--g-rim) 64%, var(--cyan) 79%, var(--g-rim)); opacity: .55; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } /* 위 모서리를 타고 흐르는 정반사. 유리에 '두께'를 줍니다. */ .glass::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background: linear-gradient(180deg, var(--g-spec-soft) 0%, transparent 14%, transparent 86%, var(--g-spec-soft) 100%); opacity: .5; } .glass-sm { border-radius: var(--r-md); box-shadow: var(--g-shadow-sm), inset 0 1px 0 var(--g-spec); } .glass-xl { border-radius: var(--r-xl); } /* 눌리는 유리 — 버튼·항목 */ .glass-tap { transition: transform .34s var(--spring), background-color .24s var(--swift), box-shadow .34s var(--spring); } .glass-tap:hover { background-color: var(--g-tint-hi); } .glass-tap:active { transform: scale(.98); } /* ------------------------------------------------------------- 부품 */ .g-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 0 16px; border: 1px solid var(--g-line); border-radius: var(--r-sm); background: var(--g-tint); color: var(--ink); font: inherit; font-size: 13.5px; font-weight: 650; cursor: pointer; white-space: nowrap; backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%); transition: transform .3s var(--spring), background-color .2s, border-color .2s; } .g-btn:hover { background: var(--g-tint-hi); } .g-btn:active { transform: scale(.97); } .g-btn:disabled { opacity: .45; cursor: default; transform: none; } .g-btn--primary { background: linear-gradient(150deg, var(--brand), color-mix(in srgb, var(--brand) 74%, var(--cyan))); border-color: transparent; color: var(--brand-ink); box-shadow: 0 8px 22px -10px color-mix(in srgb, var(--brand) 70%, transparent), inset 0 1px 0 rgba(255,255,255,.4); } .g-btn--primary:hover { filter: brightness(1.06); background: linear-gradient(150deg, var(--brand), color-mix(in srgb, var(--brand) 74%, var(--cyan))); } .g-btn--danger { background: color-mix(in srgb, var(--down) 14%, transparent); border-color: color-mix(in srgb, var(--down) 38%, transparent); color: var(--down); } .g-btn--quiet { background: transparent; border-color: transparent; color: var(--ink-2); } .g-btn--quiet:hover { background: var(--g-tint-2); color: var(--ink); } .g-input, .g-select, .g-textarea { width: 100%; min-height: 42px; padding: 10px 14px; border: 1px solid var(--g-line); border-radius: var(--r-sm); background: var(--g-tint-2); color: var(--ink); font: inherit; font-size: 13.5px; outline: none; transition: border-color .2s, background-color .2s; } .g-textarea { min-height: 88px; resize: vertical; line-height: 1.6; } .g-input::placeholder, .g-textarea::placeholder { color: var(--ink-3); } .g-input:focus, .g-select:focus, .g-textarea:focus { border-color: color-mix(in srgb, var(--iris) 60%, transparent); background: var(--g-tint); } .g-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; font-size: 11.5px; font-weight: 700; letter-spacing: .01em; background: var(--g-tint-2); color: var(--ink-2); border: 1px solid var(--g-line); } .g-chip--ok { color: var(--ok); background: color-mix(in srgb, var(--ok) 13%, transparent); border-color: color-mix(in srgb, var(--ok) 26%, transparent); } .g-chip--warn { color: var(--warn); background: color-mix(in srgb, var(--warn) 13%, transparent); border-color: color-mix(in srgb, var(--warn) 26%, transparent); } .g-chip--down { color: var(--down); background: color-mix(in srgb, var(--down) 13%, transparent); border-color: color-mix(in srgb, var(--down) 26%, transparent); } .g-chip--iris { color: var(--iris); background: var(--iris-soft); border-color: color-mix(in srgb, var(--iris) 30%, transparent); } .g-chip--maint { color: var(--maint); background: color-mix(in srgb, var(--maint) 13%, transparent); border-color: color-mix(in srgb, var(--maint) 26%, transparent); } /* 역할 배지 — 리더와 관리자를 눈으로 바로 가릅니다 */ .g-role { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px 3px 8px; border-radius: 999px; font-size: 11px; font-weight: 750; letter-spacing: .02em; border: 1px solid transparent; } .g-role::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: currentColor; } .g-role--leader { color: #A9822B; border-color: rgba(214,168,64,.5); background: linear-gradient(140deg, rgba(214,168,64,.22), rgba(214,168,64,.08)); box-shadow: inset 0 1px 0 rgba(255,255,255,.35); } :root[data-theme="dark"] .g-role--leader, :root:not([data-theme="light"]) .g-role--leader { color: #F0CE72; } .g-role--admin { color: var(--iris); background: var(--iris-soft); border-color: color-mix(in srgb, var(--iris) 34%, transparent); } .g-role--teacher { color: var(--cyan); background: color-mix(in srgb, var(--cyan) 13%, transparent); border-color: color-mix(in srgb, var(--cyan) 28%, transparent); } .g-role--student { color: var(--ink-2); background: var(--g-tint-2); border-color: var(--g-line); } /* ------------------------------------------------------------- 떠 있는 레일 */ /* 화면 왼쪽에 딱 붙은 판이 아니라, 배경 위에 떠 있는 유리 조각입니다. 가장자리에 여백이 있어야 뒤 배경이 보이고, 그래야 유리로 보입니다. */ .g-shell { position: relative; z-index: 2; display: flex; gap: 14px; height: 100dvh; padding: calc(var(--safe-t) + 14px) calc(var(--safe-r) + 14px) calc(var(--safe-b) + 14px) calc(var(--safe-l) + 14px); } .g-rail { flex: none; width: 248px; display: flex; flex-direction: column; gap: 3px; padding: 16px 12px 12px; border-radius: var(--r-xl); overflow: hidden auto; overscroll-behavior: contain; } .g-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; border-radius: var(--r-xl); overflow: hidden; } .g-navitem { display: flex; align-items: center; gap: 11px; width: 100%; min-height: 44px; padding: 0 13px; border: 0; border-radius: 14px; background: transparent; color: var(--ink-2); font: inherit; font-size: 14px; font-weight: 600; text-align: left; cursor: pointer; transition: background-color .26s var(--swift), color .26s; } .g-navitem:hover { background: var(--g-tint-2); color: var(--ink); } .g-navitem[aria-current="page"] { color: var(--ink); background: linear-gradient(140deg, var(--iris-soft), transparent 90%); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--iris) 26%, transparent), inset 0 1px 0 var(--g-spec-soft); } .g-navitem svg { width: 18px; height: 18px; flex: none; stroke-width: 1.9; } /* 화면이 좁으면 레일이 서랍처럼 밀려 들어옵니다 */ @media (max-width: 900px) { /* 셸의 쌓임 맥락을 풀어줍니다. 셸이 z-index 를 가지면 자체 맥락이 생기고, 그 안에 있는 레일(z:60)은 아무리 큰 값을 줘도 **셸 밖에 있는** 스크림(z:50)보다 아래로 깔립니다. 그래서 서랍을 열어도 레일이 스크림 뒤에 묻혀 · 흐림(backdrop-filter)을 뒤집어써 글자가 뭉개지고 · 터치는 스크림이 가로채 아무것도 누를 수 없었습니다. 좁은 화면에서는 레일이 어차피 fixed 라 셸의 자리 기준이 필요 없습니다. */ .g-shell { padding: 0; gap: 0; position: static; z-index: auto; } /* 서랍은 화면 왼쪽에 딱 붙여서 엽니다. 예전에는 사방 10px 을 띄웠는데, 좁은 화면에서는 그 틈으로 본문이 비쳐 레일이 두 겹처럼 보였고 폭도 그만큼 줄어 글자가 잘렸습니다. */ .g-rail { position: fixed; z-index: 60; top: 0; bottom: 0; left: 0; width: min(300px, 86vw); padding: calc(var(--safe-t) + 16px) 12px calc(var(--safe-b) + 14px) calc(var(--safe-l) + 12px); border-radius: 0 var(--r-xl) var(--r-xl) 0; transform: translateX(-101%); transition: transform .42s var(--spring); } .g-rail.on { transform: none; } .g-main { border-radius: 0; } } /* 아주 좁은 화면 — 메뉴 글자가 잘리지 않게 조금씩 줄입니다 */ @media (max-width: 400px) { .g-rail { width: 88vw; } .g-navitem { font-size: 13.5px; gap: 9px; padding: 0 11px; } .g-navitem svg { width: 17px; height: 17px; } } .g-scrim { position: fixed; inset: 0; z-index: 50; background: color-mix(in srgb, var(--ink) 40%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; pointer-events: none; transition: opacity .3s var(--swift); } .g-scrim.on { opacity: 1; pointer-events: auto; } /* ------------------------------------------------------------- 잔손질 */ a { color: inherit; text-decoration: none; } button, input, textarea, select { font: inherit; color: inherit; } button { cursor: pointer; background: none; border: none; } img { display: block; max-width: 100%; } :focus-visible { outline: 2px solid var(--iris); outline-offset: 2px; border-radius: 6px; } ::selection { background: color-mix(in srgb, var(--iris) 34%, transparent); } .g-muted { color: var(--ink-3); font-size: 12.5px; } .g-h { font-size: 13px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); } /* 유리가 무거운 기기에서는 흐림을 줄입니다. 읽기가 먼저입니다. */ @media (prefers-reduced-transparency: reduce) { .glass, .g-btn { backdrop-filter: none; -webkit-backdrop-filter: none; } :root { --g-tint: color-mix(in srgb, var(--bg-2) 94%, transparent); --g-tint-2: var(--g-tint); } } @media (prefers-reduced-motion: reduce) { .glass-tap, .g-btn, .g-navitem, .g-rail, .g-scrim { transition-duration: .01ms; } } /* ===================================================================== 라이트 모드 바로잡기 --------------------------------------------------------------------- 예전 스타일시트의 유리는 rgba(255,255,255, 0.03~0.15) 처럼 아주 옅은 흰 물을 검은 배경 위에 얹어 만든 것이었습니다. 그 흰색을 --surf-rgb 로 바꾸면서 라이트 모드에서는 '아주 옅은 검은 물'이 돼 버렸고, 카드가 유리가 아니라 탁한 회색 판으로 보였습니다. 구분해야 할 두 가지였습니다. · 채움(fill) — 밝은 배경에서도 흰색이어야 유리로 보입니다. 대신 배경이 밝으니 알파를 훨씬 올려야 형태가 잡힙니다. · 선(border) — 이건 뒤집는 게 맞습니다. 밝은 배경에는 어두운 선. 그래서 채움만 여기서 되돌립니다. 알파는 새로 잡았습니다. ===================================================================== */ @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --fix-light: 1; } } :root[data-theme="light"] { --fix-light: 1; } /* 유리 컨테이너 — 흰 서리 */ :root[data-theme="light"] .lg, :root[data-theme="light"] .panel, :root[data-theme="light"] .card, :root[data-theme="light"] .modal, :root[data-theme="light"] .pgs-panel, :root[data-theme="light"] .pgd-box, :root[data-theme="light"] .pgt-box { background: linear-gradient(158deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.70) 42%, rgba(255,255,255,.60) 72%, rgba(255,255,255,.80) 100%); box-shadow: 0 20px 52px -20px rgba(12,18,40,.26), 0 2px 8px -3px rgba(12,18,40,.12), inset 0 1.5px 0 rgba(255,255,255,.98), inset 0 0 0 1px rgba(10,12,18,.07); } /* 입력칸 — 밝은 배경에서는 살짝 파인 흰 홈처럼 */ :root[data-theme="light"] input[type="text"], :root[data-theme="light"] input[type="email"], :root[data-theme="light"] input[type="password"], :root[data-theme="light"] input[type="search"], :root[data-theme="light"] input[type="url"], :root[data-theme="light"] input[type="date"], :root[data-theme="light"] input[type="number"], :root[data-theme="light"] select, :root[data-theme="light"] textarea { background: rgba(255,255,255,.86); border: 1px solid rgba(10,12,18,.13); box-shadow: inset 0 1px 2px rgba(12,18,40,.06); color: var(--ink); } :root[data-theme="light"] input:focus, :root[data-theme="light"] select:focus, :root[data-theme="light"] textarea:focus { background: #fff; border-color: color-mix(in srgb, var(--iris) 55%, transparent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--iris) 14%, transparent); } :root[data-theme="light"] ::placeholder { color: rgba(10,12,18,.36); } /* 안쪽에 얹히는 작은 판들 (통계 타일, 목록 항목 등) */ :root[data-theme="light"] .stat, :root[data-theme="light"] .sitem, :root[data-theme="light"] .chip, :root[data-theme="light"] .search, :root[data-theme="light"] .me, :root[data-theme="light"] .pgx-row, :root[data-theme="light"] .pgx-req, :root[data-theme="light"] .pgx-diag { background: rgba(255,255,255,.72); box-shadow: inset 0 0 0 1px rgba(10,12,18,.08); } /* 유리 위 어두운 덧칠을 걷어냅니다 (다크 전용으로 그려진 그라데이션) */ :root[data-theme="light"] .lg::after, :root[data-theme="light"] .panel::after { opacity: .35; } @media (prefers-color-scheme: light) { /* 유리 컨테이너 — 흰 서리 */ :root:not([data-theme="dark"]) .lg, :root:not([data-theme="dark"]) .panel, :root:not([data-theme="dark"]) .card, :root:not([data-theme="dark"]) .modal, :root:not([data-theme="dark"]) .pgs-panel, :root:not([data-theme="dark"]) .pgd-box, :root:not([data-theme="dark"]) .pgt-box { background: linear-gradient(158deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.70) 42%, rgba(255,255,255,.60) 72%, rgba(255,255,255,.80) 100%); box-shadow: 0 20px 52px -20px rgba(12,18,40,.26), 0 2px 8px -3px rgba(12,18,40,.12), inset 0 1.5px 0 rgba(255,255,255,.98), inset 0 0 0 1px rgba(10,12,18,.07); } /* 입력칸 — 밝은 배경에서는 살짝 파인 흰 홈처럼 */ :root:not([data-theme="dark"]) input[type="text"], :root:not([data-theme="dark"]) input[type="email"], :root:not([data-theme="dark"]) input[type="password"], :root:not([data-theme="dark"]) input[type="search"], :root:not([data-theme="dark"]) input[type="url"], :root:not([data-theme="dark"]) input[type="date"], :root:not([data-theme="dark"]) input[type="number"], :root:not([data-theme="dark"]) select, :root:not([data-theme="dark"]) textarea { background: rgba(255,255,255,.86); border: 1px solid rgba(10,12,18,.13); box-shadow: inset 0 1px 2px rgba(12,18,40,.06); color: var(--ink); } :root:not([data-theme="dark"]) input:focus, :root:not([data-theme="dark"]) select:focus, :root:not([data-theme="dark"]) textarea:focus { background: #fff; border-color: color-mix(in srgb, var(--iris) 55%, transparent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--iris) 14%, transparent); } :root:not([data-theme="dark"]) ::placeholder { color: rgba(10,12,18,.36); } /* 안쪽에 얹히는 작은 판들 (통계 타일, 목록 항목 등) */ :root:not([data-theme="dark"]) .stat, :root:not([data-theme="dark"]) .sitem, :root:not([data-theme="dark"]) .chip, :root:not([data-theme="dark"]) .search, :root:not([data-theme="dark"]) .me, :root:not([data-theme="dark"]) .pgx-row, :root:not([data-theme="dark"]) .pgx-req, :root:not([data-theme="dark"]) .pgx-diag { background: rgba(255,255,255,.72); box-shadow: inset 0 0 0 1px rgba(10,12,18,.08); } /* 유리 위 어두운 덧칠을 걷어냅니다 (다크 전용으로 그려진 그라데이션) */ :root:not([data-theme="dark"]) .lg::after, :root:not([data-theme="dark"]) .panel::after { opacity: .35; } }