/* ============================================================ ARIFE 단추 한 벌 v900 — 2026-08-28 왜 만들었나 화면마다 단추가 제각각이었다. 같은 뜻인데 모양이 다르고, 눌리는 것과 안 눌리는 것이 색으로 안 갈리고, 무엇보다 **판에 딱 붙어 있어 단추처럼 보이지 않았다.** 투명한 유리로 깊이를 내려다 보니, 뒤가 비쳐 탁해지기만 하고 떠 있다는 느낌은 안 났다. 무엇을 정했나 깊이는 '투명도' 가 아니라 '테두리 + 위 하이라이트 + 아래 그림자' 세 겹으로 낸다. 이건 뒤에 무엇이 깔려도 흔들리지 않는다. ① 보통 단추 흰 알약. 옅은 남색 테. 위에 흰 선 한 줄, 아래 그림자. ② 눌린/고른 파랑 알약(#1C56BE). 흰 글씨. 그림자는 더 짙게. ③ 손 얹으면 1px 뜬다. ④ 누르면 1px 내려앉는다. 모서리는 키가 56px 이하인 조작 단추는 전부 완전한 알약(999px). 카드는 18px, 펼침 목록은 14px 로 따로 둔다. 쓰는 법 이 파일을 페이지 맨 뒤에 한 줄 걸면 된다. 다른 화면으로 넓힐 때는 아래 선택자 묶음에 그 화면의 단추 이름을 더하기만 하면 된다. ============================================================ */ :root{ --a-ctl-face: linear-gradient(180deg, #ffffff 0%, #f4f7fc 100%); --a-ctl-edge: #c7d7ee; --a-ctl-ink: #14202e; --a-ctl-sub: #5b6b86; --a-ctl-lift: 0 1px 2px rgba(16,40,90,.14), 0 5px 12px -7px rgba(16,40,90,.34), inset 0 1.4px 0 rgba(255,255,255,1); --a-ctl-lift-hover: 0 2px 4px rgba(16,40,90,.16), 0 10px 20px -9px rgba(16,40,90,.4), inset 0 1.4px 0 rgba(255,255,255,1); --a-ctl-press: 0 1px 1px rgba(16,40,90,.16), inset 0 2px 4px -2px rgba(16,40,90,.28); --a-key: #1c56be; --a-key-face: linear-gradient(180deg, #3d78e4 0%, #1c56be 62%, #17489f 100%); --a-key-lift: 0 2px 4px rgba(14,40,96,.3), 0 12px 22px -12px rgba(14,40,96,.7), inset 0 1.6px 0 rgba(255,255,255,.55), inset 0 -9px 14px -12px rgba(6,24,64,.45); } /* ── ① 보통 단추 ─────────────────────────────────────────── */ html body.image-studio-page:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) :is( .ic-tabs button:not(.on), .image-compose-controls > button, .image-compose-controls > label, .image-compose-controls > div:not(.image-api-status), .gti-secondary, .image-modal button:not(.image-model-option):not(.image-modal-backdrop):not(.active), .image-model-option > b, .ip-tools button:not(.on), .ip-edge button:not(.on), .ip-undo-btn, .ip-reset, .ip-up, .ip-model, .ip-speedsel, #image-fast-toggle[aria-pressed="false"], .mb-save[disabled], .pz-save[disabled] ){ border:1px solid var(--a-ctl-edge)!important; border-radius:999px!important; background:#fff!important; background-image:var(--a-ctl-face)!important; -webkit-backdrop-filter:none!important; backdrop-filter:none!important; color:var(--a-ctl-ink)!important; box-shadow:var(--a-ctl-lift)!important; transition:transform .12s ease, box-shadow .12s ease, background-color .12s ease!important; } html body.image-studio-page:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) :is( .ic-tabs button:not(.on), .image-compose-controls > button, .gti-secondary, .image-modal button:not(.image-model-option):not(.image-modal-backdrop):not(.active), .ip-tools button:not(.on), .ip-edge button:not(.on), .ip-undo-btn, .ip-reset, .ip-up ):hover{ transform:translateY(-1px)!important; box-shadow:var(--a-ctl-lift-hover)!important; } html body.image-studio-page:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) :is( .ic-tabs button, .image-compose-controls > button, .gti-secondary, .image-modal button:not(.image-modal-backdrop), .ip-tools button, .ip-edge button, .ip-undo-btn, .ip-reset, .ip-up, .ip-go, #gti-generate, #image-generate-submit, .mb-save, .pz-save ):active{ transform:translateY(1px)!important; box-shadow:var(--a-ctl-press)!important; } /* ── ② 눌린 것 · 고른 것 · 주요 단추 ──────────────────────── */ html body.image-studio-page:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) :is( .ic-tabs button.on, .image-modal button.active:not(.image-model-option), .image-model-option.active > b, .ip-tools button.on, .ip-edge button.on, .image-add-button, #image-fast-toggle[aria-pressed="true"], #image-generate-submit:not([disabled]), #gti-generate:not([disabled]), .ip-go:not([disabled]), .mb-save:not([disabled]), .pz-save:not([disabled]), .tx-done:not([disabled]) ){ border:1px solid rgba(255,255,255,.6)!important; border-radius:999px!important; background:var(--a-key)!important; background-image:var(--a-key-face)!important; -webkit-backdrop-filter:none!important; backdrop-filter:none!important; color:#fff!important; box-shadow:var(--a-key-lift)!important; transition:transform .12s ease, box-shadow .12s ease!important; } html body.image-studio-page:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) :is( .ic-tabs button.on, .image-modal button.active:not(.image-model-option), .image-model-option.active > b, .ip-tools button.on, .ip-edge button.on, .image-add-button, #image-fast-toggle[aria-pressed="true"], #image-generate-submit:not([disabled]), #gti-generate:not([disabled]), .ip-go:not([disabled]), .mb-save:not([disabled]), .pz-save:not([disabled]) ) *{ color:#fff!important; } /* ── ③ 카드는 알약이 아니다 — 모서리 18px, 뜬 느낌만 같게 ── */ html body.image-studio-page:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .image-model-option{ border-radius:18px!important; background:#fff!important; background-image:linear-gradient(180deg,#ffffff,#f6f9fd)!important; border:1px solid var(--a-ctl-edge)!important; box-shadow:var(--a-ctl-lift)!important; transition:transform .12s ease, box-shadow .12s ease!important; } html body.image-studio-page:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .image-model-option:hover{ transform:translateY(-2px)!important; box-shadow:var(--a-ctl-lift-hover)!important; } html body.image-studio-page:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .image-model-option.active{ border-color:var(--a-key)!important; box-shadow:0 0 0 2px rgba(28,86,190,.28), var(--a-ctl-lift-hover)!important; } /* 카드 안 작은 딱지(2K · 16:9 · 참조 가능) — 단추가 아니라 표시다. 눌리는 것처럼 보이면 안 되니 그림자 없이 얌전하게. */ html body.image-studio-page:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .image-model-option-specs > *{ border-radius:999px!important; background:#eef3fa!important; background-image:none!important; border:1px solid #dde6f3!important; box-shadow:none!important; color:#41536f!important; } /* ── ④ 펼침 목록은 판 위에 확실히 떠 있어야 한다 ──────────── */ html body.image-studio-page:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) :is( .image-select-menu, .tx-menu ){ background:#fff!important; background-image:none!important; border:1px solid #bacbe5!important; border-radius:14px!important; -webkit-backdrop-filter:none!important; backdrop-filter:none!important; box-shadow: 0 24px 48px -20px rgba(14,38,88,.45), 0 4px 10px -6px rgba(14,38,88,.3), 0 0 0 1px rgba(255,255,255,.9)!important; } /* ── ⑤ 끈 단추는 눌러도 안 되는 것이 보여야 한다 ──────────── */ html body.image-studio-page:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) :is( .mb-save, .pz-save, #gti-generate, .ip-go, #image-generate-submit )[disabled]{ opacity:.5!important; box-shadow:none!important; cursor:not-allowed!important; transform:none!important; } /* ── ⑥ 적는 칸은 반대로 '내려앉게' ───────────────────────── 단추는 뜨고 적는 칸은 가라앉는다. 이 둘만 갈려도 화면이 정리된다. 그동안은 둘 다 옅은 유리라 어디를 누르고 어디에 적는지 헷갈렸다. */ html body.image-studio-page:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) :is( .image-prompt-field, .gti-field input, .gti-field textarea, .ip-prompt, .mb-name ){ border-radius:14px!important; background:#fff!important; background-image:none!important; border:1px solid #cfdcee!important; -webkit-backdrop-filter:none!important; backdrop-filter:none!important; box-shadow:inset 0 2px 5px -3px rgba(16,40,90,.28), inset 0 0 0 1px rgba(255,255,255,.8)!important; color:var(--a-ctl-ink)!important; } html body.image-studio-page:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) :is( .gti-field input, .gti-field textarea, .ip-prompt, .mb-name ):focus{ border-color:var(--a-key)!important; box-shadow:0 0 0 3px rgba(28,86,190,.16), inset 0 2px 5px -3px rgba(16,40,90,.24)!important; outline:none!important; } /* ── ⑦ 「구독해야 쓸 수 있음」 표시가 단추를 더럽히고 있었다 ── `.is-plan-locked` 은 어두운 화면 시절에 만든 것이다(실측): filter: saturate(.55) + 위에 검정 48% 까지 덮는 막 밝은 유리 화면에서는 이게 '잠김' 이 아니라 '고장' 으로 읽힌다. 화면에서 제일 큰 단추(이미지 생성)가 늘 흐리멍덩했던 이유다. 색은 살리고, 덮는 막을 흰 베일로 바꾼다 — 눌러도 안 되는 것은 그대로 알 수 있으면서 지저분해 보이지 않는다. 딱지(스탠다드)도 밝은 판에 맞는 색으로 바꾼다. */ html body.a-glass:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .is-plan-locked:not(.film-control-section){ filter:none!important; } html body.a-glass:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .is-plan-locked:after{ background:linear-gradient(135deg, rgba(255,255,255,.34), rgba(255,255,255,.5))!important; border-color:rgba(255,255,255,.6)!important; } html body.a-glass:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .arife-plan-badge{ border:1px solid rgba(28,86,190,.28)!important; background:rgba(255,255,255,.94)!important; color:#1c56be!important; box-shadow:0 4px 10px -6px rgba(16,40,90,.5)!important; } /* ── ⑧ 빠른 모드에만 남아 있던 안쪽 띠를 없앤다 ───────────── 이 단추만 ::before 로 위쪽에 밝은 띠를 하나 더 그리고 있었다. 테두리 안에 또 테두리가 있는 것처럼 보여 혼자 다른 물건이 됐다. */ html body.image-studio-page:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) #image-fast-toggle::before{ display:none!important; } /* ── ⑨ 팝업 뒤 가림막에 세로 경계선이 보였다 ──────────────── 45% 만 덮고 흐리기만 하니, 뒤에 그림이 있는 자리와 없는 자리의 경계가 세로줄로 그대로 드러났다(실측: 화면 좌우 여백과 사진 벽의 경계). 더 덮어 그 선을 지운다. 화면을 가득 채우는 막에 테두리와 그림자가 붙어 있던 것도 뗀다 — 가장자리에 실선이 한 줄 생긴다. */ html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .image-modal-backdrop{ background:rgba(232,240,251,.82)!important; -webkit-backdrop-filter:blur(22px) saturate(1.15); backdrop-filter:blur(22px) saturate(1.15)!important; border:0!important; box-shadow:none!important; border-radius:0!important; } /* ── ⑩ 포스터 칸의 남은 것들 ──────────────────────────────── · 「AI 문구 추천」이 제목·부제와 스타일·비율 사이에 혼자 한 줄을 차지하고 있었다. 그 줄 때문에 항목 간격이 들쭉날쭉해졌다. 이 단추는 제목·부제를 채워 주는 것이니 '부제' 이름표 옆에 붙인다. · 스타일·비율 고르는 칸만 12px 네모라 다른 알약과 따로 놀았다. 화살표는 배경 그림으로 그려져 있어서, 배경을 갈아 끼울 때 같이 지우면 안 된다 — 화살표를 첫 겹으로 다시 깔아 준다. */ html body.image-studio-page:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .gti-field select{ border:1px solid var(--a-ctl-edge)!important; border-radius:999px!important; background-color:#fff!important; background-image: url("data:image/svg+xml;utf8,"), var(--a-ctl-face)!important; background-repeat:no-repeat, no-repeat!important; background-position:calc(100% - 14px) 50%, 0 0!important; background-size:12px 8px, auto!important; padding-right:34px!important; -webkit-backdrop-filter:none!important; backdrop-filter:none!important; color:var(--a-ctl-ink)!important; box-shadow:var(--a-ctl-lift)!important; height:46px!important; } /* ── ⑪ 잠긴 단추가 46% 라 거의 안 보였다 ──────────────────── 디자인 시스템의 '못 누르는 단추' 규칙(opacity:.46)이 그대로 걸린다. 그 위에 잠금 베일까지 얹히니 두 번 흐려져 글자가 안 읽혔다. 눌러도 안 되는 건 알 수 있으면서 무슨 단추인지는 읽히게 한다. */ html body.a-glass:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .is-plan-locked{ opacity:.72!important; } /* 「AI 문구 추천」 은 머리말 오른쪽으로 옮겼다(image.html). flex 가 오른쪽 끝에 세워 주므로 자리 잡는 규칙은 필요 없고, 제목 줄에 맞춰 위로 붙여 두기만 한다. */ /* 「AI 문구 추천」 은 제목·부제를 채워 주는 단추다. 그 옆이 맞는 자리인데, 항목 사이에 한 줄을 차지하면 간격이 어긋난다. 흐름에서 빼내 부제 이름표 줄 오른쪽에 얹는다 — 살짝 위로 올려 부제와 떨어뜨린다. */ html body.image-studio-page:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .gti-form{ position:relative!important; } html body.image-studio-page:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .gti-form > #gti-suggest-btn{ position:absolute!important; top:-2px!important; right:0!important; left:auto!important; /* 2026-08-30 — -16px 는 부제 줄보다 너무 위로 떠 있었다 */ grid-column:auto!important; margin:0!important; height:24px!important; min-height:24px!important; padding:0 11px!important; font-size:11px!important; font-weight:800!important; white-space:nowrap!important; } /* ── ⑫ 결과가 뜨는 칸이 점선에 옅어 판에 묻혀 있었다 ───────── 여기는 그림이 나올 자리다. 흐릿한 점선 상자가 아니라 "안이 파인 판" 으로 만들어 무엇이 채워질 자리인지 보이게 한다. */ html body.image-studio-page:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .gti-output{ /* 겉모습만 손댄다 — 자리는 arife-gti-shape-v4500 이 잡는다. 2026-08-28 (2) — 다만 그 계산이 50vh 기준이라 옆의 적는 칸보다 100px 넘게 길어져, 아래로 빈자리가 남았다. 40vh 로 낮춰 폼 높이에 맞춘다. 폭을 비율로 정하고 높이는 비율이 정하게 두면, 세로든 가로든 비율이 정확히 지켜진다 (실측: 3:4 → 267×356, 16:9 → 471×265). */ height:auto!important; width:min(100%, calc(min(360px, 40vh) * var(--gti-arn,.75)))!important; aspect-ratio:var(--gti-ar,3 / 4)!important; max-height:none!important; min-height:0!important; align-self:start!important; justify-self:center!important; border:1px solid #cfdcee!important; border-radius:18px!important; background:#fff!important; background-image:linear-gradient(180deg,#ffffff,#f7fafd)!important; box-shadow: inset 0 2px 6px -4px rgba(16,40,90,.3), inset 0 0 0 1px rgba(255,255,255,.9), 0 1px 2px rgba(16,40,90,.08)!important; } html body.image-studio-page:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .gti-placeholder{ display:grid!important; justify-items:center!important; gap:10px!important; color:#5b6b86!important; font-size:12.5px!important; line-height:1.7!important; text-align:center!important; } html body.image-studio-page:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .gti-placeholder > *:first-child{ width:52px!important; height:52px!important; border-radius:16px!important; display:grid!important; place-items:center!important; background:linear-gradient(180deg,#e8f0fb,#d7e6f8)!important; border:1px solid #c2d6ef!important; color:#1c56be!important; font-size:22px!important; font-weight:900!important; box-shadow:inset 0 1.4px 0 rgba(255,255,255,1), 0 4px 10px -7px rgba(16,40,90,.5)!important; } /* ── ⑬ 포스터·편집 칸의 고르개도 우리 목록을 쓴다 ──────────── `arife-image-selects-v129.js` 가 이제 여기에도 위젯을 씌운다. 그러면 원래 select 는 숨고(.image-native-select) 그 옆에 우리 단추가 선다. 그 단추가 다른 알약과 같아 보이도록 여기서 옷을 입힌다. (브라우저가 그리는 목록은 CSS 로 못 고친다 — 그래서 위젯으로 바꾼다) */ html body.image-studio-page:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) :is(.gti-field, .ip-field) .image-select-trigger{ width:100%!important; min-height:46px!important; height:46px!important; padding:0 14px!important; border:1px solid var(--a-ctl-edge)!important; border-radius:999px!important; background:#fff!important; background-image:var(--a-ctl-face)!important; -webkit-backdrop-filter:none!important; backdrop-filter:none!important; color:var(--a-ctl-ink)!important; font-size:13px!important; font-weight:800!important; box-shadow:var(--a-ctl-lift)!important; display:inline-flex!important; align-items:center!important; justify-content:space-between!important; gap:10px!important; cursor:pointer!important; } html body.image-studio-page:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) :is(.gti-field, .ip-field) .image-select{ display:block!important; width:100%!important; } /* 위젯이 씌워졌으면 원래 select 는 완전히 숨는다 */ html body.image-studio-page:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) :is(.gti-field, .ip-field) select.image-native-select{ display:none!important; } /* ══════════════════════════════════════════════════════════ 수동 제작(film-graph) — 모델 고르는 칸 ────────────────────────────────────────────────────────── 갈래 칩과 모델 카드가 모두 rgba(150,190,242,.32) 반투명 파랑이라, 고른 것과 안 고른 것이 색으로 안 갈리고 카드가 판에 묻혔다. AI 이미지의 모델 목록과 같은 규칙으로 맞춘다 — 카드는 흰색, 고른 것만 파란 테두리. 안쪽 딱지는 단추가 아니라 표시. ══════════════════════════════════════════════════════════ */ html body.a-glass:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .fg-fams button{ border:1px solid var(--a-ctl-edge)!important; border-radius:999px!important; background:#fff!important; background-image:var(--a-ctl-face)!important; -webkit-backdrop-filter:none!important; backdrop-filter:none!important; color:var(--a-ctl-ink)!important; box-shadow:var(--a-ctl-lift)!important; } html body.a-glass:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .fg-fams button.is-on{ border-color:rgba(255,255,255,.6)!important; background:var(--a-key)!important; background-image:var(--a-key-face)!important; color:#fff!important; box-shadow:var(--a-key-lift)!important; } html body.a-glass:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .fg-fams button.is-on *{ color:#fff!important; } html body.a-glass:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .fg-model{ border:1px solid var(--a-ctl-edge)!important; border-radius:16px!important; background:#fff!important; background-image:linear-gradient(180deg,#ffffff,#f7fafd)!important; -webkit-backdrop-filter:none!important; backdrop-filter:none!important; color:var(--a-ctl-ink)!important; box-shadow:var(--a-ctl-lift)!important; transition:transform .12s ease, box-shadow .12s ease!important; } html body.a-glass:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .fg-model:hover{ transform:translateY(-2px)!important; box-shadow:var(--a-ctl-lift-hover)!important; } html body.a-glass:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .fg-model.is-on{ border-color:var(--a-key)!important; box-shadow:0 0 0 2px rgba(28,86,190,.28), var(--a-ctl-lift-hover)!important; } /* 카드 안 딱지(30초까지 · 480p·720p · 소리) 는 표시지 단추가 아니다 */ html body.a-glass:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .fg-model .sp{ border-radius:999px!important; background:#eef3fa!important; background-image:none!important; border:1px solid #dde6f3!important; box-shadow:none!important; color:#41536f!important; } html body.a-glass:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .fg-model .cr{ color:#1c56be!important; font-weight:850!important; } /* 고른 카드는 예전에 파랗게 채워져 글씨가 흰색이었다. 이제 흰 카드라 그 흰 글씨가 안 보인다 — 글자색을 되돌린다(실측: 딱지가 통째로 사라짐). */ html body.a-glass:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .fg-model.is-on, html body.a-glass:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .fg-model.is-on *{ color:var(--a-ctl-ink)!important; } html body.a-glass:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .fg-model.is-on .sp{ color:#41536f!important; } html body.a-glass:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .fg-model.is-on .cr{ color:#1c56be!important; } /* ══════════════════════════════════════════════════════════ AI 영상 — 「생성 모델 선택」 팝업 다시 짜기 ══════════════════════════════════════════════════════════ 실측으로 걸린 것들: · 상표 열두 개가 알약 통 안에서 줄바꿈돼 「Gemini」 하나만 둘째 줄에 남았다. 통이 999px 알약이라 두 줄이 되는 순간 모양이 깨진다. · 안 고른 상표는 아무 표시가 없어 글씨인지 단추인지 구분되지 않았다. · 고른 카드는 파랗게 채워 놓고 제목(#14202e)·부제(#4a5870)·딱지는 어두운 색 그대로였다. 파란 바탕에 어두운 글씨라 안 읽힌다. · 「선택됨」 배지도 파란 카드 위에 보라 파랑이라 묻혔다. 고쳐 쓴 방향: 카드는 흰 바탕을 지키고 고른 것은 파란 테두리·파란 제목 ·파란 배지로만 표시한다. 글씨는 어느 상태에서도 어두운 색을 지킨다. (다른 화면 모델 카드와 같은 규칙이다.) ------------------------------ */ /* 뒤 가림막 */ html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .unified-modal-backdrop{ background:rgba(224,234,247,.7)!important; -webkit-backdrop-filter:blur(16px) saturate(1.1)!important; backdrop-filter:blur(16px) saturate(1.1)!important; border:0!important; box-shadow:none!important; } /* 판 */ html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .unified-model-dialog{ width:min(920px,92vw)!important; max-width:92vw!important; border:1px solid #d7e3f3!important; border-radius:22px!important; background:#fff!important; background-image:none!important; -webkit-backdrop-filter:none!important; backdrop-filter:none!important; box-shadow:0 30px 60px -30px rgba(14,38,88,.5), 0 2px 8px rgba(16,40,90,.1)!important; overflow:hidden!important; color:#14202e!important; } /* 머리칸 */ html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .unified-model-dialog > header{ padding:22px 24px 16px!important; border-bottom:1px solid #edf2f9!important; align-items:flex-start!important; } html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .unified-model-dialog > header h2{ font-size:17px!important; font-weight:800!important; color:#14202e!important; letter-spacing:-.01em!important; margin:0!important; } html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .unified-model-dialog > header p{ font-size:12.5px!important; line-height:1.55!important; color:#5b6b86!important; margin:5px 0 0!important; } html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .unified-modal-close-v216{ width:36px!important; height:36px!important; border-radius:50%!important; border:1px solid #c7d7ee!important; background:#fff!important; background-image:linear-gradient(180deg,#fff 0%,#f4f7fc 100%)!important; -webkit-backdrop-filter:none!important; backdrop-filter:none!important; color:#3d5f88!important; box-shadow:0 1px 2px rgba(16,40,90,.14),0 5px 12px -7px rgba(16,40,90,.34),inset 0 1.4px 0 #fff!important; } /* 상표 줄 — 알약 통이 아니라 네모난 통으로. 두 줄이 돼도 모양이 깨지지 않고 가운데로 모인다. 글자·여백을 조금 줄여 보통 화면에서는 한 줄에 들어간다. */ html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .unified-model-dialog > nav{ margin:16px 24px 0!important; padding:6px!important; border-radius:16px!important; background:#f1f5fb!important; background-image:none!important; border:1px solid #e2ebf6!important; -webkit-backdrop-filter:none!important; backdrop-filter:none!important; gap:4px!important; row-gap:4px!important; justify-content:center!important; box-shadow:inset 0 1px 3px -2px rgba(16,40,90,.2)!important; } html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .unified-model-dialog > nav button{ height:32px!important; padding:0 11px!important; border-radius:999px!important; background:transparent!important; background-image:none!important; -webkit-backdrop-filter:none!important; backdrop-filter:none!important; border:1px solid transparent!important; color:#4a5a75!important; font-size:12px!important; font-weight:700!important; letter-spacing:-.01em!important; white-space:nowrap!important; box-shadow:none!important; } html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .unified-model-dialog > nav button:hover{ background:#fff!important; border-color:#dfe8f5!important; color:#14202e!important; } html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .unified-model-dialog > nav button.active{ background:#1c56be!important; background-image:linear-gradient(180deg,#3d78e4 0%,#1c56be 62%,#17489f 100%)!important; border-color:rgba(255,255,255,.6)!important; color:#fff!important; box-shadow:0 2px 4px rgba(14,40,96,.28),0 8px 16px -10px rgba(14,40,96,.6),inset 0 1.4px 0 rgba(255,255,255,.5)!important; } /* 모델 카드 */ html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .unified-model-options{ padding:16px 24px 22px!important; gap:12px!important; grid-template-columns:repeat(auto-fit,minmax(250px,1fr))!important; max-height:min(52vh,420px)!important; overflow:auto!important; scrollbar-width:thin!important; scrollbar-color:#c3d4ec transparent!important; } html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .unified-model-options::-webkit-scrollbar{width:8px} html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .unified-model-options::-webkit-scrollbar-thumb{ background:#c3d4ec; border-radius:999px; border:2px solid transparent; background-clip:content-box; } html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .unified-model-options::-webkit-scrollbar-track{background:transparent} html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .unified-model-option{ padding:16px 16px 14px!important; gap:8px!important; border-radius:16px!important; border:1px solid #c7d7ee!important; background:#fff!important; background-image:linear-gradient(180deg,#ffffff,#f7fafd)!important; -webkit-backdrop-filter:none!important; backdrop-filter:none!important; color:#14202e!important; text-align:left!important; align-content:start!important; box-shadow:0 1px 2px rgba(16,40,90,.14),0 5px 12px -7px rgba(16,40,90,.34),inset 0 1.4px 0 #fff!important; transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease!important; } html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .unified-model-option:hover{ transform:translateY(-2px)!important; border-color:#a9c6ee!important; box-shadow:0 2px 4px rgba(16,40,90,.16),0 10px 20px -9px rgba(16,40,90,.4),inset 0 1.4px 0 #fff!important; } html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .unified-model-option strong{ font-size:15px!important; font-weight:800!important; color:#14202e!important; padding-right:76px!important; letter-spacing:-.01em!important; } html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .unified-model-option small{ font-size:12px!important; line-height:1.55!important; color:#5b6b86!important; } html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .unified-model-specs{ gap:6px!important; margin-top:2px!important; } html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .unified-model-specs b{ background:#eef4fc!important; border:1px solid #dbe6f5!important; color:#33415c!important; font-size:10.5px!important; font-weight:700!important; border-radius:7px!important; padding:4px 8px!important; line-height:1.2!important; } /* 고른 카드 — 채우지 않고 테두리·제목·배지로만 표시한다 */ html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .unified-model-option.active{ background:#fff!important; background-image:linear-gradient(180deg,#ffffff,#f2f7ff)!important; border-color:#1c56be!important; color:#14202e!important; box-shadow:0 0 0 2px rgba(28,86,190,.22),0 2px 4px rgba(16,40,90,.16),0 10px 20px -9px rgba(16,40,90,.4)!important; } html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .unified-model-option.active strong{ color:#1c56be!important; } html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .unified-model-option.active small{ color:#4a678c!important; } html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .unified-model-option.active .unified-model-specs b{ background:#e8f0fd!important; border-color:#bcd4f5!important; color:#1d4b8c!important; } html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .unified-model-option.active::after{ background:#1c56be!important; background-image:linear-gradient(180deg,#3d78e4,#1c56be)!important; color:#fff!important; border:0!important; border-radius:999px!important; padding:4px 10px!important; font-size:11px!important; font-weight:800!important; letter-spacing:0!important; box-shadow:0 2px 6px -2px rgba(14,40,96,.5)!important; } /* 좁은 화면 — 상표 줄은 옆으로 밀어 보고, 카드는 한 줄에 하나씩 */ @media (max-width:560px){ html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .unified-model-dialog{ width:94vw!important; border-radius:18px!important; } html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .unified-model-dialog > header{ padding:18px 16px 14px!important; } html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .unified-model-dialog > nav{ margin:12px 16px 0!important; justify-content:flex-start!important; flex-wrap:nowrap!important; overflow-x:auto!important; scrollbar-width:none!important; border-radius:999px!important; } html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .unified-model-dialog > nav button{ flex:none!important; } html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .unified-model-options{ padding:14px 16px 18px!important; grid-template-columns:1fr!important; max-height:58vh!important; } html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .unified-model-option strong{ padding-right:70px!important; } }