/* ============================================================================= 원어썸 껍데기 — 토큰, 밑바탕, 왼쪽 레일, 작업 표시줄, 계정 배지 ----------------------------------------------------------------------------- ★이 파일은 자막 도구 전용이 아니다.★ 앞으로 도구마다 문서를 나눈다(/app/ 은 자막, /app/badge.html 은 사원증 식). 그때 새 문서는 이 파일을 그대로 불러오고 자기 화면 스타일만 따로 두면 된다 — 그래서 자막 전용 규칙을 여기에 넣지 않는다. 자막 화면의 스타일은 style.css 에 있고, 이 파일 ★다음에★ 불러온다(순서가 계약이다). 색과 글자는 원어썸(murbis-next 의 app/tokens.css)에서 가져온다. 두 사이트가 한 제품으로 보여야 하기 때문이다. 남색 바탕 + 네온 그린 강조. ★tokens.css 는 앞쪽 블록(흰 바탕, 주황)을 파일 맨 끝 블록이 통째로 덮는다.★ 실제 화면 색은 그 마지막 블록이고, 아래 값이 그것이다. ※ 클래스, ID 계약은 그대로 유지(app.js/index.html이 참조). ========================================================================== */ :root { /* ★변수 이름은 바꾸지 않는다.★ 이 스타일시트와 onboarding.js 가 이름으로 물고 있어서, 이름을 손대면 값이 맞아도 화면이 조용히 어긋난다. 값만 갈아끼운다. */ --bg:#010828; /* surface-0 앱 배경 */ --surface:#050f33; /* surface-1 패널, 카드 */ --surface-2:#08163f; /* surface-2 살짝 뜬 표면(hover) */ --surface-3:#0c1c4b; /* surface-3 한 단계 더 뜬 표면(hover 의 hover) */ --line:rgba(255,255,255,.10); /* edge-1 경계선 */ --line-soft:rgba(255,255,255,.06); /* 약한 경계(행 구분) */ --line-strong:rgba(255,255,255,.18); /* edge-2 강조 경계(hover 테두리) */ --tx:#eff4ff; /* ink-1 본문 */ --tx-2:rgba(239,244,255,.78); /* ink-2 보조 */ --dim:rgba(239,244,255,.58); /* ink-3 흐린 텍스트 */ --ink:#6fff00; /* accent 주요 강조(버튼, 선택) */ --ink-soft:#6fff00; /* accent 링크, 포커스 — 원어썸도 같은 값이다 */ /* ★네온 위에는 어두운 글자를 얹는다.★ 흰 글자를 얹으면 대비가 무너져 안 읽힌다 (원어썸의 accent-on 과 같은 값). 배경이 var(--ink) 인 자리는 전부 이 색을 쓴다. */ --ink-on:#010828; --ink-fill:rgba(111,255,0,.12); /* accent-tint 네온 채움 배경 */ --ink-line:rgba(111,255,0,.38); /* accent-line 네온 테두리 */ --flag:#ffc53d; /* warn 확인 필요 */ --flag-fill:rgba(255,197,61,.12); --flag-line:rgba(255,197,61,.38); --risk:#ff6369; /* err 나락 위험 */ --risk-fill:rgba(255,99,105,.12); --risk-line:rgba(255,99,105,.38); /* 고유명사 계열. 예전에는 옅은 파랑이었는데 남색 바탕 위에서는 바탕과 구별이 안 된다. 확인 필요(노랑), 나락(빨강), 강조(네온) 어디와도 겹치지 않는 원어썸 info(보라)를 쓴다. */ --noun:#b724ff; /* info — 채움, 테두리용 */ --noun-tx:#d9a2ff; /* 남색 위 보라 글자. info 원색은 10px 딱지에 대비가 모자란다(4.4:1) */ --noun-fill:rgba(183,36,255,.14); --noun-line:rgba(183,36,255,.42); /* ★완료에 초록을 쓰지 않는다.★ 강조가 네온 그린이라 완료에 다른 초록을 놓으면 두 초록이 서로를 오염시킨다(원어썸이 tokens.css 주석에 남긴 근거). 완료는 색이 아니라 조용함으로 말한다 — ink-2 로 한 단계 물러선다. */ --ok:rgba(239,244,255,.78); /* = --tx-2 */ /* 아래 넷은 style.css 등이 색을 직접 박아 쓰던 자리다. 라이트 모드를 만들면서 토큰으로 뺐다 — 테마마다 값이 달라야 하는데 박혀 있으면 한쪽에서만 맞는다. 다크 값은 종전과 같다. */ --cue-flag:rgba(255,197,61,.06); /* 확인 필요 자막 줄 바탕 */ --cue-risk:rgba(255,99,105,.07); /* 나락 위험 줄 바탕 */ --cue-noun:rgba(183,36,255,.07); /* 고유명사 줄 바탕 */ --veil:rgba(1,8,40,.74); /* 모달 뒤를 덮는 막 */ --panel-tint:rgba(255,255,255,.015); /* 아주 옅게 뜬 패널 */ --chip:rgba(255,255,255,.06); /* 작은 칩, 태그 바탕 */ /* ══ 계단 ══════════════════════════════════════════════════════════════════ ★값을 고르지 말고 계단에서 집는다.★ 지금 도구 열한 개가 쓰는 값을 세어 보니 글자 크기 14 종, 굵기 12 종, 모서리 18 종, 한 값짜리 여백 26 종이었다. 층이 열이면 층이 없는 것과 같아서, 화면을 봐도 무엇이 제목이고 무엇이 설명인지 눈이 못 고른다(질문지 사이드바 한 칸 안에 여섯 종이 함께 섰다). ★여기서는 정의만 한다.★ 도구를 하나씩 이 계단에 올리는 일은 따로 한다 — 껍데기를 고치면 열한 개가 동시에 바뀌므로, 한 도구씩 화면을 보며 옮겨야 한다. 실측 528 개 중 11.5(113), 12(92), 12.5(90), 13(71), 11(60) 다섯이 81%다. ★반픽셀을 없애는 것이 핵심★ - 11.5 와 12 는 다른 층이 아니라 안 맞춘 것으로 읽힌다. 10, 10.5, 11 → 11 / 11.5, 12 → 12 / 12.5, 13 → 13 13.5, 14, 15 → 15 / 16, 17, 18 → 18 / 22 → 24 */ --t-xs:11px; /* 딱지, 각주. 여기가 바닥이다 */ --t-sm:12px; /* 보조 설명 */ --t-md:13px; /* 본문 */ --t-lg:15px; /* 소제목 */ --t-xl:18px; /* 제목 */ --t-2xl:24px; /* 큰 제목 */ /* 굵기 셋. 620, 640, 650, 660 은 600 과 눈으로 구별되지 않는다(40 곳에 쓰였다). */ --w-reg:400; --w-semi:600; --w-bold:700; /* 여백. ★세로 여백은 짝수만★ - 홀수가 홀수 글자와 곱해져 반픽셀로 떨어진다. 지금 여백에 쓰인 숫자 997 개 중 630 개가 4 의 배수가 아니다(1px 부터 18px 까지 전부). */ --sp-1:2px; --sp-2:4px; --sp-3:8px; --sp-4:12px; --sp-5:16px; --sp-6:24px; --sp-7:32px; --sp-8:48px; /* 모서리 다섯 단이 지금 220 회 중 169 회를 그대로 덮는다. 2, 4, 5 → 4 / 6, 7 → 6 / 8, 9, 10 → 8 / 12, 14, 20 → 12 / 999 는 그대로 */ --r-xs:4px; --r-sm:6px; --r:8px; --r-lg:12px; --r-full:999px; /* 왼쪽 기준선. 표시줄 제목은 화면 왼쪽 196px 에서 시작하는데 그 아래 본문은 도구마다 202, 206, 210, 226px 에서 시작해 세로로 한 줄도 안 맞는다. 24px 은 질문지와 더빙이 이미 쓰는 값이다. */ --gutter:24px; --font-mono:ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; --read-max:62ch; --ink-glow:rgba(111,255,0,.16); --control-height:36px; /* 사이드바. 1728px 창에서 레일 182 를 빼면 1546 이고, 본문 상한 1180 을 채우려면 366 이하여야 한다. 1280 아래에서는 320 으로 줄인다. */ --side:360px; /* ★그림자는 세 단뿐이다.★ 종전에는 열 벌이 제각각이었고 토큰이 --shadow-pop 하나뿐이라, 밝은 테마에도 순검정 50%가 그대로 떨어졌다(검은 안개가 흰 종이 위에 앉는다). 번짐 크기로 세 무리로 갈리던 것을 그 세 무리에 맞춰 세운다. 1 = 바닥에 닿아 있는 것(작은 칩, 눌리는 단추) 2 = 살짝 떠 있는 것(펼친 목록, 떠 있는 판) 3 = 화면을 덮는 것(모달, 팝오버) ★밝은 테마는 검정이 아니라 남색을 옅게 깐다.★ 순검정은 밝은 바탕에서 때처럼 보인다. */ --shadow-1:0 1px 3px rgba(0,0,0,.45); --shadow-2:0 8px 22px rgba(0,0,0,.45); --shadow-3:0 16px 44px rgba(0,0,0,.52); /* ★잠긴 주 버튼의 테두리.★ --line-strong(18%)로는 안 된다 - 남색 버튼이 남색 바탕에 녹아 「누를 것이 있다」는 느낌이 사라진다(1.20:1). 38% 라야 3.47:1 로 윤곽이 읽힌다. ★테마마다 값이 달라야 한다.★ 종전에는 흰색 38%가 박혀 있어서, 밝은 테마에서는 흰 표면 위에 흰 테두리가 얹혀 윤곽이 아예 사라졌다 - 도구 열한 개가 그랬다. */ --line-btn:rgba(255,255,255,.38); /* ★도구 본문의 최대 폭 — 도구마다 따로 정하지 않는다.★ 그동안 도구가 저마다 숫자를 골라 더빙 760, 서치 레이더 900, 자막 첫 화면 940, 콘텐츠 서치 1180 이었다. 1546px 창(1728 - 레일 182)에서 더빙은 폭의 ★절반을 버렸고★ 성진님이 「이렇게 넓은 화면이 이렇게 나오는 건 진짜 별로」라고 했다. 값의 근거는 콘텐츠 서치다 — 넷 중 가장 넓고 이미 이 폭으로 운영해 왔다. ★읽는 글이 아니라 「일하는 화면」이라 넓은 쪽이 맞다.★ 본문 문단이 주인공인 화면을 새로 만들면 그 화면만 좁게 잡을 것(65자 규칙). 여기를 좁히지 마라. */ --content-max:1180px; /* 글꼴 — 원어썸 tokens.css 의 --font 에서 왔지만 ★차례를 바꿨다.★ ★대체 스택을 반드시 남긴다★ — CDN 이 막히면 글자가 통째로 어긋난다. ★왜 한글 글꼴을 Segoe UI 보다 앞에 두나(2026-09-01).★ 원어썸 차례는 Segoe UI 가 앞이었다. 그런데 ★Segoe UI 에는 한글이 없다.★ 윈도우에서 프리텐다드를 못 받으면 라틴은 Segoe UI, 한글은 맑은 고딕으로 글자마다 다른 글꼴이 섞인다. 두 글꼴은 높이와 굵기가 달라서 한 줄 안에서 들쭉날쭉해지고, 그게 「윈도우에서 글자가 깨진다」로 보인다(성진님 보고). 한글이 주인인 화면이라 한 글꼴로 그리는 쪽이 낫다 — 맑은 고딕의 라틴이 Segoe UI 보다 조금 못하지만, 섞이는 것보다 낫다. ★맥은 영향이 없다.★ -apple-system 이 먼저 잡히고 그 안에 한글이 있다. 맑은 고딕과 Apple SD Gothic Neo 는 서로 다른 운영체제에만 있어 부딪히지 않는다. */ --font:"Pretendard Variable","Pretendard",-apple-system,BlinkMacSystemFont, "Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR", "Segoe UI",sans-serif; /* ★다크 UI 라고 브라우저에 알린다.★ 이게 없으면 스크롤바, 기본 폼 컨트롤, 자동완성 배경을 브라우저가 ★라이트 기준★으로 그린다 — 어두운 화면 한복판에 밝은 회색 스크롤바 띠가 생겨 제일 눈에 띄는 요소가 되고, 스크롤 영역이 겹친 랜딩에서는 그 띠가 둘씩 보였다(성진님 지적). */ color-scheme: dark; } /* ══ 라이트 모드 ══════════════════════════════════════════════════════════════ ★값만 갈아끼운다.★ 이름은 그대로라 스타일시트와 onboarding.js 를 한 줄도 안 고쳐도 따라온다. ★네온 그린을 그대로 못 쓴다.★ #6fff00 은 흰 바탕에서 대비가 1.4:1 이라 글자로 안 읽힌다. 그런데 --ink 는 글자로 32번, 바탕으로 25번 쓰인다 — 둘 다 성립해야 한다. 그래서 라이트에서는 ★짙은 초록★으로 내리고, 그 위에 얹는 글자(--ink-on)를 흰색으로 뒤집는다. 「네온 위에 흰 글자를 두지 않는다」는 규칙은 다크 이야기이고, 여기서는 바탕이 짙은 초록이라 흰 글자가 맞다. 규칙의 뜻(바탕과 글자의 대비를 지킨다)은 그대로 지킨다. 바탕을 순백으로 두지 않는다 — 남색 브랜드라 아주 옅은 남색 기운을 남긴다. */ :root[data-theme="light"] { --bg:#f5f7fc; --surface:#ffffff; --surface-2:#eef1f9; --surface-3:#e3e9f5; --line:rgba(13,21,51,.13); --line-soft:rgba(13,21,51,.07); --line-strong:rgba(13,21,51,.24); --tx:#0d1533; --tx-2:rgba(13,21,51,.76); /* ★.56 → .66 (2026-09-08).★ 이 토큰이 11px 안팎 글씨에 두루 쓰이는데 밝은 바탕에서 대비가 4.0~4.15 로 기준(4.5) 아래였다(실측 - 레일 딱지, 카테고리 편수, 화면 설명줄). .66 이면 5.2 로 올라가고, --tx-2(6.9)보다는 흐려서 「본문/보조/흐림」 세 층은 그대로다. ★다크는 안 건드린다★ - 거기는 이미 6.2 로 넉넉하다. */ --dim:rgba(13,21,51,.72); --ink:#2f7a00; --ink-soft:#2f7a00; --ink-on:#ffffff; --ink-fill:rgba(47,122,0,.10); --ink-line:rgba(47,122,0,.40); --flag:#9a6100; --flag-fill:rgba(154,97,0,.10); --flag-line:rgba(154,97,0,.38); --risk:#c02a30; --risk-fill:rgba(192,42,48,.09); --risk-line:rgba(192,42,48,.36); --noun:#7b1fa2; --noun-tx:#6a1b9a; --noun-fill:rgba(123,31,162,.10); --noun-line:rgba(123,31,162,.38); --ok:rgba(13,21,51,.76); --cue-flag:rgba(154,97,0,.08); --cue-risk:rgba(192,42,48,.07); --cue-noun:rgba(123,31,162,.07); --veil:rgba(13,21,51,.42); --panel-tint:rgba(13,21,51,.02); --chip:rgba(13,21,51,.06); --shadow-1:0 1px 3px rgba(13,21,51,.10); --shadow-2:0 8px 22px rgba(13,21,51,.13); --shadow-3:0 16px 44px rgba(13,21,51,.18); /* ★실측으로 잡았다.★ 흰 표면(#eef1f9) 위에서 버튼 대비 3.54:1, 페이지 대비 3.74:1 - 다크의 흰색 38%(3.49:1 / 3.91:1)와 같은 값어치다. 46% 로는 2.97:1 이라 모자랐다. */ --line-btn:rgba(13,21,51,.52); /* ★브라우저에게도 알린다.★ 없으면 스크롤바와 기본 폼 컨트롤이 다크로 남아 흰 화면에 검은 띠가 선다. */ color-scheme: light; } * { box-sizing:border-box; } /* 스크롤바는 배경에 묻히게 — 필요할 때만 보이는 얇은 실선. 스크롤 영역이 여럿이라(랜딩 왼쪽 칸, 작업 목록, 자막 목록) 기본 두께로 두면 칸마다 경계선이 하나씩 더 그어진 것처럼 읽힌다. Firefox 와 최신 Chrome 은 scrollbar-width/color 를, 구형 WebKit 은 ::-webkit-scrollbar 를 본다. */ * { scrollbar-width: thin; scrollbar-color: var(--line) transparent; } ::-webkit-scrollbar { width:8px; height:8px; } ::-webkit-scrollbar-track { background:transparent; } ::-webkit-scrollbar-thumb { background:var(--line); border-radius:4px; } ::-webkit-scrollbar-thumb:hover { background:var(--line-strong); } ::-webkit-scrollbar-corner { background:transparent; } /* 높이 고정 없음 — 랜딩은 자연 스크롤, 편집화면(#stage)만 고정 높이로 내부 스크롤 */ /* 도구 이동은 일반 페이지 탐색으로 처리한다. 뒤로/앞으로 이동할 때 취소되는 문서 전환의 AbortError를 피하며, 초기 배경색은 각 문서의 head에서 유지한다. */ @view-transition { navigation: none; } body { margin:0; background:var(--bg); color:var(--tx); font:14px/1.55 var(--font); -webkit-font-smoothing:antialiased; } a { color:var(--ink-soft); text-decoration:none; } a:hover { text-decoration:underline; } .hidden { display:none !important; } .sp { flex:1; } /* ---- 버튼 ---- */ button { font:inherit; font-size:var(--t-md); color:var(--tx-2); background:var(--surface-2); border:1px solid var(--line); border-radius:6px; padding:6px 11px; cursor:pointer; transition:border-color .12s, color .12s, background .12s; } button:hover { color:var(--tx); border-color:var(--line-strong); background:var(--surface-3); } /* ★네온 바탕에는 어두운 글자.★ 흰 글자를 얹으면 대비가 무너져 글자가 사라진다. */ button.primary { color:var(--ink-on); background:var(--ink); border-color:var(--ink); font-weight:600; } /* 네온보다 밝은 색은 만들 수 없으므로 hover 는 색을 바꾸지 않고 후광으로만 알린다. */ /* ★호버는 네온이 돌게 한다★(성진님 지시, 2026-09-02). 예전엔 --ink-fill(네온 12%) 링 하나였는데, 이미 네온으로 꽉 찬 단추 둘레에 12% 를 두르면 눌리는 느낌이 안 났다. 링을 32% 로 올리고 바깥에 번짐을 하나 더 둔다. ★단추 색은 그대로 둔다★ — 글자(--ink-on)와의 대비가 여기 걸려 있어 배경을 밝히면 그 대비가 무너진다. 밝아지는 것은 둘레뿐이다. ★:not(:disabled) 를 반드시 붙인다★ — 안 붙이면 잠긴 단추도 손을 올리면 빛나서 누를 수 있는 것처럼 보인다(아래 :disabled 규칙은 box-shadow 를 안 지운다). */ button.primary:not(:disabled):hover { background:var(--ink); border-color:var(--ink); box-shadow:0 0 0 3px rgba(111,255,0,.32), 0 0 16px 2px rgba(111,255,0,.42); } button:disabled { opacity:.4; cursor:default; color:var(--dim); } /* ★네온 버튼은 흐리게 만들면 글자가 사라진다.★ 위 규칙이 글자를 --dim(밝은 회색)으로 덮는데, 그게 흐려진 네온 위에 얹히면 대비가 무너져 글자가 아예 안 읽힌다(질문지의 「만들기」에서 실제로 그랬다). 그래서 네온을 벗기고 조용한 표면으로 바꾼다 — 흐리게 하는 대신 색을 낮춘다. opacity 를 1 로 되돌리는 것이 핵심이다. 안 그러면 바꾼 색도 같이 흐려진다. */ /* ★재고 나서 고쳤다(2026-09-01). 문제는 글자색이 아니라 「버튼으로 안 보이는 것」이었다.★ 처음엔 글자 대비가 낮은 줄 알았는데 재보니 5.76:1 로 충분했다. 진짜 문제는 남색 버튼이 남색 페이지 위에 있어 ★형태가 1.20:1★ 로 배경에 녹아 버린 것이다. 글자만 떠 있고 누를 것이 있다는 느낌이 없었다. 그래서 색이 아니라 ★테두리★를 세운다. 흰색 38% 면 페이지 대비 3.47:1 로 윤곽이 읽힌다 (18% 는 1.62:1 이라 안 보인다). 글자는 --tx-2 로 한 단 올려 9.95:1. */ button.primary:disabled { opacity:1; color:var(--tx-2); background:var(--surface-2); border-color:var(--line-btn); } /* ══ 표시줄 제목과 부제 — 열 도구가 같은 자리에 같은 것을 그린다 ══════════════ ★도구를 옮길 때마다 같은 자리의 같은 글자가 크기와 굵기를 바꿨다.★ 제목이 13/700, 13/600, 14/700, 14/600 네 벌, 부제가 11.5, 12, 12.5 세 벌이었다. 가장 많이 쓰던 값(제목 13/700 이 넷, 부제 12 가 다섯)으로 모은다. ★반픽셀을 없앤다.★ 11.5 와 12 는 다른 층이 아니라 안 맞춘 것으로 읽힌다. */ .badge-title, .ppt-title, .q-title, .tb-title-bar, .ins-title, .rd-title, .map-title, .sh-apptitle, .search-title, .dub-title { font-size:var(--t-md); font-weight:var(--w-bold); } .badge-sub, .ppt-sub, .q-sub, .tb-sub, .ins-sub, .rd-sub, .map-sub, .sh-appsub, .search-sub, .dub-sub { font-size:var(--t-sm); font-weight:var(--w-reg); } /* ══ 포커스 링 — 탭 키로 다니는 사람에게 지금 어디인지 알린다 ══════════════ ★취향이 아니라 결함이었다.★ 포커스 표시가 도구마다 여덟 벌이었고 그중 여섯 곳은 아무 표시 없이 지워져 있었다 - 탭 키로 화면을 돌면 커서가 어디 있는지 알 수 없다. ★:focus 가 아니라 :focus-visible 이다.★ :focus 로 두면 마우스로 눌러도 링이 떠서 보기 싫다는 이유로 다시 지우게 된다. 브라우저가 「키보드로 왔다」고 판단할 때만 그린다. ★:where 로 감싼다.★ 명시도가 0 이라 도구가 자기 링을 따로 그리면 그쪽이 이긴다 (더빙의 2px, 콘텐츠 서치의 3px offset 은 그 화면에 맞춰 고른 값이라 살린다). 여기 있는 것은 아무도 안 정했을 때의 바닥이다. */ :where(a, button, input, textarea, select, summary, [tabindex], [contenteditable="true"]):focus-visible { outline:2px solid var(--ink); outline-offset:2px; border-radius:var(--r-xs); } /* ══ 로그인 카드 — 열 도구가 같은 카드를 열 벌 그렸다 ══════════════════════ ★도구를 처음 여는 사람에게는 이 화면이 제품의 첫인상 전부다.★ 그런데 제목이 15/16/17/18/19px 다섯 벌, 설명이 12.5/13px 두 벌, 주석이 11/11.5/12px 세 벌, 모서리가 10/12/14px 세 벌이었다. 같은 카드가 도구를 옮길 때마다 조금씩 달라 보였다. ★간격은 여기서 정하지 않는다.★ 카드 안쪽이 두 구조로 갈려 있다 — 질문지·PPT·제목썸네일·사원증은 블록에 margin 으로 띄우고, 콘텐츠 서치·소제목·세계지도는 flex 에 gap 으로 띄운다. 여기서 margin 을 주면 gap 과 겹쳐 간격이 두 배로 벌어진다. 구조까지 하나로 모으는 일은 도구를 계단에 올릴 때 한 도구씩 화면을 보며 한다. */ .badge-login-card, .dub-login-card, .ins-login-card, .map-login-card, .ppt-login-card, .q-login-card, .rd-login-card, .search-login-card, .sh-login-card, .tb-login-card { max-width:380px; text-align:center; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); } .badge-login-card h2, .dub-login-card h2, .ins-login-card h2, .map-login-card h2, .ppt-login-card h2, .q-login-card h2, .rd-login-card h2, .search-login-card h2, .sh-login-card h2, .tb-login-card h2 { font-size:var(--t-xl); font-weight:var(--w-semi); color:var(--tx); } .badge-login-card p, .dub-login-card p, .ins-login-card p, .map-login-card p, .ppt-login-card p, .q-login-card p, .rd-login-card p, .search-login-card p, .sh-login-card p, .tb-login-card p { font-size:var(--t-md); line-height:1.6; color:var(--tx-2); } .badge-login-card button, .dub-login-card button, .ins-login-card button, .map-login-card button, .ppt-login-card button, .q-login-card button, .rd-login-card button, .search-login-card button, .sh-login-card button, .tb-login-card button { font-size:var(--t-md); } /* 카드 맨 아래 한 줄(「@awesomeent.kr 계정만…」). 본문보다 한 단 물러선다. */ .badge-login-note, .dub-login-note, .ins-login-note, .map-login-note, .ppt-login-note, .q-login-note, .rd-login-note, .search-login-note, .sh-login-note, .tb-login-note { font-size:var(--t-xs); color:var(--dim); } /* ══ 껍데기 — 왼쪽 레일 + 작업 칸 ══ 원어썸 toolsShell 과 같은 갈래다. body 가 가로 두 칸이고, 오버레이는 position:fixed 라 이 배치 밖에 있다(그래서 레일 위에도 그대로 덮인다). 원어썸과 같이 PC 전용(1440px 기준)이다. */ body { display:flex; height:100vh; overflow:hidden; } .pane { flex:1; min-width:0; height:100vh; display:flex; flex-direction:column; overflow:hidden; } /* ---- 왼쪽 레일 ---- 사양은 원어썸 navRail.module.css 를 그대로 옮겼다(폭 182, 아이콘 18, 글자 13, 줄 높이 36). ★레일은 「일하는 화면」의 껍데기라 조용해야 한다.★ 지금 있는 곳만 밝다. */ .rail { width:182px; flex:none; display:flex; flex-direction:column; height:100vh; overflow-y:auto; padding:12px 0 16px; background:var(--surface); border-right:1px solid var(--line); } /* 브랜드 — 신원 표시다. 누르는 자리가 아니다(나가는 링크는 바로 아래 #siteLink). */ .rail-brand { display:flex; align-items:center; gap:8px; padding:8px 16px 16px; } .rail-mark { width:18px; height:18px; object-fit:contain; flex:none; } .rail-wordmark { font-size:var(--t-lg); line-height:1; letter-spacing:.015em; font-weight:700; color:var(--tx-2); white-space:nowrap; } .rail-groups { display:flex; flex-direction:column; } /* 갈래 사이는 글자가 아니라 얇은 선으로 나눈다 — 열 줄짜리 목록에 라벨을 다섯 개 더 붙이면 읽을 것만 늘어난다(원어썸의 판단을 그대로 따른다). */ .rail-group + .rail-group { margin-top:8px; padding-top:8px; border-top:1px solid var(--line); } /* 한 줄. a / button / span 셋으로 쓰이므로 button 기본 모양을 전부 눌러 둔다. */ .rail-item { display:flex; align-items:center; gap:12px; width:100%; min-height:36px; padding:0 16px; background:none; border:none; border-radius:0; font:inherit; text-align:left; color:var(--dim); text-decoration:none; transition:background-color .12s, color .12s; } .rail-icon { width:18px; height:18px; flex:none; } .rail-name { font-size:var(--t-md); line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* 쓸 수 있는 줄만 hover 가 산다. */ a.rail-item, button.rail-item { cursor:pointer; } a.rail-item:hover, button.rail-item:hover { background:var(--surface-2); color:var(--tx); text-decoration:none; border:none; } /* ★전역 포커스가 네온이라 활성 줄의 네온 막대와 겹쳐 사방이 초록 상자가 된다.★ 레일에서는 흰 링을 쓴다. */ .rail-item:focus-visible { outline:2px solid var(--tx); outline-offset:-2px; } /* ★지금 여기.★ 화면에서 네온이 쉬는 상태로 보이는 유일한 자리다. */ .rail-item.is-on, button.rail-item.is-on:hover { background:var(--surface-2); color:var(--tx); box-shadow:inset 2px 0 0 var(--ink); } .rail-item.is-on .rail-icon { color:var(--ink); } /* ★아직 못 쓰는 도구.★ 죽은 링크로 두지 않는다 — 마크업부터 가 아니라 이라 누를 수 없고, 커서도 기본값이고, 탭으로도 안 잡힌다. 흐리게 해서 눈으로도 구분된다. */ .rail-item.is-off { color:var(--dim); opacity:.5; cursor:default; } .rail-item.is-off:hover { background:none; } /* 「원어썸으로」 — 목록이 아니라 밖으로 나가는 줄이라 아래에 여백을 둔다. */ .rail-back { margin-bottom:8px; } /* 통합 관리자 — 별도 로그인을 한 번 더 묻는다는 것을 딱지로 드러낸다. 글자로 적는 이유: 자물쇠 아이콘만으로는 「잠겨서 못 쓴다」로 읽힌다. ★딱지를 이름과 같은 줄에 두면 안 된다★ — 레일 폭이 182px 라 「통합 관…」으로 잘렸다. 이름 아래로 내리고 줄 높이만 조금 키운다. */ .rail-admin { min-height:44px; } .rail-admin-txt { display:flex; flex-direction:column; gap:1px; min-width:0; } .rail-tag { align-self:flex-start; padding:1px 5px; border-radius:4px; font-size:var(--t-xs); line-height:1.5; font-weight:600; letter-spacing:.01em; white-space:nowrap; color:var(--dim); background:var(--surface-2); border:1px solid var(--line); } a.rail-admin:hover .rail-tag { color:var(--tx-2); border-color:var(--line-strong); } /* 왜 대부분이 흐린지 — 늘 보이는 자리에 한 줄. 딱지를 줄마다 붙이면 읽을 것만 늘어난다. */ .rail-note { margin:auto 16px 0; padding-top:16px; font-size:var(--t-xs); line-height:1.5; color:var(--dim); opacity:.72; } /* h1 은 문서 제목으로 남기고 모양은 레일 줄이 정한다. */ h1 { font-size:var(--t-lg); margin:0; } .rail-h1 { margin:0; font:inherit; font-weight:inherit; } /* ---- 작업 표시줄 ---- 예전 헤더가 이 자리로 왔다. 도구 목록만 레일로 나갔고 나머지는 그대로다 — 레일은 「어디로 가나」, 이 줄은 「이 화면에서 무엇을 하나」다. */ .appbar { min-height:56px; height:auto; flex:none; padding:8px var(--gutter); border-bottom:1px solid var(--line); display:flex; align-items:center; gap:10px; background:var(--bg); z-index:5; } #modelStat { color:var(--dim); font-size:var(--t-sm); } /* 버튼 그룹(구분선으로 유틸/내보내기 구분) */ .hgroup { display:flex; align-items:center; gap:6px; } .hgroup:empty { display:none; } .hgroup + .hgroup { margin-left:8px; padding-left:10px; border-left:1px solid var(--line); } /* ---- 로그인 만료 예고 띠 ---- 작업 칸 맨 위, 표시줄 바로 아래. 뜨면 아래 화면이 그만큼 줄어든다(덮지 않는다) — 자막 목록 위에 겹쳐 뜨면 지금 보고 있던 줄을 가린다. ★경고 색(노랑)을 쓴다.★ 아직 못 쓰게 된 것이 아니라 곧 그렇게 된다는 예고다. */ .sessionbar { flex:none; display:flex; align-items:center; gap:12px; padding:9px 14px; border-bottom:1px solid var(--flag-line); background:var(--flag-fill); color:var(--tx); font-size:var(--t-md); } .sessionbar-msg { flex:1 1 auto; min-width:0; } .sessionbar button { flex:none; white-space:nowrap; } .sessionbar button.prim { background:var(--flag); border-color:var(--flag); color:var(--ink-on); font-weight:700; } .sessionbar button.prim:hover { background:var(--flag); border-color:var(--flag); box-shadow:0 0 0 3px var(--flag-fill); } /* 이미 지났으면 예고가 아니라 사실이다 — 빨강으로 올린다. */ .sessionbar.is-over { border-bottom-color:var(--risk-line); background:var(--risk-fill); } .sessionbar.is-over button.prim { background:var(--risk); border-color:var(--risk); } .sessionbar.is-over button.prim:hover { box-shadow:0 0 0 3px var(--risk-fill); } /* 계정 배지 — 평소에 배경/테두리가 투명이라 누를 수 있는 것으로 안 보였다. 쉬는 상태에서도 테두리와 배경을 줘서 '컨트롤'임을 드러낸다(hover 는 강조만 담당). */ #userBadge { font-size:var(--t-sm); padding: 5px 10px 5px 6px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; color: var(--tx-2); transition: background .15s, border-color .15s, color .15s; } #userBadge:hover { color: var(--tx); background: var(--surface-3); border-color: var(--line-strong); } #userBadge #userBadgeName { color: var(--tx); font-weight: 600; } /* 팝오버가 열려 있는 동안은 눌린 상태로 보이게 — 어디서 열렸는지 연결이 보인다. */ #userMenu:has(#userPop:not(.hidden)) #userBadge { background: var(--surface-3); border-color: var(--ink-soft); color: var(--tx); } /* ── 사용자 메뉴(배지 → 계정 팝오버) ── confirm() 은 앱 밖처럼 보이고 계정 정보를 함께 보여줄 수 없어 팝오버로 바꿨다. */ /* ★모든 도구의 글상자에서 크기 조절 손잡이를 뺀다★(성진님, 2026-09-08). 오른쪽 아래 삼각 손잡이가 칸마다 붙어 화면이 지저분했고, 끌어 늘린 칸은 다시 맞추기 전까지 옆 칸과 높이가 어긋난 채 남는다. 도구마다 따로 적지 않고 여기 한 곳에서 못 박는다 - 새 도구가 들어와도 저절로 따른다. ★크기가 필요한 칸은 rows 나 min-height 로 준다★(손으로 늘릴 일이 없게). */ textarea { resize: none; } /* ── 오른쪽 위 묶음(밝기 + 계정) ───────────────────────────────────────────── 밝기 단추를 레일 맨 아래에서 여기로 옮겼다(성진님, 2026-09-08 - 「수시로 계속 바꿀 수 있게」). 레일 아래쪽은 도구를 쓰는 중에 눈도 손도 안 가는 자리였다. */ .shell-right { display: flex; align-items: center; gap: 8px; } .themeTop { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; flex: none; border-radius: 8px; border: 1px solid var(--line); background: var(--surface-2); color: var(--tx-2); cursor: pointer; transition: color .12s, border-color .12s, background .12s; } .themeTop:hover { color: var(--tx); background: var(--surface-3); border-color: var(--line-strong); } .themeTop:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; } /* svg() 헬퍼가 레일용 크기로 만들어 준다 - 표시줄에서는 한 치수 작게 쓴다. */ .themeTop .rail-icon { width: 16px; height: 16px; } .userMenu { position: relative; } .userMenu > #userBadge { display: inline-flex; align-items: center; gap: 7px; } /* 펼침 표시 — 열려 있으면 뒤집어 상태를 드러낸다. */ .userMenu > #userBadge .chev { width: 12px; height: 12px; flex: none; color: var(--dim); transition: transform .15s, color .15s; } #userBadge:hover .chev { color: var(--tx-2); } #userMenu:has(#userPop:not(.hidden)) .chev { transform: rotate(180deg); color: var(--tx); } .avatar { width: 20px; height: 20px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center; background: var(--ink); color: var(--ink-on); font-size:var(--t-xs); font-weight: 700; line-height: 1; } .avatar.lg { width: 34px; height: 34px; font-size: 14px; } .userPop { position: absolute; top: calc(100% + 8px); right: 0; z-index: 40; min-width: 216px; padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 11px; box-shadow: var(--shadow-3); } .userPop-head { display: flex; align-items: center; gap: 10px; padding: 10px 10px 12px; } .userPop-id { min-width: 0; text-align: left; } .userPop-id strong { display: block; font-size:var(--t-md); color: var(--tx); } /* 이메일은 길어서 넘칠 수 있다 — 줄바꿈 대신 말줄임으로 폭을 고정한다. */ .userPop-id span { display: block; margin-top: 2px; font-size:var(--t-sm); color: var(--dim); max-width: 168px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .userPop-item { width: 100%; text-align: left; padding: 9px 10px; border-radius: 7px; background: transparent; border: none; border-top: 1px solid var(--line); font-size:var(--t-md); color: var(--tx-2); } .userPop-item:hover { background: var(--surface-2); color: var(--tx); border-color: var(--line); } /* ══ 로그인 화면 깜빡임 막기 ═══════════════════════════════════════════════ `html.has-session` 은 config.js 가 첫 페인트 전에 단다(scripts/prepare-site.js 의 PREPAINT_SESSION 참고). 세션이 이미 있는 사람에게 로그인 카드를 잠깐 그렸다 지우던 것을 아예 안 그리게 한다 — 도구 사이를 옮길 때마다 한 번씩 번쩍이던 자리다(성진님 지적). ★감추는 것은 로그인 카드뿐이다.★ 작업 영역은 계속 body.logged-out 이 닫아 둔다 (fail closed 는 그대로다). 저장된 세션이 서버에서 거절당하면 applyAuthGate 가 곧 카드를 도로 세운다 — 그때는 잠깐 빈 칸이 보일 뿐 작업 영역이 열리지는 않는다. ⚠️ 도구를 새로 옮길 때 그 도구의 로그인 카드 클래스를 ★여기에 더해야 한다.★ 안 더하면 그 도구만 다시 번쩍인다(오류는 안 난다). */ html.has-session :is( .badge-login, .ppt-login, .map-login, .q-login, .sh-login, .search-login, .tb-login, .rd-login, .ins-login, .dub-login /* 더빙 - 2026-09-09 빠져 있어서 더빙으로 옮길 때마다 로그인 카드가 번쩍였다(성진님 제보) */ ) { display: none !important; } /* ══ 나가기 물어보기 (shell.js 의 leaveDialog) ═══════════════════════════════ ★native confirm() 을 대신한다★(성진님 지적, 2026-09-02 — 「너무 올드하고 완성되지 못한 느낌」). 브라우저가 그리던 창은 우리 화면과 결이 다르고 주소가 크게 박혔다. 웹 조사로 정한 배치 — AWS Cloudscape 의 「Leave page」 패턴대로 오른쪽 아래 가로, 나가기가 오른쪽이다. ★기본 포커스는 「여기 있기」★ 라서 엔터를 습관적으로 눌러도 안 나간다(그 판정은 shell.js 가 한다). */ .leaveAsk { position:fixed; inset:0; z-index:60; display:grid; place-items:center; padding:24px; background:rgba(1,8,40,.74); backdrop-filter:blur(2px); } .leaveAsk-card { width:100%; max-width:420px; padding:22px 22px 18px; background:var(--surface); border:1px solid var(--line-strong); border-radius:14px; box-shadow:var(--shadow-3); } /* 도구가 준 문장을 그대로 쓴다 - 줄바꿈이 뜻을 나누므로 살린다. */ .leaveAsk-body { margin:0; font-size:var(--t-lg); line-height:1.75; color:var(--tx); white-space:pre-line; word-break:keep-all; } .leaveAsk-foot { display:flex; justify-content:flex-end; gap:8px; margin-top:20px; } /* ★두 단추를 떼어 놓는다.★ 붙여 두면 되돌리기 힘든 쪽을 잘못 누른다(조사에서 나온 규칙). */ .leaveAsk-foot .leaveAsk-go { margin-left:6px; } .leaveAsk-stay, .leaveAsk-go { padding:8px 16px; font-size:var(--t-md); } /* 원작 제작자 이름은 상단에서 강조하고 자세한 관계는 팝오버에 표시한다. */ .cred { position:relative; display:flex; align-items:center; margin-right:8px; padding-right:10px; border-right:1px solid var(--line); } .cred-btn { display:inline-flex; align-items:center; gap:8px; min-height:34px; padding:4px 10px; border-radius:8px; background:var(--surface); border:1px solid var(--line-strong); font-size:var(--t-sm); line-height:1.4; color:var(--tx-2); white-space:nowrap; } .cred-btn:hover { background:var(--surface-2); border-color:var(--line); color:var(--tx-2); } .cred-btn:hover .cred-name { color:var(--tx); } .cred-btn:focus-visible { outline:2px solid var(--ink); outline-offset:2px; } /* 열려 있는 동안 눌린 상태 — 계정 배지와 같은 규약(320행). */ .cred:has(.credPop:not(.hidden)) .cred-btn { background:var(--surface-3); border-color:var(--ink-soft); color:var(--tx-2); } .cred-key { color:var(--tx-2); } .cred-name { color:var(--tx); font-size:var(--t-md); font-weight:650; } .cred-team { color:var(--dim); } /* 좁아지면 정보가 적은 것부터 접는다. 표시줄에는 도구 이름과 부제가 이미 있다. */ @media (max-width:900px) { .cred-team { display:none; } } /* ── 펼친 판 ── .userPop 의 값을 그대로 쓴다(361~366행). 나란히 떠도 같은 깊이다. */ .credPop { position:absolute; top:calc(100% + 8px); right:0; z-index:40; width:min(300px, calc(100vw - 24px)); padding:6px; box-sizing:border-box; overflow-y:auto; background:var(--surface); border:1px solid var(--line); border-radius:11px; box-shadow:var(--shadow-3); } .credPop:focus { outline:none; } /* ★첫 줄이 라벨이다.★ 계정 팝오버에는 라벨이 없다 - 이 한 줄이 「내 계정이 아니다」를 즉시 말한다. */ .credPop-cap { margin:0; padding:8px 10px 2px; font-size:var(--t-xs); color:var(--dim); } .credPop-head { display:flex; align-items:center; gap:10px; padding:6px 10px 12px; } /* ★얼굴은 여기서만 나온다.★ 그리고 네온을 안 쓴다 - 네온은 레일에서 「지금 여기」를 뜻해서 사람 이니셜에 쓰면 그 뜻이 옅어진다. 중성 표면에 테두리로 그린다. */ .avatar.ghost { background:var(--surface-2); color:var(--tx-2); box-shadow:inset 0 0 0 1px var(--line-strong); } .credPop-id { min-width:0; text-align:left; } .credPop-id strong { display:block; font-size:var(--t-md); color:var(--tx); font-weight:600; } .credPop-id span { display:block; margin-top:2px; font-size:var(--t-sm); color:var(--dim); } .credPop-note { margin:0; padding:0 10px 12px; font-size:var(--t-md); line-height:1.6; color:var(--tx-2); word-break:keep-all; } .credPop-more { margin:0; padding:0 10px 6px; font-size:var(--t-xs); color:var(--dim); border-top:1px solid var(--line-soft); padding-top:8px; } /* 줄 하나 = 레일 줄의 축소판. 지금 보는 도구도 빼지 않고 「지금 여기」로 표시한다. */ .credPop-tool { display:flex; align-items:center; gap:8px; min-height:30px; padding:0 10px; border-radius:7px; font-size:var(--t-md); color:var(--tx-2); text-decoration:none; } .credPop-tool:hover { background:var(--surface-2); color:var(--tx); text-decoration:none; } .credPop-tool:focus-visible { outline:2px solid var(--ink); outline-offset:-2px; } /* 레일의 「지금 여기」 신호(251~255행)를 그대로 빌린다. */ .credPop-tool.is-here { background:var(--surface-2); color:var(--tx); box-shadow:inset 2px 0 0 var(--ink); cursor:default; } .credPop-tool .rail-icon { width:15px; height:15px; flex:none; color:var(--dim); } .credPop-tool.is-here .rail-icon { color:var(--ink); } /* 도구를 바꿔도 같은 높이에서 누르고 읽도록 주 동작의 크기를 공유한다. */ :where(.q-btn, .ppt-btn, .tb-btn, .dropbtn, .googleBtn, .btn, .sh-btn) { min-height:var(--control-height); } @media (max-width:760px) { :root { --gutter:16px; } .appbar { flex-wrap:wrap; } } /* 좁은 창에서는 도구 이름을 아이콘 아래에 두어 작업 칸의 폭을 확보한다. */ @media (max-width:760px) { .rail { width:76px; } .rail-brand { justify-content:center; padding:8px 4px 16px; } .rail-wordmark { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); } .rail-item { flex-direction:column; justify-content:center; gap:4px; min-height:64px; padding:8px 4px; } .rail-name { font-size:var(--t-xs); white-space:normal; text-align:center; overflow:visible; } .rail-note { margin-inline:8px; } .hgroup { flex-wrap:wrap; } }