/* 자동 생성 — mockup/src/build_all.py 가 유일한 출처다. 직접 고치지 말 것. */ :root{ --red:#EB081B; --red-7:#B8000F; --red-9:#A40311; --red-1:#FDE7E9; /* --k4 는 #A4A4A4 였다 — 흰 바탕에서 2.2:1 이라 본문 크기 글자(빵부스러기 · 연혁 월 · 첨부 한도 · placeholder · 힌트)가 기준(4.5:1)에 못 미쳤다. #737373 은 4.7:1(8바퀴 검토, 사용자 결정 2026-09-20). 37곳 전부 글자색이라 모양은 그대로다. */ --k9:#0D0D0D; --k8:#2B2B2B; --k7:#484848; --k6:#535353; --k4:#737373; --k3:#C9C9C9; --k2:#E5E5E5; --k1:#F8F8F8; --er:#C0392B; /* 폼 오류 한 곳에서만 쓴다 */ --gold:#B8912F; --kr:"Pretendard","Pretendard Variable",system-ui,sans-serif; --lt:"IBM Plex Sans","Pretendard",system-ui,sans-serif; --lg:"Archivo","IBM Plex Sans",system-ui,sans-serif; } body{margin:0;background:#e9e9e6;font-family:var(--kr);color:var(--k9);} a{color:var(--red-7);} a:hover{color:var(--red-9);} .dv-turn{padding:40px 44px 32px;border-bottom:1px solid rgba(0,0,0,.08);} .dv-thd{display:flex;align-items:baseline;gap:10px;margin:0 0 8px;} .dv-tid{font:600 10px ui-monospace,Menlo,monospace;padding:3px 7px;background:#1a1a1a;color:#fff;border-radius:4px;text-decoration:none;} .dv-tname{font:600 13px/1.2 var(--kr);color:#1a1a1a;} .dv-note{margin:0 0 22px;font:400 11.5px/1.6 var(--kr);color:rgba(0,0,0,.5);max-width:920px;} .dv-opts{display:flex;flex-wrap:wrap;gap:34px;align-items:flex-start;} .dv-opt{flex:none;display:flex;flex-direction:column;gap:9px;scroll-margin-top:16px;} .dv-oid{font:600 10.5px ui-monospace,Menlo,monospace;padding:3px 7px;background:rgba(0,0,0,.08);color:#1a1a1a;border-radius:5px;text-decoration:none;} .dv-olabel{display:flex;align-items:baseline;gap:8px;font:400 11px/1.4 var(--kr);color:rgba(0,0,0,.55);max-width:1280px;} .dv-card{background:#fff;border:1px solid rgba(0,0,0,.1);overflow:hidden;} .dv-opt:target .dv-oid{background:#2a78d6;color:#fff;} .dv-next{margin:22px 0 0;font:12px/1.6 var(--kr);color:rgba(0,0,0,.5);} .ko-sym{width:34px;height:34px;display:block;} .ko-wm{font-family:var(--lg);font-weight:700;letter-spacing:.01em;line-height:1;} .num{font-family:var(--lt);font-variant-numeric:tabular-nums;font-feature-settings:"tnum";} .eng{font-family:var(--lt);} /* ── 공통 헤더 ─────────────────────────── */ /* 스크롤해도 메뉴가 따라온다. 서브 페이지는 흰 헤더가 그대로 붙는다. */ .hd{position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;padding:0 44px;height:78px;border-bottom:1px solid var(--k2);background:#fff;} .hd-nav{display:flex;align-items:center;gap:32px;font-size:14.5px;font-weight:600;} .hd-nav a,.tab,.ft-nav a,.hd-logo{color:inherit;text-decoration:none;} /* `.hd-nav a` 가 이 규칙보다 구체적이라 색을 가져간다. a 를 붙여 되찾는다 — 안 그러면 검은 버튼에 검은 글씨가 된다(메인은 부모가 흰 글씨라 우연히 가려졌다). */ .hd-cta,a.hd-cta{background:var(--k9);color:#fff;padding:9px 18px;font-size:13.5px;} /* 같은 병 — `.hd-nav a{color:inherit}` 가 이겨 지금 있는 메뉴가 빨갛지 않았다. a 를 붙여 되찾는다 */ .hd-on,.hd-nav a.hd-on{color:var(--red);} .hd-lang{position:relative;display:inline-flex;align-items:center;margin-left:10px;} .hd-lang-t{position:relative;display:inline-flex;align-items:center;gap:5px;padding:0;border:0;background:none;cursor:pointer;font:inherit;font-size:12.5px;font-weight:700;letter-spacing:.02em;color:var(--k9);} .hd-lang-c{width:0;height:0;border:3.5px solid transparent;border-top-color:var(--k4);border-bottom:0;margin-top:2px;} .hd-lang-t:hover .hd-lang-c{border-top-color:var(--k9);} .hd-lang-m{position:absolute;top:calc(100% + 9px);right:0;z-index:30;min-width:104px;padding:5px 0;background:#fff;border:1px solid var(--k2);border-radius:3px;box-shadow:0 6px 20px rgba(0,0,0,.09);} .hd-lang-o{display:block;padding:7px 14px;font-size:12.5px;font-weight:500;color:var(--k6);text-decoration:none;white-space:nowrap;} .hd-lang-o:hover{background:var(--k1);color:var(--k9);} .hd-lang-on{font-weight:700;color:var(--k9);} .car-hd .hd-lang-t{color:#fff;} .hd-lang-t::before{content:"";position:absolute;left:-6px;right:-6px;top:-10px;bottom:-10px;} /* 누름 영역만 넓힌다 */ .car-hd .hd-lang-c{border-top-color:rgba(255,255,255,.6);} .car-hd .hd-lang-t:hover .hd-lang-c{border-top-color:#fff;} /* ── 서브 비주얼 ───────────────────────── */ .sv{position:relative;height:200px;background:#1b1e23;overflow:hidden;display:flex;align-items:center;} .sv::before{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.04) 0 10px,transparent 10px 20px);} .sv-in{position:relative;z-index:2;padding:0 44px;} .sv-eye{font-family:var(--lt);font-size:11.5px;letter-spacing:.12em;color:rgba(255,255,255,.5);margin-bottom:10px;} .sv-t{font-size:36px;font-weight:800;color:#fff;letter-spacing:-.02em;margin:0;} .sv-tag{position:absolute;right:20px;top:20px;z-index:3;font:500 10px/1.5 ui-monospace,Menlo,monospace;color:rgba(255,255,255,.5);background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.14);padding:5px 8px;} /* ── 서브 탭 + 브레드크럼 ──────────────── */ .tabs{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--k2);padding:0 44px;background:#fff;} .tab-list{display:flex;} .tab{padding:16px 20px;font-size:14px;font-weight:600;color:var(--k6);border-bottom:2px solid transparent;margin-bottom:-1px;} .tab-on{color:var(--k9);border-bottom-color:var(--red);} .crumb{font-size:12px;color:var(--k4);} /* ── 본문 ─────────────────────────────── */ .wrap{padding:56px 44px 64px;} .h2{font-size:26px;font-weight:700;letter-spacing:-.02em;margin:0 0 8px;} .h2-sub{font-size:14px;color:var(--k6);margin:0 0 28px;} .lead{font-size:16.5px;line-height:1.85;color:var(--k7);} .hr{height:1px;background:var(--k2);border:0;margin:0;} /* 이미지 자리 */ .ph{position:relative;background:#ececeb;background-image:repeating-linear-gradient(135deg,rgba(0,0,0,.04) 0 10px,transparent 10px 20px);} .ph-t{position:absolute;left:12px;top:12px;font:500 10px/1.5 ui-monospace,Menlo,monospace;color:rgba(0,0,0,.45);background:rgba(255,255,255,.82);padding:5px 8px;} /* 연혁 타임라인 */ /* 연월 칸은 글자가 커지면 함께 늘어야 한다. 고정 px 로 두면 브라우저 · OS 의 글자 크기를 키운 사람에게 네 자리 연도가 옆 칸을 파고든다(1.3배부터). minmax 라 평소에는 내용이 더 좁아 96px · 56px 그대로다 — 픽셀이 달라지지 않는다. */ /* 연혁 왼쪽 제목. 오른쪽 목록이 길어 따라 내려온다. 1 열로 접히는 폭에서는 풀어야 한다 — 붙은 채로 두면 배경이 없어 목록 글자가 제목 위를 그대로 지나간다(운영자가 실제로 발견한 겹침). */ .hy-side{position:sticky;top:calc(var(--hd) + 24px);} .hy-list{padding-left:28px;border-left:1px solid var(--k2);} .hy{display:grid;grid-template-columns:minmax(96px,max-content) minmax(56px,max-content) 1fr;border-bottom:1px solid var(--k2);} .hy-y{padding:16px 0 16px 4px;} .hy-yn{font-family:var(--lt);font-variant-numeric:tabular-nums;font-size:26px;font-weight:800;letter-spacing:-.02em;} .hy-m{font-family:var(--lt);font-variant-numeric:tabular-nums;padding:22px 0 16px;font-size:13px;color:var(--k4);} .hy-t{padding:21px 0 16px;font-size:14.5px;line-height:1.6;color:var(--k7);position:relative;} .hy-t::before{content:"";position:absolute;left:-28px;top:27px;width:7px;height:7px;background:var(--k3);border-radius:50%;} .hy-new .hy-t::before{background:var(--red);} /* 인증서 카드 */ .cc-g{display:grid;grid-template-columns:repeat(6,1fr);gap:20px;} .cc-i{position:relative;height:150px;border:1px solid var(--k2);background:#ececeb;background-image:repeating-linear-gradient(135deg,rgba(0,0,0,.04) 0 10px,transparent 10px 20px);} .cc-n{font-size:12.5px;line-height:1.5;margin-top:9px;color:var(--k7);} /* 표 */ .tb{width:100%;border-collapse:collapse;} .tb th{text-align:left;padding:12px 10px;font-size:13px;font-weight:600;border-top:2px solid var(--k9);border-bottom:1px solid var(--k2);} .tb td{padding:13px 10px;font-size:13.5px;border-bottom:1px solid var(--k2);} .tb .r{text-align:right;} /* ── 푸터 ─────────────────────────────── */ .ft{background:var(--k9);color:#fff;padding:44px 44px 30px;} .ft-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:32px;padding-bottom:34px;border-bottom:1px solid #262626;} .ft-h{font-size:12.5px;font-weight:700;color:#fff;margin-bottom:14px;letter-spacing:.02em;} .ft-l{font-size:13px;line-height:2;color:var(--k4);} .ft-bot{display:flex;align-items:flex-end;justify-content:space-between;padding-top:22px;gap:30px;} .ft-info{font-size:12px;line-height:1.9;color:var(--k4);} .ft-tel{font-family:var(--lt);font-variant-numeric:tabular-nums;font-size:30px;font-weight:700;color:#fff;letter-spacing:-.01em;line-height:1.1;} /* ── 배치2 추가 ───────────────────────── */ .kpi{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--k2);margin-bottom:40px;} .kpi>div{padding:22px 24px;border-right:1px solid var(--k2);} .kpi>div:last-child{border-right:0;} .kpi-l{font-size:12.5px;color:var(--k6);margin-bottom:7px;} .kpi-v{font-family:var(--lt);font-size:27px;font-weight:700;letter-spacing:-.02em;} .kpi-u{font-size:14px;font-weight:500;color:var(--k6);margin-left:3px;font-family:var(--kr);} .g3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;} .g4{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;} .g5{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;} .pc-i{position:relative;height:170px;border:1px solid var(--k2);background:#ececeb;background-image:repeating-linear-gradient(135deg,rgba(0,0,0,.04) 0 10px,transparent 10px 20px);} .pc-n{font-size:14px;font-weight:600;line-height:1.5;margin-top:11px;} .pc-d{font-size:12.5px;line-height:1.6;color:var(--k6);margin-top:5px;} .pc-x{font-family:var(--lt);font-size:11px;color:var(--k4);margin-top:8px;letter-spacing:.04em;} .sp{width:100%;border-collapse:collapse;font-size:12.5px;} .sp th{padding:11px 9px;font-weight:700;border-bottom:1px solid var(--k2);text-align:left;white-space:nowrap;} .sp thead th{border-top:2px solid var(--k9);border-bottom:1px solid var(--k9);} .sp td{padding:11px 9px;border-bottom:1px solid var(--k2);font-family:var(--lt);font-variant-numeric:tabular-nums;color:var(--k7);white-space:nowrap;} .sp tbody th{color:var(--k6);font-weight:500;background:#fbfbfb;} .sp .no{color:var(--k3);} .sp-h{font-family:var(--lt);font-size:13px;font-weight:700;color:var(--k9);} .sp-h span{display:block;font-family:var(--kr);font-size:11px;font-weight:500;color:var(--k4);margin-top:2px;} .bd{display:inline-block;font-family:var(--lt);font-size:10.5px;font-weight:600;letter-spacing:.04em;padding:3px 7px;border:1px solid var(--k3);color:var(--k6);} .bd-3{border-color:var(--red);color:var(--red-9);background:var(--red-1);} .vd-i{position:relative;aspect-ratio:16/9;background:#1b1e23;background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.045) 0 10px,transparent 10px 20px);display:flex;align-items:center;justify-content:center;} .vd-p{width:54px;height:54px;border-radius:50%;background:var(--red);display:flex;align-items:center;justify-content:center;} .vd-p::after{content:"";border-left:15px solid #fff;border-top:9px solid transparent;border-bottom:9px solid transparent;margin-left:4px;} .vd-y{position:absolute;left:12px;top:12px;font:500 10px/1.5 ui-monospace,Menlo,monospace;color:rgba(255,255,255,.55);background:rgba(0,0,0,.5);padding:4px 7px;} .cat{display:flex;align-items:baseline;gap:10px;margin:0 0 20px;padding-bottom:12px;border-bottom:2px solid var(--k9);} .cat-n{font-family:var(--lt);font-size:12px;font-weight:700;color:var(--red);} .cat-t{font-size:18px;font-weight:700;letter-spacing:-.01em;} .cat-c{margin-left:auto;font-size:12.5px;color:var(--k4);} /* ── 배치3 추가 ───────────────────────── */ .steps{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;} .st{border:1px solid var(--k2);padding:20px 18px;position:relative;} .st-n{font-family:var(--lt);font-size:12px;font-weight:700;color:var(--red);margin-bottom:8px;} .st-t{font-size:14px;font-weight:600;line-height:1.4;} .ul{margin:0;padding:0;list-style:none;} .ul li{position:relative;padding:11px 0 11px 16px;font-size:14px;line-height:1.65;color:var(--k7);border-bottom:1px solid var(--k2);} .ul li::before{content:"";position:absolute;left:0;top:19px;width:4px;height:4px;background:var(--k3);border-radius:50%;} .note{border-left:3px solid var(--k3);background:var(--k1);padding:16px 18px;font-size:13.5px;line-height:1.75;color:var(--k7);} .note-r{border-left-color:var(--red);margin-top:18px;} .btn{display:inline-block;background:var(--k9);color:#fff;font-size:13.5px;font-weight:600;padding:11px 22px;} .btn-lg{font-size:15px;padding:15px 42px;} .btn-o{background:#fff;color:var(--k9);border:1px solid var(--k3);font-weight:500;} .fl{display:block;font-size:13px;font-weight:600;margin-bottom:7px;} .req{color:var(--red);margin-left:3px;} .fi{border:1px solid var(--k3);padding:12px 14px;font-size:14px;color:var(--k4);background:#fff;} .fi-a{min-height:104px;} .fi-s{padding:9px 12px;font-size:13px;} .fu{display:block;border:1px dashed var(--k3);background:var(--k1);padding:26px;text-align:center;cursor:pointer;} /* 첨부 상자 — 끌고 들어왔을 때 · 고른 뒤. 시안(6b)대로 크기는 그대로고 테두리 · 바탕만 바뀐다. 골든은 「고르기 전」 모습이라 아래 상태는 그려지지 않는다 — 브라우저 검사가 본다. */ .fu-over{border-color:var(--red);background:#FEF5F6;} .fu-over .fu-t{color:var(--red-9);font-weight:600;} .fu-list{display:flex;flex-direction:column;gap:8px;margin-top:12px;} .fu-list:empty{display:none;} .fu-f{display:flex;align-items:center;gap:11px;border:1px solid var(--k2);padding:10px 12px;background:#fff;} .fu-f svg{flex:none;} .fu-f-n{font-size:13px;flex-grow:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;} .fu-f-s{font-size:12px;color:var(--k4);flex:none;} .fu-x{flex:none;padding:5px 9px;} .fu-bad{border-color:var(--er);background:#FDF3F2;} .fu-bad .fu-f-n{color:var(--er);white-space:normal;} .fu-bad .fu-x{border-color:var(--er);color:var(--er);} .chk{display:flex;align-items:center;gap:9px;margin-top:22px;font-size:13.5px;color:var(--k7);} .chk-b{width:17px;height:17px;border:1px solid var(--k3);display:inline-block;background:#fff;} /* 체크된 모습이 아예 없었다 — 동의에 표시해도 상자가 빈 채로 남아 방문자는 동의가 안 됐다고 읽는다. 관리자 체크박스(.ad-chk)와 같은 표현을 쓴다. 시안은 늘 체크되지 않은 상태로 그려지므로 처음 모습은 달라지지 않는다. */ .vh:not(:checked) + .chk-b{background:#fff;border-color:var(--k3);} .vh:not(:checked) + .chk-b::after{content:none;} .vh:checked + .chk-b{background:var(--k9);border-color:var(--k9);position:relative;} .vh:checked + .chk-b::after{content:"";position:absolute;left:5px;top:1px;width:4px;height:10px; border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);} .chip{display:inline-block;border:1px solid var(--k3);padding:8px 15px;font-size:13px;color:var(--k6);background:#fff;} .chip-on{border-color:var(--k9);background:var(--k9);color:#fff;} .chip-on .num{color:#fff;} /* 방문자가 유형을 눌러도 칩 모양이 바뀌지 않았다 — 무엇을 골랐는지 알 수 없었다. chip-on 과 같은 선언이라 처음 모습은 그대로다. */ /* 라디오는 하나를 고르면 나머지가 꺼져야 한다. chip-on 이 서버에서 붙은 채라 이 규칙이 없으면 고른 것과 처음 것이 **둘 다 켜져 보인다.** */ /* 라디오를 품은 칩만이다 — 품지 않은 링크 칩(공지 분류)까지 「안 골랐다」로 읽혀 고른 칩이 흰색이 되고 그 칩의 숫자는 흰 바탕에 흰 글자로 사라졌다(.chip-on 보다 이 규칙이 구체적이다). */ .chip:has(input):not(:has(:checked)){border-color:var(--k3);background:#fff;color:var(--k6);} .chip:has(:checked){border-color:var(--k9);background:var(--k9);color:#fff;} .chip:has(:checked) .num{color:#fff;} .kv{display:flex;gap:14px;padding:8px 0;font-size:13.5px;line-height:1.6;} .kv span{flex:none;width:62px;color:var(--k6);} .kv b{font-weight:600;color:var(--k9);} .nt td{vertical-align:middle;} .nt-t{font-size:14.5px;font-weight:500;} .pin{display:inline-block;background:var(--red);color:#fff;font-size:11px;font-weight:700;padding:3px 8px;} .pg-n{display:flex;justify-content:center;gap:6px;margin-top:34px;} .pg-b{min-width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--k2);font-size:13px;color:var(--k6);} .pg-on{background:var(--k9);border-color:var(--k9);color:#fff;font-weight:600;} .nv{display:flex;align-items:center;gap:20px;padding:15px 4px;} .nv-l{flex:none;width:64px;font-size:12.5px;color:var(--k4);} .nv-t{font-size:14px;color:var(--k7);} /* .cat 제목 밑줄과 표 상단선이 겹치지 않게 — 표 쪽을 지운다 */ /* 분류 머리(.cat)의 아래 선과 표의 위 선이 겹쳐 두 줄로 보인다. 표가 .tw(가로 스크롤 상자)로 감싸인 경우까지 잡는다. */ .cat + .tb thead th,.cat + .sp thead th, .cat + .tw .tb thead th,.cat + .tw .sp thead th{border-top:0;} .two{display:grid;grid-template-columns:1fr 1fr;gap:44px;} .two-a{grid-template-columns:1.15fr 1fr;} .two-b{grid-template-columns:1.25fr 1fr;gap:52px;} .two-c{grid-template-columns:1fr 420px;gap:56px;} .two-d{grid-template-columns:300px 1fr;gap:56px;} .two-e{grid-template-columns:1.2fr 1fr;gap:48px;} .two-f{grid-template-columns:1.35fr 1fr;gap:56px;} .org3{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;} .tw{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;} .bldg-v{background:#ececeb url(./bldg-v.webp) center/cover no-repeat;} .bldg-w{background:#ececeb url(./bldg-w.webp) center/cover no-repeat;} /* 링크로 감싼 요소가 기본 a 스타일을 타지 않게 한다 */ .nt-t a,a.nv-t{color:inherit;} /* 특허 표의 명칭 — 누르면 등록증이 크게 열린다. 공지 제목 링크처럼 글자 그대로, 손가락만 바뀐다 */ a.pt-l{color:inherit;text-decoration:none;cursor:pointer;} .nt-t a,a.nv-t,a.btn,a.btn-o,a.btn-r,a.chip,a.more{text-decoration:none;} /* 실제 폼 요소가 div 와 같은 상자로 보이게 맞춘다 */ .vh{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;margin:0;} /* 숨긴 입력(.vh) 위의 손잡이는 키보드 초점을 받는데 초점 표시가 없었다 — Tab 을 눌러도 어디에 있는지 보이지 않았다 (WCAG 2.4.7). 초점 때만 그리므로 정지 화면(골든)은 그대로다. :has() 는 .chip:has(:checked) 가 이미 쓴다. */ .vh:focus-visible + .chk-b,.chip:has(.vh:focus-visible),.fu:has(.vh:focus-visible){outline:2px solid var(--k9);outline-offset:2px;} input.fi:focus-visible,textarea.fi:focus-visible{box-shadow:0 0 0 2px var(--k9);} /* 본문 바로가기 — 초점을 받을 때만 나타난다. */ .skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--k9);color:#fff;padding:10px 16px;font-size:13px;font-weight:600;} .skip:focus{left:16px;top:16px;} input.fi,textarea.fi{display:block;width:100%;box-sizing:border-box;font-family:inherit; font-size:14px;line-height:1.5;color:var(--k9);background:#fff;border:1px solid var(--k3); padding:12px 14px;border-radius:0;-webkit-appearance:none;appearance:none;} input.fi::placeholder,textarea.fi::placeholder{color:var(--k4);opacity:1;} input.fi:focus,textarea.fi:focus{outline:none;border-color:var(--k9);} textarea.fi-a{min-height:104px;resize:vertical;} /* 영상 카드. 썸네일을 깔고 클릭하면 그때 유튜브를 부른다 — 클릭 전에는 유튜브에 아무 요청도 가지 않는다. */ a.vd-i{text-decoration:none;cursor:pointer;} .vd-i .vd-p{box-shadow:0 3px 14px rgba(0,0,0,.35);transition:transform .18s;} a.vd-i:hover .vd-p{transform:scale(1.08);} .vd-i iframe{position:absolute;inset:0;width:100%;height:100%;border:0;} /* 자동차 부위별 EPP 부품 안내. 차량 그림 위에 번호를 얹고 아래에 카드로 푼다. */ .eg{margin:34px 0 54px;} .eg-car{position:relative;max-width:1000px;margin:0 auto;} .eg-car img{display:block;width:100%;height:auto;} .eg-m{position:absolute;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%; background:var(--er);color:#fff;font-size:14px;font-weight:700;line-height:30px;text-align:center; box-shadow:0 2px 8px rgba(0,0,0,.22);} .eg-i{position:relative;background:var(--k1);padding-top:75%;overflow:hidden;} .eg-i img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;} .eg-h{display:flex;align-items:baseline;gap:8px;margin:14px 0 6px;} .eg-no{width:22px;height:22px;flex:none;border-radius:50%;background:var(--er);color:#fff; font-size:12px;font-weight:700;line-height:22px;text-align:center;} .eg-t{font-size:14.5px;font-weight:700;color:var(--k9);letter-spacing:-.01em;} .eg-d{font-size:12.5px;line-height:1.75;color:var(--k6);} .eg-a{display:block;margin-top:6px;font-size:12px;color:var(--k4);} /* 폼 오류. 값이 틀린 칸에만 붙으므로 정상 화면에서는 그려지지 않는다. */ input.fi.fi-e,textarea.fi.fi-e{border-color:var(--er);} .fe{display:block;margin-top:6px;font-size:12.5px;line-height:1.5;color:var(--er);} label.chip{display:inline-flex;align-items:center;} button.btn{font-family:inherit;border:0;border-radius:0;line-height:1.4;} /* 공지 목록의 검색칸 · 검색 버튼 · 쪽번호가 div · span 이었다가 진짜 손잡이가 됐다. **상자 크기는 한 픽셀도 달라지면 안 된다** — 시안이 「생김새는 그대로 두고 눌리게만 한다」이기 때문이다. 그래서 input 이 물고 오는 기본값을 되돌린다. · width 230px 은 안쪽 폭을 가리키던 값이다(div 는 content-box 였다) · 높이는 13px 글자 한 줄 15px + 위아래 9px + 테두리 2px = 35px · button.btn 의 border:0 · line-height:1.4 는 테두리 있는 검색 버튼에는 맞지 않는다 */ input.fi.fi-s{box-sizing:content-box;padding:9px 12px;font-size:13px;line-height:15px;height:15px;} /* 공지 목록 머리 — 제목 · 도입문 왼쪽, 검색 오른쪽. 인라인이었는데 390 에서 제목이 한 글자씩 세로로 서고 검색칸이 화면 밖으로 나갔다 — 폭이 정해진 검색칸이 제목을 밀어냈다. 모바일 규칙은 build_all 의 640 블록. */ .nt-hd{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:22px;gap:20px;} .nt-q{display:flex;gap:10px;align-items:center;margin:0;} .nt-q .fi-s{width:230px;} button.btn.btn-o{border:1px solid var(--k3);line-height:normal;} a.pg-b{text-decoration:none;} a.more,a.nrow,a.hd-logo,.car-hd a{color:inherit;text-decoration:none;} /* 카드 전체가 링크인 자리. 밑줄이 그어지면 사진 아래 글자가 지저분해진다. */ .g3 > a,.g5 > a{color:inherit;text-decoration:none;} /* 전화 · 이메일은 눌러서 걸거나 보낼 수 있게 한다. 생김새는 그대로 둔다. */ a.lk{color:inherit;text-decoration:none;} a.cc-i{display:block;cursor:zoom-in;} /* 인증서 확대. 링크로 빠지지 않고 그 자리에서 크게 본다. */ .lb{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center; background:rgba(13,13,13,.86);padding:5vh 5vw;cursor:zoom-out;} .lb img{max-width:100%;max-height:90vh;object-fit:contain;background:#fff; box-shadow:0 12px 48px rgba(0,0,0,.4);} .lb-c{position:absolute;top:18px;right:22px;width:40px;height:40px;padding:0;border:0; background:none;color:#fff;font-size:30px;line-height:1;cursor:pointer;} .lb-n{position:absolute;left:0;right:0;bottom:22px;text-align:center;color:rgba(255,255,255,.82); font-size:13.5px;padding:0 20px;} /* 생산품목 카드에 딸린 사진 묶음. 「사진 N장」이 표시로만 남지 않게 그 자리에서 넘겨 본다. 카드 안의 대표 사진(.pc-i)에 커서를 주면 나머지 영역이 눌리는지 알 수 없어 카드째 준다. */ .pc-o{cursor:zoom-in;} .pc-o:focus-visible{outline:2px solid var(--red);outline-offset:3px;} /* 대표 사진을 조금 줄이고 그 아래 나머지를 깐다. 누를 곳이 눈에 보이고 안에 무엇이 있는지도 미리 읽힌다. 마지막 칸은 남은 장수다. */ /* 생산품목만 4:3 으로 잡는다. 가로로 길면 금형이 위아래로 잘려 형태가 안 보인다. 보유 설비(.pc-i 단독)는 지금 비율이 적합하므로 건드리지 않는다. height 가 남아 있으면 aspect-ratio 가 무시되므로 auto 로 푼다. */ .pc-o .pc-i{height:auto;aspect-ratio:4/3;} .pc-s{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:6px;} .pc-t{height:auto;aspect-ratio:4/3;border:1px solid var(--k2);background-color:#ececeb; background-size:cover;background-position:center;} /* 금형제품모델은 흰 바탕에 제품만 있는 렌더 이미지다. cover 로 자르면 형태를 알 수 없다 — 보유 설비가 쓰는 방식(contain + 흰 바탕)을 그대로 쓴다. */ .pc-i-s{height:auto;aspect-ratio:4/3;background-color:#fff;} .pc-m{display:flex;align-items:center;justify-content:center;background:var(--k1); font-family:var(--lt);font-size:11px;font-weight:600;color:var(--k6);} .pc-o:hover .pc-m{background:var(--k9);color:#fff;border-color:var(--k9);} /* 좁은 화면에서는 사진이 폭을 다 쓰기 때문에 화살표가 사진 위에 겹친다. 반투명이면 밝은 사진 위에서 사라지므로, 어두운 바탕과 흰 테를 둬서 어디서든 보이게 한다. */ .lb-a{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;padding:0; border:1px solid rgba(255,255,255,.5);background:rgba(13,13,13,.62); color:#fff;font-size:19px;line-height:1;cursor:pointer; display:flex;align-items:center;justify-content:center;} .lb-a:hover{background:rgba(13,13,13,.85);border-color:#fff;} .lb-a-p{left:18px;} .lb-a-n{right:18px;} .lb-x{position:absolute;left:0;right:0;bottom:52px;text-align:center; font-family:var(--lt);font-variant-numeric:tabular-nums;font-size:12px; color:rgba(255,255,255,.6);letter-spacing:.04em;} /* 가로로 긴 그림(세 쪽을 나란히 붙인 원산지 인증서 등)은 휴대폰 폭에 맞추면 글자가 안 읽힌다 — 390 에서 351×164. 휴대폰에서만 높이를 화면에 맞추고 옆으로 민다. 세로 그림 · 넓은 화면은 그대로다(감싸는 상자가 display:contents). 「가로로 긴가」는 site.js 가 그림 비율(가로 > 세로 × 1.4)을 보고 .lb-wide 로 붙인다. */ .lb-s{display:contents;} @media (max-width:640px){ .lb.lb-wide{padding:0;} .lb-wide .lb-s{display:block;width:100%;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;} .lb-wide .lb-s img{display:block;max-width:none;max-height:none;height:70vh;width:auto;} } /* 동영상. 카드 자리(196px 고정)에 그대로 끼우면 영상 비율과 어긋나 레터박스가 크게 남는다. 화면 가운데에 16:9 로 띄우고, 유튜브 기본 조작부는 끄고 아래 막대를 쓴다. */ .vp{position:fixed;inset:0;z-index:70;display:flex;align-items:center;justify-content:center; background:rgba(13,13,13,.92);padding:5vh 5vw;} .vp-f{position:relative;width:100%;max-width:1180px;aspect-ratio:16/9;max-height:82vh;background:#000;} .vp-f iframe{position:absolute;inset:0;width:100%;height:100%;border:0;} .vp-c{position:absolute;top:18px;right:22px;width:40px;height:40px;padding:0;border:0; background:none;color:#fff;font-size:30px;line-height:1;cursor:pointer;} .vp-t{position:absolute;left:0;right:0;top:22px;text-align:center;color:rgba(255,255,255,.86); font-size:13.5px;padding:0 70px;} .vp-b{position:absolute;left:0;right:0;bottom:-52px;height:44px;display:flex;align-items:center; gap:14px;padding:0 2px;} .vp-k{width:34px;height:34px;padding:0;border:0;background:none;color:#fff;font-size:15px; line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;} .vp-k:hover{color:var(--red);} .vp-s{flex:1;height:4px;background:rgba(255,255,255,.22);cursor:pointer;position:relative;} .vp-s-f{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--red);} .vp-n{font-family:var(--lt);font-variant-numeric:tabular-nums;font-size:12px; color:rgba(255,255,255,.7);letter-spacing:.04em;white-space:nowrap;} @media (max-width:640px){ .vp{padding:0 12px;} .vp-b{bottom:-46px;gap:10px;} .vp-t{display:none;} } /* 태블릿 이하의 메뉴. 지금까지는 좁은 화면에서 메뉴가 사라져 들어갈 방법이 없었다. */ .hd-mb{display:none;flex-direction:column;gap:5px;width:38px;height:38px;padding:0;margin-left:6px; align-items:center;justify-content:center;background:none;border:0;cursor:pointer;} .hd-mb span{display:block;width:20px;height:2px;background:var(--k9);transition:transform .2s,opacity .2s;} .car-hd .hd-mb span{background:#fff;} .car-hd.is-stuck .hd-mb span,.car-hd.is-open .hd-mb span{background:var(--k9);} .hd-mb[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);} .hd-mb[aria-expanded="true"] span:nth-child(2){opacity:0;} .hd-mb[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);} .mb-p{position:fixed;z-index:39;top:0;left:0;right:0;bottom:0;background:#fff; padding:92px 24px 24px;overflow-y:auto;} .mb-nav{display:flex;flex-direction:column;} .mb-a{display:block;padding:17px 4px;font-size:17px;font-weight:600;color:var(--k9); text-decoration:none;border-bottom:1px solid var(--k2);} .mb-on{color:var(--red);} .mb-langs{display:flex;gap:10px;margin-top:22px;} .mb-l{padding:9px 15px;font-size:13px;font-weight:600;color:var(--k7); border:1px solid var(--k2);text-decoration:none;} /* 지금 언어 — 셋이 같은 모양이라 어느 말로 보고 있는지 알 수 없었다. 헤더 드롭다운(.hd-lang-on)처럼 검정 */ .mb-l-on{border-color:var(--k9);color:var(--k9);} a.btn-r,a.btn-o{text-decoration:none;} a.btn-r{color:#fff;} /* ═══ 움직임 ═══════════════════════════════════════════════════ 가만히 있을 때는 시안 그대로다. 아래는 전부 「움직이지 말라」는 설정을 존중하고, 픽셀 비교가 --force-prefers-reduced-motion 으로 찍으므로 골든과 어긋나지 않는다. JS 도 같은 설정을 보고 통째로 건너뛴다. */ @media (prefers-reduced-motion: no-preference){ /* 화면에 들어올 때 아래에서 올라오며 나타난다. 대상은 JS 가 고른다 — 시안 마크업에 클래스를 심지 않아야 두 쪽이 계속 같다. 감속 곡선을 길게 끌어야(.16,1,.3,1) 22px 를 움직여도 튀지 않고 눈에 남는다. */ .rv{opacity:0;transform:translateY(22px); transition:opacity .52s cubic-bezier(.16,1,.3,1),transform .52s cubic-bezier(.16,1,.3,1);} .rv-on{opacity:1;transform:none;} } /* 사진에 마우스를 올리면 아주 조금 커진다. 칸 사이가 24px 라 이웃을 침범하지 않는다. */ .pc-i,a.cc-i,a.vd-i{transition:transform .22s ease-out;} .pc-o:hover .pc-i,a.cc-i:hover,a.vd-i:hover{transform:scale(1.015);} /* 자동차 그림의 번호와 아래 설명 카드를 잇는다. 한쪽에 올리면 양쪽이 같이 켜진다. 지금까지는 번호가 짝지어져 있을 뿐 눈으로 이어지지 않았다. */ .eg-m,.eg-no{transition:transform .18s ease-out,box-shadow .18s ease-out;} .eg-m{cursor:default;} .eg-m.on{transform:scale(1.22);box-shadow:0 3px 14px rgba(0,0,0,.34);} .eg .g3>div.on .eg-no{transform:scale(1.15);} .eg .g3>div.on .eg-t{color:var(--er);} /* 영문 · 일문 지도는 구글이 iframe 으로 그린다. 자리를 그대로 채운다. */ .map iframe{width:100%;height:100%;border:0;display:block;} /* 지도 아래 길찾기. 실제로 찾아오는 사람은 결국 자기 앱에서 길을 잡는다. */ .map-go{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:40px;} .map-b{display:inline-flex;align-items:center;padding:9px 15px;border:1px solid var(--k2); font-size:12.5px;color:var(--k7);text-decoration:none;transition:border-color .16s,color .16s;} .map-b:hover{border-color:var(--k9);color:var(--k9);} .car{position:relative;height:600px;overflow:hidden;background:#16181c;} .track{display:flex;height:100%;width:300%;} .slide{width:33.3333%;height:100%;position:relative;flex:none;} .sbg{position:absolute;inset:0;background-size:cover;background-position:center;} .sbg-ph{background-color:#20232a;} .sbg-ph::after{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.05) 0 10px,transparent 10px 20px);} .scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,11,13,.84) 0%,rgba(10,11,13,.5) 52%,rgba(10,11,13,.08) 100%);} .sbody{position:relative;z-index:2;padding:150px 44px 0;max-width:840px;} .stag{position:absolute;right:20px;top:96px;z-index:3;font:500 10.5px/1.5 ui-monospace,Menlo,monospace;color:rgba(255,255,255,.6);background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.16);padding:6px 9px;} .eyebrow{font-family:var(--lt);font-size:12.5px;letter-spacing:.1em;color:rgba(255,255,255,.6);margin-bottom:18px;} .stitle{font-size:56px;line-height:1.18;font-weight:800;margin:0 0 20px;letter-spacing:-.03em;color:#fff;} /* 아래 버튼과 32px 은 붙어 보인다. 히어로는 글자가 크고 배경이 사진이라 본문 기준보다 넉넉해야 버튼이 따로 선다. */ .slead{font-size:16.5px;line-height:1.7;color:rgba(255,255,255,.76);margin:0 0 44px;max-width:560px;} .btn-r{background:var(--red);color:#fff;padding:14px 28px;font-size:15px;font-weight:700;} /* 히어로 전용. .car 로 가두지 않으면 흰 배경 페이지의 버튼까지 흰 글씨가 된다. */ .car .btn-o{border:1px solid rgba(255,255,255,.42);color:#fff;padding:14px 28px;font-size:15px;font-weight:600;} /* 컨트롤 */ .cnav{position:absolute;z-index:4;bottom:34px;left:44px;display:flex;align-items:center;gap:18px;} .dots{display:flex;gap:8px;} .dot{width:30px;height:3px;background:rgba(255,255,255,.28);cursor:pointer;border:0;padding:0;position:relative;} /* 3px 짜리 점을 손가락으로 누를 수 있게 — 보이지 않는 누름 영역을 위아래로 넓힌다(WCAG 2.5.8). 그려지지 않는다. */ .dot::before{content:"";position:absolute;left:0;right:0;top:-12px;bottom:-12px;} .dot:focus-visible{outline:2px solid #fff;outline-offset:4px;} .dot-on{background:var(--red);} .cidx{font-family:var(--lt);font-variant-numeric:tabular-nums;font-size:12px;color:rgba(255,255,255,.6);letter-spacing:.04em;} .arrows{position:absolute;z-index:4;bottom:28px;right:44px;display:flex;gap:8px;} /* line-height 를 1 로 잡지 않으면 화살표 글자가 줄상자 안에서 아래로 처진다. */ /* 히어로 화살표 — 둥근 반투명 단추에 가는 꺾쇠(고객사 요청: 네모 테두리 + 글자 ←→ 가 사진 위에서 떠 보였다). 글자 화살표는 글꼴마다 굵기 · 끝 모양이 달라 SVG 로 그린다. 뒤를 살짝 흐려 어느 사진 위에서도 읽힌다. */ .arw{width:46px;height:46px;border:0;border-radius:50%;background:rgba(255,255,255,.12); -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#fff;padding:0;line-height:1;cursor:pointer; display:flex;align-items:center;justify-content:center;transition:background .2s;} .arw:hover{background:rgba(255,255,255,.24);} .arw:focus-visible{outline:2px solid #fff;outline-offset:2px;} .hd-logo{display:flex;align-items:center;gap:11px;cursor:pointer;} .hd-nav a,.hd-nav span,.tab,.ft-nav a,.ft-nav span,.btn,.btn-r,.btn-o,.chip,.pin,.nt-t,.nv-t,.dot,.arw{cursor:pointer;} .hd-nav a:hover,.hd-nav span:hover{color:var(--red);} .tab:hover{color:var(--k9);} .ft-nav a:hover,.ft-nav span:hover{color:#fff;} .hd-cta-on{background:var(--red);} .nt tbody tr:hover .nt-t{color:var(--red-7);} /* 메인 전용 */ .sec{padding:66px 44px 72px;} .sec-h{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:26px;gap:20px;} .sec-t{font-size:27px;font-weight:700;margin:0;letter-spacing:-.02em;} .sec-s{font-size:14px;color:var(--k6);margin:6px 0 0;} .more{font-size:13px;color:var(--k6);white-space:nowrap;} .band{background:var(--k9);color:#fff;padding:52px 44px;display:flex;align-items:center;justify-content:space-between;gap:40px;} .band-t{font-size:29px;font-weight:800;letter-spacing:-.02em;line-height:1.35;margin:0;} .band-s{font-size:14.5px;color:var(--k4);margin:10px 0 0;line-height:1.7;} .nlist{border-top:2px solid var(--k9);} .nrow{display:flex;align-items:center;gap:16px;padding:17px 4px;border-bottom:1px solid var(--k2);cursor:pointer;} .nrow:hover .nrow-t{color:var(--red-7);} .nrow-t{font-size:14.5px;font-weight:500;flex:1;} .logos{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;} .logo-b{height:64px;border:1px solid var(--k2);display:flex;align-items:center;justify-content:center;font-size:11.5px;color:var(--k6);text-align:center;line-height:1.4;padding:0 8px;} /* 누르면 그 인증서가 크게 열린다. 전역 a:hover 의 빨간 글자를 이기려 a.logo-b 로 건다. */ a.logo-b{cursor:zoom-in;text-decoration:none;transition:border-color .2s,color .2s;} a.logo-b:hover{border-color:var(--k4);color:var(--k9);} .car .btn-o{background:transparent;} .band .btn-r{background:var(--red);color:#fff;} /* 히어로 위에 얹히는 투명 헤더. 스크롤하면 흰 배경으로 바뀐다(site.js 가 .is-stuck 을 붙인다). 최상단에서는 시안 그대로라 픽셀 비교에 영향이 없다. */ .car-hd{position:fixed;z-index:40;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:0 44px;height:80px;transition:background .18s,border-color .18s;border-bottom:1px solid transparent;} .car-hd.is-stuck,.car-hd.is-open{background:#fff;border-bottom-color:var(--k2);} /* 히어로 위 헤더의 색은 CSS 로 둔다. 인라인으로 박으면 스크롤 상태에서 못 바꾼다. */ .car-hd .hd-nav{display:flex;align-items:center;gap:30px;font-size:14.5px;font-weight:600;color:rgba(255,255,255,.86);} .car-hd .ko-wm{color:#fff;} .car-hd .hd-cta-o{border:1.5px solid rgba(255,255,255,.5);padding:8px 17px;font-size:13.5px;color:#fff;} .car-hd.is-stuck,.car-hd.is-open{color:var(--k9);} .car-hd.is-stuck .hd-nav,.car-hd.is-open .hd-nav{color:var(--k7);} .car-hd.is-stuck .hd-cta-o,.car-hd.is-open .hd-cta-o{border-color:var(--k9);color:var(--k9);} .car-hd.is-stuck .ko-wm,.car-hd.is-open .ko-wm,.car-hd.is-stuck .hd-nav a,.car-hd.is-open .hd-nav a, .car-hd.is-stuck .hd-lang-o,.car-hd.is-open .hd-lang-o{color:var(--k9);} .car-hd.is-stuck .hd-cta,.car-hd.is-open .hd-cta,.car-hd.is-stuck a.hd-cta,.car-hd.is-open a.hd-cta{background:var(--k9);color:#fff;border-color:var(--k9);} .car-hd.is-stuck .hd-lang-t,.car-hd.is-open .hd-lang-t{color:var(--k9);} .car-hd.is-stuck .hd-lang-c,.car-hd.is-open .hd-lang-c{border-top-color:var(--k4);} .car-hd.is-stuck .ko-sym,.car-hd.is-open .ko-sym{filter:none;} .trust{display:grid;grid-template-columns:repeat(4,1fr);background:var(--k9);border-top:1px solid #262626;} .trust>div{padding:22px 26px;border-right:1px solid #262626;} .trust>div:last-child{border-right:0;} .tv{font-size:24px;font-weight:700;color:#fff;line-height:32px;letter-spacing:-.01em;} .tv-t{font-size:18px;} .tu{font-size:13px;font-weight:500;color:var(--k4);margin-left:3px;} .tl{font-size:12px;color:var(--k4);margin-top:5px;line-height:1.45;} /* 팝업 — 들어오면 화면 가운데에 뜬다. 사진 한 장과 링크가 전부다. 관리자에 제목 칸이 없으므로 알릴 말은 사진 안에 들어간다. 둘 이상이면 24px 사이로 나란히, 좁으면 세로로 쌓인다(시안 「메인 팝업 둘」 — mockup/design/popups/). 막이 스크롤하고 상자 묶음은 margin:auto 로 가운데 — align-items:center 는 넘칠 때 위를 잘라먹는다. */ .pop-v{position:fixed;inset:0;z-index:80;display:flex;overflow:auto; background:rgba(13,13,13,.62);padding:5vh 5vw;} /* 서버는 hidden 으로 내리고 JS 가 「보지 않기」를 확인한 뒤 연다 — display:flex 가 UA 의 [hidden] 을 이기므로 이 줄이 없으면 접어 둔 사람에게도 스크립트가 붙기 전 한 프레임이 비친다. */ .pop-v[hidden]{display:none;} .pop-s{margin:auto;display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:24px;max-width:100%;} .pop{width:min(420px,100%);background:#fff;} /* 공지 상자 — 시안 「메인 팝업 — 링크형」 A(메인 공지 목록의 줄 · 표 · 「자세히 보기」)에 C 의 빨간 윗줄(4px). 사진 대신 항목 여럿, 항목마다 제 주소. 조각(.pin · .bd · .num · .more)은 사이트의 것을 그대로 쓴다. */ .pop-bar{height:4px;background:var(--red);} .pop-hd{padding:22px 22px 14px;} .pop-eye{font-family:var(--lt);font-size:11px;letter-spacing:.12em;color:var(--k4);} .pop-t{font-size:20px;font-weight:700;letter-spacing:-.01em;margin:6px 0 0;} .pop-list{margin:0 22px;border-top:2px solid var(--k9);} .pop-row{display:block;padding:15px 2px 14px;border-bottom:1px solid var(--k2);color:inherit;text-decoration:none;} a.pop-row:hover .pop-rt{color:var(--red-7);} .pop-tags{display:flex;gap:6px;margin-bottom:8px;} .pop-rt{font-size:14.5px;font-weight:600;line-height:1.45;} .pop-rm{display:flex;justify-content:space-between;align-items:center;margin-top:8px;font-size:12px;color:var(--k4);} .pop-rm .more{font-size:12.5px;} .pop-sp{height:18px;} .pop-img{display:block;width:100%;height:auto;} .pop-f{display:flex;align-items:center;justify-content:space-between; border-top:1px solid var(--k2);padding:11px 15px;} .pop-c{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--k6);cursor:pointer;} .pop-c input{width:14px;height:14px;margin:0;accent-color:var(--k9);} .pop-x{border:0;background:none;padding:0;font-family:inherit; font-size:12.5px;font-weight:600;color:var(--k9);cursor:pointer;position:relative;} .pop-x::before{content:"";position:absolute;left:-10px;right:-10px;top:-10px;bottom:-10px;} /* 누름 영역만 넓힌다 */ /* ═══ 관리자 화면 ═══════════════════════ */ /* 시안 아트보드 높이(980)로 못 박혀 있어 큰 모니터에서 아래가 하얗게 잘렸다. 화면을 채운다. */ .ad{display:flex;min-height:100vh;background:#F4F5F7;align-items:stretch;} .ad-side{width:238px;flex:none;background:#141414;color:#fff;padding-bottom:34px;} .ad-brand{display:flex;align-items:center;gap:9px;padding:19px 20px;border-bottom:1px solid #262626;} .ad-brand .ko-wm{font-size:16px;color:#fff;} .ad-brand em{font-style:normal;font-size:11px;color:#8a8a8a;letter-spacing:.04em;} .ad-grp{padding:17px 20px 6px;font-size:10.5px;letter-spacing:.09em;color:#6f6f6f;} .ad-m{display:block;padding:8px 20px;font-size:13.5px;color:#c2c2c2;cursor:pointer;border-left:3px solid transparent;} .ad-m:hover{background:#1e1e1e;color:#fff;} /* 미확인 문의 건수. 골든에는 없다(시드에 문의가 없다). float 라 글자 자리는 그대로다. */ .ad-badge{float:right;min-width:18px;padding:0 6px;border-radius:9px;background:var(--red);color:#fff;font:600 10.5px/17px var(--lt);text-align:center;margin-top:2px;} /* 메뉴와 상단바는 붙박이 — 39줄 아래에서도 손에 있다. 맨 위에서 찍는 골든은 달라지지 않는다. */ /* 메뉴가 화면보다 길면(높이 700 에서 830px) 아래쪽 메뉴가 잘리고, 사이드바 위에서 휠을 굴려도 본문만 내려갔다. 화면 높이를 상한으로 두고 사이드바 혼자 구르게 한다. overscroll-behavior:contain 은 두지 않는다 — 메뉴가 화면에 다 들어올 때 사이드바 위의 휠이 본문으로 넘어가지 않아 그 자리가 죽은 칸이 된다. */ .ad-side-in{position:sticky;top:0;max-height:100vh;max-height:100dvh;overflow-y:auto;} .ad-top{position:sticky;top:0;z-index:5;} .ad-on{background:#1e1e1e;color:#fff;border-left-color:var(--red);font-weight:600;} /* ☰ 와 펼친 메뉴 맨 아래의 계정 줄은 좁은 화면 것이다(아래 768 블록). 넓은 화면은 사이드바 · 상단바가 그대로다. */ .ad-burger,.ad-acct,.ad-burger-dot{display:none;} .ad-main{flex:1;min-width:0;display:flex;flex-direction:column;background:#F4F5F7;} .ad-top{background:#fff;border-bottom:1px solid var(--k2);padding:15px 28px;display:flex;align-items:center;justify-content:space-between;gap:20px;} .ad-h1{font-size:19px;font-weight:700;margin:0;letter-spacing:-.01em;} .ad-sub{font-size:12.5px;color:var(--k6);margin:4px 0 0;} .ad-body{padding:22px 28px 28px;flex:1;} /* flex 로 두면 안 된다. 안에 벌거벗은 글자와 가 섞여 있어 flex 가 그것들을 각각 항목으로 잡고 gap 만큼 벌린다 — 좁은 화면에서 문장이 조각나 흩어졌다. 아이콘만 왼쪽에 세우고 글은 그냥 흐르게 둔다. */ .ad-note{position:relative;background:#FFF8E6;border:1px solid #EFDCA4;padding:12px 15px 12px 41px;font-size:12.5px;line-height:1.7;color:#6b5a2a;margin-bottom:18px;} .ad-note b{color:#42360f;} /* 저장 결과는 셋으로 가른다 — 저장됨(초록 ✓) · 손댈 것이 있음(빨강 !) · 알아 두라(노랑 !). 전부 같은 노란 상자였다 — a04 를 저장하면 똑같은 상자가 두 개 나란히 떴고, 2년이면 안 읽게 된다. 골든에는 초록 · 빨강이 없다(저장 뒤에만 뜬다). */ .ad-ok{position:relative;background:#EDF9F2;border:1px solid #BFE6CE;padding:12px 15px 12px 41px;font-size:12.5px;line-height:1.7;color:#1d5a36;margin-bottom:18px;} .ad-ok b{color:#0f3d24;} .ad-ok::before{content:"\2713";position:absolute;left:15px;top:13px;width:17px;height:17px;border-radius:50%;background:#1a9a5a;color:#fff;font:700 11px/17px var(--lt);text-align:center;} .ad-bad{position:relative;background:var(--red-1);border:1px solid #F3B8BE;padding:12px 15px 12px 41px;font-size:12.5px;line-height:1.7;color:var(--red-9);margin-bottom:18px;} .ad-bad b{color:#6e0a12;} .ad-bad::before{content:"!";position:absolute;left:15px;top:13px;width:17px;height:17px;border-radius:50%;background:var(--red);color:#fff;font:700 11px/17px var(--lt);text-align:center;} .ad-note::before{content:"!";position:absolute;left:15px;top:13px;width:17px;height:17px;border-radius:50%;background:#C79A1E;color:#fff;font:700 11px/17px var(--lt);text-align:center;} .ad-card{background:#fff;border:1px solid var(--k2);margin-bottom:16px;} .ad-ch{padding:14px 18px;border-bottom:1px solid var(--k2);display:flex;align-items:center;justify-content:space-between;gap:16px;} .ad-ct{font-size:14.5px;font-weight:700;} .ad-cd{font-size:12px;color:var(--k6);margin-top:3px;line-height:1.5;} .ad-cb{padding:18px;} .ad-f{margin-bottom:16px;} .ad-f:last-child{margin-bottom:0;} /* 두 칸 · 세 칸 묶음 안의 마지막 칸까지 0 이 되어, 칸 하나짜리 묶음(채용 접수)이나 한 열로 접힌 390 에서 그 칸이 다음 묶음의 라벨에 바로 붙었다. 묶음 안에서는 모두 띄운다 — 표 안(.ad-t td …)은 아래 규칙이 이긴다. */ .ad-2 > .ad-f:last-child,.ad-3 > .ad-f:last-child{margin-bottom:16px;} .ad-l{display:block;font-size:12.5px;font-weight:600;margin-bottom:6px;} .ad-l em{font-style:normal;color:var(--red);margin-left:3px;} .ad-hint{font-size:11.5px;color:var(--k6);margin-top:5px;line-height:1.6;} /* 넓은 가운데 칸(슬라이드 · 동영상) 안의 작은 머리글 */ .ad-sub{font-size:11.5px;font-weight:600;color:var(--k6);letter-spacing:.02em;margin:0 0 8px;} .ad-t td .ad-f:last-child{margin-bottom:0;} .ad-t td .ad-2{margin-bottom:16px;} .ad-t td .ad-2:last-child{margin-bottom:0;} .ad-i{border:1px solid var(--k3);background:#fff;padding:9px 11px;font-size:13.5px;color:var(--k9);} .ad-i-ph{color:var(--k4);} .ad-ta{min-height:104px;} .ad-2{display:grid;grid-template-columns:1fr 1fr;gap:16px;} .ad-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;} .ad-lang{display:flex;gap:0;margin-bottom:12px;} /* 분류 탭은 여덟 개라 1440 에서도 넘쳤다. 옆으로 밀게 두었더니 끝의 「AIRCON GUID…」 가 잘린 채 밀 수 있다는 표시가 없어, 담당자가 뒤쪽 분류가 있는 줄 모른다. 줄을 바꿔 전부 보이게 한다 — 겹친 테두리는 위아래도 -1px. */ .ad-lang-s{flex-wrap:wrap;} .ad-lang-s .ad-lt{flex:none;white-space:nowrap;margin-bottom:-1px;} .ad-lt{padding:7px 15px;font-size:12.5px;border:1px solid var(--k2);background:var(--k1);color:var(--k6);cursor:pointer;margin-right:-1px;} .ad-lt-on{background:var(--k9);border-color:var(--k9);color:#fff;font-weight:600;} /* 탭은 눌러야 하는 것이라 button 이다. 예전에는 span 이라 마우스로도 키보드로도 누를 수 없었다 — 눌러 보려는 사람만 있고 아무 일도 일어나지 않았다. */ button.ad-lt{font-family:inherit;line-height:1.5;border-radius:0;-webkit-appearance:none;appearance:none;} /* 표의 칸(td · th)은 display:table-cell 이라 hidden 속성이 밀릴 수 있다. 못을 박는다. */ [hidden]{display:none !important;} button.ad-lt:focus-visible{outline:2px solid var(--k9);outline-offset:1px;z-index:1;position:relative;} .ad-btn{display:inline-block;background:var(--k9);color:#fff;font-size:13px;font-weight:600;padding:9px 16px;cursor:pointer;} .ad-btn-r{background:var(--red);} .ad-btn-o{background:#fff;color:var(--k9);border:1px solid var(--k3);font-weight:500;} .ad-btn-s{font-size:11.5px;padding:5px 10px;font-weight:500;} .ad-save{position:sticky;bottom:0;z-index:5;background:#fff;border-top:1px solid var(--k2);padding:13px 28px;display:flex;align-items:center;justify-content:space-between;gap:20px;} /* z-index:5 — 붙은 표 머리글(z=2)이 아래에서 올라올 때 저장 막대를 뚫고 위에 칠해지지 않게. 상단바와 같은 값. */ .ad-save-t{font-size:12.5px;color:var(--k6);} .ad-t{width:100%;border-collapse:collapse;} .ad-t th{text-align:left;font-size:11.5px;font-weight:600;color:var(--k6);padding:9px 10px;background:#FAFAFA;border-bottom:1px solid var(--k2);white-space:nowrap; /* 긴 표를 내리면 열 이름이 사라졌다(시안 「목록 손잡이 셋」 2A). 상단바(.ad-top, 76px) 아래에 붙는다. 스크롤하지 않은 첫 그림은 한 픽셀도 안 바뀐다. */ position:sticky;top:76px;z-index:2;} .ad-t td{padding:10px;font-size:13px;border-bottom:1px solid var(--k2);vertical-align:middle;} .ad-t tr:last-child td{border-bottom:0;} .ad-dg{color:var(--k3);cursor:grab;font-size:14px;letter-spacing:-2px;user-select:none;} /* 손잡이는 button 이다 — 끌기는 마우스 전용이라 키보드로는 ↑↓ 로 옮긴다(admin.js). 글자 · 크기는 span 때와 같다. */ button.ad-dg{border:0;background:none;padding:0;margin:0;font-family:inherit;line-height:inherit;color:var(--k3);} /* 숨긴 입력(.vh) 위의 스위치 · 체크 · 사진 칸 · 업로드 상자에 초점 표시(WCAG 2.4.7). 초점 때만 그려진다. */ .vh:focus-visible + .ad-sw,.vh:focus-visible + .ad-chk,label:has(> .vh:focus-visible) > .ad-th,label:has(> .vh:focus-visible) > .ad-th-l,.ad-up:has(.vh:focus-visible){outline:2px solid var(--k9);outline-offset:2px;} input.ad-i:focus-visible,textarea.ad-i:focus-visible,input.ad-ic:focus-visible,textarea.ad-ic:focus-visible,select.ad-ic:focus-visible{box-shadow:0 0 0 2px var(--k9);outline:0;} .ad-dg:active{cursor:grabbing;} /* 긴 목록의 손잡이 한 벌 (a04 · a05 · a12) — 찾기 · 위/아래 · 맨 위에 추가. ▲▼ 는 끌기를 대신한다. 끌기는 마우스 전용 이벤트라 손가락에서는 일어나지 않고, docs/06 이 「모바일은 위/아래 버튼으로 대체」라고 약속한 그 버튼이다. */ .ad-hd{display:flex;align-items:center;gap:4px;} .ad-ud{display:flex;flex-direction:column;gap:2px;} .ad-ud .ad-btn{padding:0;width:20px;height:15px;line-height:1;font-size:9px;border:1px solid var(--k3);} /* 찾기는 화면에서만 — 값이 전부 input 안이라 브라우저 찾기가 못 본다. */ input.ad-i.ad-i-s{display:inline-block;width:180px;padding:6px 10px;font-size:12px;} /* 걸러진 줄은 접힌다. hidden 은 본뜰 빈 줄이 쓰므로 다른 표시를 쓴다 — 접혀 있어도 저장은 된다. */ tr[data-filtered],.ad-gi[data-filtered]{display:none;} /* 지우기 확인 — 그 줄 자리에서 묻는다. 브라우저 경고창은 어느 줄을 지우는지 보여 주지 못한다. 골든에는 이 상태가 없다(눌러야 생긴다). 지키는 것은 브라우저 검사다. */ /* 목록 화면의 휴지통(시안 「목록 손잡이 셋」 3B) — 표 바로 아래 접힌 「지운 줄 N건」. 저장한 뒤에도 30일 안에는 되살릴 수 있다. 골든에는 없다(시드에 지운 줄이 없다) — 지키는 것은 브라우저 검사다. 표의 줄이 아니라 div 다(_row.php). */ .ad-trash{border:1px solid var(--k2);border-top:0;} .ad-trash-hd{display:block;width:100%;text-align:left;border:0;font-family:inherit;line-height:1.5;background:#F4F4F4;font-size:11.5px;font-weight:600;color:var(--k6);padding:9px 10px;cursor:pointer;user-select:none;} .ad-trash-hd::after{content:" \25BE";color:var(--k4);} .ad-trash[data-open] .ad-trash-hd::after{content:" \25B4";} .ad-trash-r{display:flex;align-items:center;gap:12px;padding:10px;background:#FAFAFA;border-top:1px solid var(--k2);font-size:13px;color:var(--k4);} .ad-trash-r s{flex:1;min-width:0;} .ad-trash-r .ad-th{opacity:.45;flex:none;} .ad-days{font-size:11px;color:var(--k4);font-family:var(--lt);white-space:nowrap;} .ad-del-q td{background:#FDF3F2;padding:12px 10px;} .ad-del-m{display:flex;align-items:center;gap:12px;flex-wrap:wrap;} .ad-del-m svg{flex:none;} .ad-del-t{font-size:13px;color:var(--er);flex-grow:1;} .ad-del-b{display:flex;gap:7px;flex:none;} .ad-btn-e{background:var(--er);} /* 지우기로 표시한 줄 — 저장 전에는 취소선으로 남긴다. 예전에는 DOM 에서 걷혀 되돌릴 길이 없었다. */ tr[data-deleted],.ad-gi[data-deleted]{opacity:.45;} tr[data-deleted] .ad-ic{text-decoration:line-through;} /* 「대표 이메일로 전부 통일」이 켜지면 아래 네 칸은 사이트에 안 나간다 — 흐리게 하고 잠근다. 골든에는 이 상태가 없다(시드는 꺼져 있다). */ input.ad-i.ad-i-lock{background:var(--k1);color:var(--k4);} input.ad-ic.ad-i-lock{color:var(--k4);} /* 표 안의 칸(공지 팝업 항목 — 공지 글을 고르면 잠긴다) */ /* 문의함의 쪽번호. 골든에는 없다(시드에 문의가 없다). 공지 목록의 버튼(.ad-btn-s)을 그대로 쓴다. */ .pg{display:flex;gap:6px;justify-content:center;align-items:center;margin-top:16px;flex-wrap:wrap;} .pg .ad-btn{min-width:32px;text-align:center;} /* 사양표의 새 기종 열 — 아직 저장되지 않았다는 표시. 저장하면 다른 열과 같아진다. 골든에는 없다. */ .ad-t th.ad-new{background:#FFF8E6;} .ad-t td.ad-new{background:#FFFDF5;} /* 설비를 지우기로 표시하면 그 기종 열도 흐려진다 — 「사양값 8칸이 함께」를 눈으로 본다. */ .ad-t th.ad-gone,.ad-t td.ad-gone{opacity:.45;} .ad-t tr[draggable="true"]{background:#FAFAFA;} .ad-th{width:54px;height:40px;background:#ececeb;background-image:repeating-linear-gradient(135deg,rgba(0,0,0,.05) 0 8px,transparent 8px 16px);border:1px solid var(--k2);} /* 목록의 사진 칸(시안 「목록 손잡이 셋」 1C). 빈 칸은 줄무늬 회색 상자였는데 사진을 올리는 자리임을 아무것도 말하지 않았다 — 카메라 표시(CSS 로 그린 사각 · 원)와 「올리기」. 사진이 있으면 아래 「바꾸기」. */ .ad-th-e{background:#F4F4F4;background-image:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;} .ad-cam{width:16px;height:11px;border:1.5px solid var(--k6);border-radius:2px;position:relative;box-sizing:border-box;} .ad-cam::before{content:"";position:absolute;left:4px;top:1.5px;width:5px;height:5px;border:1.5px solid var(--k6);border-radius:50%;box-sizing:border-box;} .ad-cam::after{content:"";position:absolute;left:4px;top:-5px;width:6px;height:4px;border:1.5px solid var(--k6);border-bottom:0;border-radius:2px 2px 0 0;box-sizing:border-box;} .ad-th-t{font-size:9.5px;color:var(--k6);line-height:1;} .ad-th-c{font-size:10px;color:var(--k6);margin-top:3px;text-align:center;width:56px;line-height:1.2;} .ad-th-l{width:100%;height:104px;} .ad-up{border:1px dashed var(--k3);background:#FAFAFA;padding:22px;text-align:center; transition:border-color .12s,background .12s;} /* 파일을 끌고 들어왔을 때. 놓아도 되는 자리라는 표시가 없으면 끌어다 놓기를 시도하지 않는다. */ .ad-up-over{border-color:var(--red);background:#FFF5F6;} .ad-up-t{font-size:12.5px;color:var(--k6);} .ad-up-s{font-size:11px;color:var(--k4);margin-top:4px;font-family:var(--lt);} .ad-sw{width:38px;height:21px;border-radius:11px;background:var(--k3);position:relative;display:inline-block;vertical-align:middle;cursor:pointer;} .ad-sw::after{content:"";position:absolute;top:3px;left:3px;width:15px;height:15px;border-radius:50%;background:#fff;} .ad-sw-on{background:var(--red);} .ad-sw-on::after{left:20px;} /* 눌렀을 때 실제로 바뀌게 한다. 켜진 모습(-on)을 서버가 그려 주기만 하고 :checked 규칙이 한 줄도 없어서, 운영자가 스위치를 눌러 꺼도 화면은 계속 켜진 빨간색이었다. 폼 값은 바뀌므로 저장하면 사이트에서 그 줄이 사라지는데 관리자 화면만 켜진 것처럼 보였다. 아래는 -on 과 똑같은 선언이라 처음 그려진 모습은 한 픽셀도 달라지지 않는다. */ /* 꺼진 모습도 함께 못 박는다. 서버가 붙여 둔 -on 클래스가 남아 있어 :checked 만 더하면 「끄는 방향」은 여전히 반응하지 않는다. */ .vh:not(:checked) + .ad-sw{background:var(--k3);} .vh:not(:checked) + .ad-sw::after{left:3px;} .vh:not(:checked) + .ad-chk{background:#fff;border-color:var(--k3);} .vh:not(:checked) + .ad-chk::after{content:none;} .vh:checked + .ad-sw{background:var(--red);} .vh:checked + .ad-sw::after{left:20px;} .vh:checked + .ad-chk{background:var(--k9);border-color:var(--k9);position:relative;} .vh:checked + .ad-chk::after{content:"";position:absolute;left:5px;top:1px;width:4px;height:9px; border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);} /* 머리의 「모두 고르기」가 일부만 골라졌을 때. 이 규칙이 없으면 `:not(:checked)` 가 그대로 걸려 **「일부 선택」과 「하나도 안 고름」이 똑같이 보인다** — 진짜 칸은 `.vh` 로 숨겨져 있고 그려지는 것은 옆의 `.ad-chk` 이기 때문이다. 골든에는 이 상태가 없으므로 픽셀은 달라지지 않는다. */ .vh:indeterminate + .ad-chk{background:var(--k9);border-color:var(--k9);position:relative;} .vh:indeterminate + .ad-chk::after{content:"";position:absolute;left:3px;top:6px; width:8px;height:2px;background:#fff;border:0;transform:none;} .ad-tag{display:inline-block;font-size:11px;padding:2px 7px;border:1px solid var(--k3);color:var(--k6);white-space:nowrap;} .ad-tag-g{border-color:#1a9a5a;color:#137a46;background:#EDF9F2;} .ad-tag-r{border-color:var(--red);color:var(--red-9);background:var(--red-1);} .ad-tag-k{border-color:var(--k9);background:var(--k9);color:#fff;} .ad-chk{width:16px;height:16px;border:1px solid var(--k3);background:#fff;display:inline-block;vertical-align:middle;} .ad-chk-on{background:var(--k9);border-color:var(--k9);position:relative;} .ad-chk-on::after{content:"";position:absolute;left:5px;top:1px;width:4px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);} .ad-gal{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;} .ad-gi{position:relative;} .ad-gi .ad-th-l{height:96px;} .ad-gi-c{font-size:11.5px;color:var(--k7);margin-top:6px;line-height:1.4;} .ad-x{position:absolute;right:5px;top:5px;width:20px;height:20px;background:rgba(0,0,0,.62);color:#fff;font-size:12px;line-height:20px;text-align:center;cursor:pointer;} .ad-x::before{content:"";position:absolute;left:-6px;right:-6px;top:-6px;bottom:-6px;} /* 누름 영역만 넓힌다 */ /* 생산품목 사진은 차례가 곧 화면이다 — 사이트 카드 썸네일이 대표와 그다음 세 장으로 만들어진다. 그래서 타일에 끌 손잡이와 차례 번호를 얹고, 첫 장에 「대표」를 붙인다. */ .ad-gi-lead{position:absolute;left:5px;top:5px;z-index:1;} .ad-gi-bar{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:space-between;gap:4px;padding:4px 5px;background:linear-gradient(transparent,rgba(0,0,0,.55));} .ad-gi-h{color:#fff;font-size:13px;letter-spacing:-2px;cursor:grab;user-select:none;text-shadow:0 1px 2px rgba(0,0,0,.5);} .ad-gi-h:active{cursor:grabbing;} .ad-gi-n{color:#fff;font-size:10.5px;font-family:var(--lt);text-shadow:0 1px 2px rgba(0,0,0,.5);} /* 타일의 앞/뒤 — 목록의 ▲▼ 와 같은 것. 끌기는 손가락에서 일어나지 않는다. 표는 위아래로, 타일은 좌우로 늘어선다. */ .ad-lr{display:flex;gap:2px;} .ad-lr .ad-btn{padding:0;width:18px;height:16px;line-height:1;font-size:9px;border:1px solid rgba(255,255,255,.6);background:rgba(0,0,0,.35);color:#fff;} /* 제품모델 타일은 사진이 label 안에 있다. 막대를 그 안에 두려면 label 이 기준 상자여야 한다. */ .ad-gi label{position:relative;} .ad-gi[draggable="true"]{opacity:.55;} .ad-kv{display:flex;gap:10px;font-size:12.5px;padding:5px 0;} .ad-kv span{flex:none;width:74px;color:var(--k6);} /* 로그인 */ /* border-box 가 아니면 100vh + 패딩 80px 이라 어느 화면에서든 80px 세로 스크롤이 생긴다 */ .lg{box-sizing:border-box;min-height:100vh;min-height:100dvh;background:#141414;display:flex;align-items:center;justify-content:center;padding:40px 20px;} .lg-box{width:392px;max-width:100%;background:#fff;padding:38px 34px 30px;} .lg-h{display:flex;align-items:center;gap:10px;justify-content:center;margin-bottom:8px;} .lg-t{text-align:center;font-size:12.5px;color:var(--k6);margin-bottom:26px;} input.ad-i{display:block;width:100%;box-sizing:border-box;font-family:inherit;font-size:13.5px; line-height:1.5;color:var(--k9);background:#fff;border:1px solid var(--k3);padding:9px 11px; border-radius:0;-webkit-appearance:none;appearance:none;} input.ad-i::placeholder{color:var(--k4);opacity:1;} input.ad-i:focus{outline:none;border-color:var(--k9);} button.ad-btn{font-family:inherit;border:0;border-radius:0;} /* 위 줄은 브라우저 기본 단추 테두리를 걷으려던 것인데 .ad-btn-o 의 테두리까지 이겼다(요소+클래스 > 클래스) — 표의 「삭제」 · 공지 「선택 삭제」가 테두리 없는 글자로 보여 단추인 줄 몰랐다. 링크(a.ad-btn-o)와 같게 되살린다. */ button.ad-btn.ad-btn-o{border:1px solid var(--k3);} .ad-err{background:var(--red-1);border:1px solid var(--red);color:var(--red-9); padding:11px 13px;font-size:12.5px;line-height:1.6;margin-bottom:16px;} a.ad-m,a.ad-brand,a.ad-btn,a.ad-btn-o,a.ad-btn-r{text-decoration:none;} a.ad-m{color:#c2c2c2;} a.ad-m.ad-on{color:#fff;} a.ad-brand{color:inherit;display:flex;} a.ad-btn-o{color:var(--k9);} a.ad-btn-r{color:#fff;} button.ad-btn{cursor:pointer;} /* 고른 것이 없을 때의 「선택 삭제」. 눌러도 아무 일이 없는 버튼을 두지 않는다 — 흐리게 해 두고 실제로 막는다. */ button.ad-btn:disabled{cursor:default;opacity:.4;} textarea.ad-i{display:block;width:100%;box-sizing:border-box;font-family:inherit;font-size:13.5px; line-height:1.5;color:var(--k9);background:#fff;border:1px solid var(--k3);padding:9px 11px; border-radius:0;resize:vertical;} textarea.ad-i::placeholder{color:var(--k4);opacity:1;} textarea.ad-i:focus{outline:none;border-color:var(--k9);} /* 긴 글 칸은 글 길이만큼 늘어난다. 인사말 본문을 104px 칸 안에서 밀며 고쳐야 했다. field-sizing 이 없는 브라우저(사파리)는 admin.js 가 높이를 맞춘다. 너무 길면 화면의 70% 에서 멈추고 안에서 민다. */ textarea.ad-ta{min-height:104px;field-sizing:content;max-height:70vh;} textarea.ad-ta-s{min-height:58px;field-sizing:content;max-height:70vh;} /* 저장 폼이 본문과 저장바를 감싼다. 늘어나지 않으면 저장바가 위로 붙는다. */ .ad-main > form{flex:1;display:flex;flex-direction:column;min-width:0;} /* 표 안에서 바로 고치는 칸 — 평소에는 글자처럼 보인다 */ .ad-ic{width:100%;box-sizing:border-box;border:0;background:transparent;padding:0;margin:0; font-family:inherit;font-size:inherit;line-height:inherit;color:inherit;border-radius:0; -webkit-appearance:none;appearance:none;} /* 표 안에서 고르는 칸. 인증/특허 · CAD/CAM 처럼 **한 번 정해지면 못 바꾸던 값**을 글자(표)와 숨은 칸으로 그려 두었더니, 「+ 추가」가 마지막 줄을 본떠 새 인증서가 100% 특허가 됐다. 입력칸과 같은 글자로 놓고 꺾쇠만 붙인다. */ select.ad-ic{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:16px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23A4A4A4' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right center;} .ad-ic:hover{background:#FAFAFA;} .ad-ic:focus{outline:2px solid var(--k9);outline-offset:1px;background:#fff;} /* ═══ 좁은 화면 ═══════════════════════════ 관리자는 태블릿까지가 필수다(SPEC). 사이드바가 238px 를 고정으로 물고 있어 768px 에서 본문에 530px 밖에 남지 않았고, 14열짜리 표가 화면을 뚫고 나갔다. 768 이하에서 사이드바를 위쪽 가로 메뉴로 눕힌다. (처음에는 1024 였다. 그 폭은 작은 노트북 · 태블릿 가로라 담당자가 쓸 법한데, 메뉴 21개가 1660px 가로 띠가 되어 옆으로 밀어야 했다. 1024 에서 사이드바를 두면 본문이 786px — 넓은 표는 .ad-card 안에서 옆으로 민다.) */ @media (max-width:1024px){ .ad-top{padding:13px 18px;} .ad-body{padding:16px 18px 20px;} .ad-save{padding:12px 18px;} .ad-3{grid-template-columns:1fr 1fr;} .ad-gal{grid-template-columns:repeat(4,1fr);} } /* 768 이하 — 사이드바를 로고와 ☰ 만 있는 검은 띠로 접는다(시안 「Admin Mobile Menu」). 예전에는 메뉴 18개를 가로 띠로 눕혀 옆으로 밀어야 했고, 상단바의 「사이트에서 보기 · 관리부 · 로그아웃」이 제목을 밀어내며 두 줄로 흩어졌다. 메뉴는 ☰ 를 누르면 띠 바로 아래로 펼치고(admin.js 가 .ad-open 을 단다), 관리부 · 로그아웃은 펼친 메뉴의 맨 아래로 옮긴다. 펼친 상자 바깥은 그림자로 어둡게 — 덮는 요소를 따로 두지 않는다. */ @media (max-width:768px){ .ad{flex-direction:column;} /* 띠는 위에 붙는다 — 3,000px 넘는 화면 아래에서도 ☰ 가 손에 있다(검토에서 「맨 위까지 올려야만 열린다」). 상단바는 그 아래(56px)에 붙는다 */ .ad-side{width:auto;flex:none;padding-bottom:0;position:sticky;top:0;z-index:30;} .ad-top{top:56px;} .ad-side-in{position:static;max-height:none;overflow:visible; display:flex;align-items:center;justify-content:space-between;height:56px;padding-right:6px;} .ad-brand{flex:none;border-bottom:0;padding:0 16px;height:56px;box-sizing:border-box;} .ad-burger{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px; width:44px;height:44px;padding:0;background:transparent;border:0;cursor:pointer;position:relative;} .ad-burger span{display:block;width:20px;height:2px;background:#fff;transition:transform .15s,opacity .15s;} .ad-open .ad-burger span{position:absolute;left:12px;top:21px;} .ad-open .ad-burger span:nth-child(1){transform:rotate(45deg);} .ad-open .ad-burger span:nth-child(2){opacity:0;} .ad-open .ad-burger span:nth-child(3){transform:rotate(-45deg);} .ad-nav{display:none;position:absolute;left:0;right:0;top:56px;z-index:2;background:#141414;padding:4px 0 0; max-height:calc(100vh - 56px);max-height:calc(100dvh - 56px);overflow-y:auto; /* 메뉴 끝에 닿은 휠이 페이지로 번지지 않게 — 번지면 메뉴가 화면 위로 밀려 사라졌다 */ overscroll-behavior:contain; grid-template-columns:1fr 1fr;} .ad-open .ad-nav{display:grid;} /* 펼친 동안 띠 아래 전부를 덮는 어두운 막. 그림자로 칠하던 때는 손가락이 막을 지나 밑의 입력칸에 포커스를 주고 키보드를 띄웠다 — 진짜로 덮는다. 누르면 admin.js 가 닫는다. */ .ad-open::after{content:"";position:fixed;left:0;right:0;top:56px;bottom:0;z-index:1;background:rgba(0,0,0,.45);} /* 펼친 동안 뒤 화면을 굴리지 않는 일은 admin.js 가 막 위의 휠 · 터치를 막아서 한다. html 에 overflow:hidden 을 걸면 안 된다 — 띠의 sticky 가 풀려, 내린 상태에서 열면 메뉴가 화면 위로 사라졌다. */ /* 미확인 문의 — 닫힌 띠에서도 보이게 ☰ 오른쪽 위에 점. 펼치면 메뉴의 숫자가 대신한다 */ .ad-burger-dot{display:block;position:absolute;top:9px;right:8px;width:8px;height:8px;border-radius:50%;background:var(--red);box-shadow:0 0 0 2px #141414;} .ad-open .ad-burger-dot{display:none;} /* 그룹 제목은 한 줄을 다 먹고, 메뉴는 그 아래로 두 열씩 흐른다 — 손가락 크기(44px) */ .ad-grp{grid-column:1/-1;padding:14px 16px 4px;} .ad-m{display:flex;align-items:center;min-height:44px;padding:0 16px;font-size:14px;} .ad-badge{float:none;margin:0 0 0 6px;} .ad-acct{display:flex;grid-column:1/-1;align-items:center;justify-content:space-between;gap:10px; margin-top:12px;padding:12px 16px 14px;border-top:1px solid #262626;} a.ad-acct-who{font-size:13px;color:#fff;text-decoration:underline;text-underline-offset:3px;} .ad-acct-f{margin:0;} .ad-acct-out{background:transparent;color:#c2c2c2;border:1px solid #3a3a3a;font:inherit;font-size:12px;padding:7px 12px;cursor:pointer;} .ad-top-who,.ad-top-out{display:none !important;} .ad-t th{top:72px;} } @media (max-width:640px){ /* 인라인 grid-template-columns(글쓰기 · 슬라이드 · 동영상)가 클래스 규칙을 이기므로 !important 로 눌러 한 열로 */ .ad-2,.ad-3{grid-template-columns:1fr !important;row-gap:0;} /* 한 열이면 칸의 margin(16)만으로 띄운다 — 줄 간격이 32 · 16 으로 갈렸다 */ /* 표가 width:100% 라 390 에서 열이 두 글자 폭으로 짜부라졌다. 바닥 폭을 주고 .ad-card 안에서 옆으로 민다 */ .ad-t{min-width:600px;} /* 폰에서는 ▲▼ · ◀▶ 가 끌기를 대신하는 유일한 손잡이인데 가장 작았다(20×15). 손가락 크기로. */ .ad-ud .ad-btn{width:28px;height:22px;font-size:10px;} .ad-lr .ad-btn{width:26px;height:22px;font-size:10px;} /* 열이 서넛뿐인 표(첨부 · 로그인된 기기)는 밀 필요가 없다 */ .ad-t-s{min-width:0;} .ad-btn{white-space:nowrap;} .ad-ch{flex-wrap:wrap;gap:10px;} .ad-gal{grid-template-columns:repeat(2,1fr);} .ad-top{flex-wrap:wrap;gap:10px;} .ad-save{flex-wrap:wrap;gap:10px;} .ad-save-t{width:100%;} .ad-body{padding:14px 14px 18px;} .ad-h1{font-size:17px;} } /* 표는 최대 14열이라 좁은 화면에서 반드시 넘친다. 카드 안에서 옆으로 밀어 본다 — 표를 감싸는 요소가 이미 있으므로 마크업을 건드리지 않는다. overflow-x 를 주면 overflow-y 가 auto 로 계산되므로(CSS 규칙) 세로는 막는다. */ .ad-card{ /* 숨긴 체크박스(.vh 는 position:absolute)의 담는 상자를 카드로 — 없으면 body 기준으로 놓여 표가 옆으로 밀릴 때 그 자리(x=480)가 문서 폭에 잡혀 화면 전체가 가로로 흔들렸다 */ position:relative;} /* 넓은 화면에서까지 카드를 스크롤 상자로 두면 표 머리글의 sticky 가 카드 기준이 되어 붙지 않는다 — 넘칠 수 있는 폭에서만 옆으로 민다(거기서는 머리글이 안 붙는다). 사이드바가 1024 까지 남으므로 그 폭부터다 — 800 에서 본문이 562px 라 설비 표(738px)가 카드를 뚫고 페이지 전체가 195px 옆으로 넘쳤다. */ @media (max-width:1024px){ .ad-card{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;} } /* ── 고친 곳을 화면이 말한다 ─────────────────────────────── 담당자가 무엇을 바꿨는지 저장하기 전에 보여 주고, 고친 것이 없으면 저장 단추를 잠근다. **서버는 이 클래스를 내지 않는다.** 화면을 막 열었을 때는 고친 것이 없으므로 첫 모습에는 붙을 일이 없고, 그래서 골든(정적 시안)과 구현의 첫 그림이 같다. 값을 견주어 붙이는 일은 admin.js 가 한다. 막대는 가상요소로 그린다 — border-left 로 그리면 칸이 3px 씩 밀려 고칠 때마다 화면이 흔들린다. */ .ad-f{position:relative;} .ad-f.ad-mod::before{ content:"";position:absolute;left:-10px;top:0;bottom:0;width:3px;background:var(--red);} .ad-f.ad-mod .ad-i,.ad-f.ad-mod textarea.ad-i,.ad-f.ad-mod select.ad-i{ background:#FFFDF4;border-color:var(--k4);} /* 표에서는 줄 전체가 한 항목이다. 막대는 첫 칸 안쪽에 긋는다 — tr 에 그리면 브라우저마다 테두리 겹침이 달라진다. */ tr.ad-mod > td:first-child{box-shadow:inset 3px 0 0 var(--red);} /* .ad-f 도 표 줄도 아닌 자리 — 공지 수정의 체크 셋처럼