/* 사용자 누리집 스타일 — kdia 샘플의 토큰·레이아웃 규칙을 옮겼다 (모바일 스택 규칙 포함) */ :root{ --gov:#0B5BD3; --gov-d:#0847A8; --deep:#16305E; --deep-x:#0E2144; --sky:#EFF4FB; --gold:#C7862B; --ink:#1A2433; --ink-2:#475467; --ink-3:#8593A6; --line:#DDE4EE; --line-d:#C4CFDE; --ok:#15803D; --warn:#B45309; --bad:#B91C1C; --r:10px; --r-lg:14px; --sh:0 1px 3px rgba(16,32,64,.07); --sh-md:0 8px 24px rgba(16,32,64,.1); --sh-lg:0 20px 50px rgba(14,33,68,.22); } *{margin:0;padding:0;box-sizing:border-box} html{font-size:15px} body{font-family:Pretendard,-apple-system,'Malgun Gothic','Hiragino Sans',sans-serif;color:var(--ink);background:#fff;line-height:1.6} body.hc{filter:contrast(1.25) saturate(1.1)} button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit;font-size:inherit} a{color:inherit;text-decoration:none} img{max-width:100%} ul,ol{list-style:none} :focus-visible{outline:3px solid var(--gov);outline-offset:2px;border-radius:4px} .wrap{max-width:1220px;margin:0 auto;padding:0 22px} .sr{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .empty{color:var(--ink-3);font-size:.9rem;padding:22px 4px;text-align:center} /* 건너뛰기 링크 — 포커스를 받을 때만 화면에 온다 */ .skip a{position:fixed;top:-60px;left:50%;transform:translateX(-50%);z-index:400; background:var(--deep);color:#fff;padding:10px 26px;border-radius:0 0 10px 10px;font-weight:700;transition:top .15s} .skip a:focus{top:0} /* 정부 배너 · 상단 유틸 */ .gov-band{background:var(--deep-x);color:#C9D6EC;font-size:.76rem} .gov-band .wrap{display:flex;align-items:center;gap:8px;padding-top:7px;padding-bottom:7px;flex-wrap:wrap} .gov-band b{color:#fff} .flag{width:18px;height:12px;border-radius:2px;background:#fff;position:relative;display:inline-block;border:1px solid rgba(255,255,255,.35);flex:none} .flag::before{content:"";position:absolute;left:50%;top:50%;width:7px;height:7px;transform:translate(-50%,-50%);border-radius:50%;background:linear-gradient(180deg,#C60C30 50%,#003478 50%)} .gov-band .util{margin-left:auto;display:flex;gap:2px;align-items:center} .gov-band .util button{padding:3px 9px;border-radius:6px;font-size:.74rem} .gov-band .util button:hover{background:rgba(255,255,255,.12);color:#fff} .gov-band .sep{opacity:.35} /* 헤더 · GNB 2단 */ header.site{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:100} .hd-top{display:flex;align-items:center;gap:26px;padding:16px 0 12px} .logo{display:flex;align-items:center;gap:11px} .logo-mark{width:42px;height:42px;border-radius:11px;background:linear-gradient(135deg,var(--gov),var(--deep));display:grid;place-items:center;color:#fff;font-weight:800;flex:none} .logo b{font-size:1.15rem;color:var(--deep);display:block;line-height:1.2} .logo small{font-size:.66rem;color:var(--ink-3);letter-spacing:.12em} .hd-search{margin-left:auto;position:relative;width:min(340px,32vw)} .hd-search input{width:100%;padding:11px 46px 11px 18px;border:2px solid var(--deep);border-radius:99px;font-size:.88rem;font-family:inherit} .hd-search button{position:absolute;right:5px;top:50%;transform:translateY(-50%);width:34px;height:34px;border-radius:50%;background:var(--deep);color:#fff;display:grid;place-items:center} .gnb{border-top:1px solid var(--line)} .gnb>ul{display:flex} .gnb>ul>li{flex:1;position:relative} .gnb .g1{display:block;text-align:center;padding:13px 6px;font-weight:700;font-size:.98rem;border-bottom:3px solid transparent} .gnb .g1:hover,.gnb .g1.on,.gnb>ul>li:focus-within>.g1{color:var(--gov);border-bottom-color:var(--gov)} .gnb .sub{position:absolute;left:50%;transform:translateX(-50%);top:100%;min-width:200px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--sh-md);padding:8px;opacity:0;visibility:hidden;transition:.16s;z-index:110} .gnb>ul>li:hover .sub,.gnb>ul>li:focus-within .sub{opacity:1;visibility:visible} .gnb .s1{display:block;padding:9px 13px;border-radius:8px;font-size:.87rem;color:var(--ink-2)} .gnb .s1:hover{background:var(--sky);color:var(--gov);font-weight:700} /* 캔버스 12컬럼 — 모바일 스택 규칙은 아래 미디어 쿼리가 담당한다 */ .canvas-wrap{padding:26px 22px 40px} .canvas{display:grid;grid-template-columns:repeat(12,1fr);gap:18px;align-items:start} .comp{min-width:0} /* 미세 크기 조정 (cfg 축 pad·minh · 슬라이스 D-4.4) — 열 폭(w)·행 점유(h)는 격자가 정하고, «보이는 크기»는 여기서 정한다. 첫 단계(pad_none·minh_auto)는 미지정과 같은 그림이라 규칙이 없다 */ .comp.cfg-pad_md{padding:14px} .comp.cfg-pad_lg{padding:28px} /* 「보이는 높이」 사다리 (태스크 #18) — 세로 리사이즈가 «이 규칙» 을 고른다. 40px 등간이라 옆 칸 높이에 맞출 때 어긋남이 최대 20px 다. 코드·순서는 카탈로그 두 곳과 같다(catalog.ts MINH_PX) */ .comp.cfg-minh_40{min-height:40px} .comp.cfg-minh_80{min-height:80px} .comp.cfg-minh_120{min-height:120px} .comp.cfg-minh_160{min-height:160px} .comp.cfg-minh_200{min-height:200px} .comp.cfg-minh_240{min-height:240px} .comp.cfg-minh_280{min-height:280px} .comp.cfg-minh_320{min-height:320px} .comp.cfg-minh_360{min-height:360px} .comp.cfg-minh_400{min-height:400px} .comp.cfg-minh_440{min-height:440px} .comp.cfg-minh_480{min-height:480px} .comp.cfg-minh_520{min-height:520px} .comp.cfg-minh_560{min-height:560px} .comp.cfg-minh_600{min-height:600px} /* 「이웃에 맞춤」 — 픽셀 칸으로는 못 주는 «정확한 일치» 다. `.canvas{align-items:start}` 를 이 칸에서만 풀면 칸이 제 격자 영역을 채우고, 그 영역 높이는 같은 행 가장 큰 이웃의 높이다(태스크 #18) */ .comp.cfg-minh_fit{align-self:stretch} /* 박스가 커지면 «내용도» 그만큼 채운다 — 안 그러면 늘어난 만큼이 아래 빈칸으로 남는다(심땁 보고). 각 유형은 `section.comp` 안에 루트 요소 하나다(components.html) — 그 하나를 늘리면 전 유형이 함께 따라온다. 최소 높이를 «고른 칸에만» 걸리므로 지정하지 않은 칸의 그림은 한 픽셀도 바뀌지 않는다. `minh_auto` 는 «미지정과 같은 그림» 이라 여기서 뺀다 — 부분일치 선택자가 그 코드까지 잡아서 「자동」을 고르기만 해도 칸이 flex 컨테이너가 되던 자리다(20종 스윕 결함 A 부수). */ .comp[class*="cfg-minh_"]:not(.cfg-minh_auto){display:flex;flex-direction:column} .comp[class*="cfg-minh_"]:not(.cfg-minh_auto)>*{flex:1 1 auto;min-height:0} /* ── 결함 A — 늘어난 상자를 «안쪽» 까지 흘려보낸다 (20종 스윕 실측 · 태스크 #20) ── 위 두 줄은 직계 자식 하나(`.c-<유형>`)까지만 늘린다. 배경과 내용을 진 요소는 대개 그 «안» 이라 minh_400 에서 늘어난 286px 가 그대로 죽은 여백으로 남았다(stats·cta·quick·cards 실측). 유형마다 늘어야 할 요소가 달라 일반 규칙을 둘 수 없다 — `.c-split`·`.c-map` 은 격자이고 `.c-search`·`.c-ticker`·`.hero` 는 직계 자식이 곧 배경이라 위 두 줄로 이미 찬다. 모두 최소 높이를 «고른 칸» 안이라 지정하지 않은 칸의 그림은 한 픽셀도 바뀌지 않는다. */ .t-stats[class*="cfg-minh_"]:not(.cfg-minh_auto) .c-stats, .t-cta[class*="cfg-minh_"]:not(.cfg-minh_auto) .c-cta, .t-quick[class*="cfg-minh_"]:not(.cfg-minh_auto) .c-quick, .t-cards[class*="cfg-minh_"]:not(.cfg-minh_auto) .c-cards, .t-gallery[class*="cfg-minh_"]:not(.cfg-minh_auto) .c-gallery, .t-banner[class*="cfg-minh_"]:not(.cfg-minh_auto) .c-banner, .t-sns[class*="cfg-minh_"]:not(.cfg-minh_auto) .c-sns, .t-timeline[class*="cfg-minh_"]:not(.cfg-minh_auto) .c-timeline, .t-board[class*="cfg-minh_"]:not(.cfg-minh_auto) .c-board{display:flex;flex-direction:column;min-height:0} .t-stats[class*="cfg-minh_"]:not(.cfg-minh_auto) .stat-strip, .t-cta[class*="cfg-minh_"]:not(.cfg-minh_auto) .c-cta>div, .t-quick[class*="cfg-minh_"]:not(.cfg-minh_auto) .quick-grid, .t-cards[class*="cfg-minh_"]:not(.cfg-minh_auto) .card-grid, .t-gallery[class*="cfg-minh_"]:not(.cfg-minh_auto) .gal-grid, .t-banner[class*="cfg-minh_"]:not(.cfg-minh_auto) .bnr-zone, .t-sns[class*="cfg-minh_"]:not(.cfg-minh_auto) .sns-list, .t-timeline[class*="cfg-minh_"]:not(.cfg-minh_auto) .tl-track, .t-board[class*="cfg-minh_"]:not(.cfg-minh_auto) .news-list{flex:1 1 auto;min-height:0} /* 타일 격자는 칸(`li`)까지만 늘어난다 — 배경·테두리를 진 것은 그 «안» 의 링크라 한 겹 더 흘린다 (사업 카드 `.biz-card{height:100%}` · 게시판 카드형이 이미 쓰는 것과 같은 수법이다) */ .t-quick[class*="cfg-minh_"]:not(.cfg-minh_auto) .quick-grid>li>.q-item, .t-gallery[class*="cfg-minh_"]:not(.cfg-minh_auto) .gal-grid>li>a, .t-gallery[class*="cfg-minh_"]:not(.cfg-minh_auto) .gal-grid>li>figure, .t-gallery[class*="cfg-minh_"]:not(.cfg-minh_auto) .gal-grid>li>figure>a, .t-banner[class*="cfg-minh_"]:not(.cfg-minh_auto) .bnr-zone>li>.bnr, .t-sns[class*="cfg-minh_"]:not(.cfg-minh_auto) .sns-list>li>a, .t-sns[class*="cfg-minh_"]:not(.cfg-minh_auto) .sns-list>li>span{height:100%} /* 타일 격자를 가진 두 유형의 개별 축 — 칸이 커지면 한 줄에 덜 들어간다(auto-fit/fill 그대로) */ .cfg-tile_lg .gal-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))} .cfg-tile_lg .quick-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))} /* 컴포넌트 공통 */ .sec-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:14px} /* 제목이 줄지 못하면 「전체보기」가 상자 밖으로 밀린다 — 좁은 칸에서 382px 까지 새던 자리다 (20종 스윕 · board·content·faq 공통). 제목은 줄이고 알약은 제 크기를 지킨다 */ .sec-h h2{font-size:1.3rem;font-weight:800;color:var(--deep);min-width:0;overflow-wrap:anywhere} .more-link{flex:none;font-size:.82rem;font-weight:700;color:var(--ink-2);border:1.5px solid var(--line-d);border-radius:99px;padding:5px 14px} .more-link:hover{border-color:var(--gov);color:var(--gov)} .btn{display:inline-flex;align-items:center;gap:8px;padding:11px 22px;border-radius:99px;font-weight:700;font-size:.9rem} .btn-deep{background:var(--deep);color:#fff} .btn-w{background:#fff;color:var(--deep)} /* 메인 이미지 */ .hero{position:relative;background:linear-gradient(115deg,#0E2144 0%,#0B5BD3 78%,#2E7BE8 100%);border-radius:var(--r-lg);overflow:hidden;color:#fff} .hero-slide img{width:100%;height:auto;display:block;object-fit:cover;background:var(--sky)} .hero-cap{padding:10px 16px;font-size:.86rem;background:rgba(14,33,68,.55)} .hero-empty{padding:60px 20px;text-align:center;color:#C9D6EC} .hero-ctrl{display:flex;align-items:center;gap:10px;padding:10px 16px;background:rgba(14,33,68,.55)} .hero-dots{display:flex;gap:7px} .hero-dots button{width:26px;height:6px;border-radius:99px;background:rgba(255,255,255,.35)} .hero-dots button.on{background:#fff;width:40px} .hero-play{width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.2);color:#fff;border:1px solid rgba(255,255,255,.35);margin-left:auto} /* JS 가 있을 때만 슬라이드를 감춘다 — 없으면 전 장면이 순서대로 보인다 */ html.js .hero-slide:not(.on){display:none} /* 목록형 컴포넌트 */ .news-list li a,.news-list li>span{display:flex;align-items:center;gap:12px;padding:11px 4px;border-bottom:1px solid var(--line);font-size:.93rem} .news-list .tt{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .news-list a:hover .tt{color:var(--gov);text-decoration:underline} .news-list .dt{font-size:.78rem;color:var(--ink-3);white-space:nowrap} /* 링크 카드 */ .quick-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px} /* 칸이 좁아도 카드가 격자를 뚫지 않는다 — 긴 메뉴 이름 한 줄이 169px 까지 새던 자리다(20종 스윕) */ .quick-grid>li{min-width:0} .q-item{display:block;min-width:0;overflow-wrap:anywhere;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:16px 12px;text-align:center;box-shadow:var(--sh)} .q-item:hover{border-color:var(--gov)} .q-item b{font-size:.88rem;display:block} .q-item small{font-size:.7rem;color:var(--ink-3)} /* 배너존 */ .bnr-zone{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px} .bnr-zone>li{min-width:0} .bnr{display:flex;flex-direction:column;justify-content:center;min-width:0;overflow-wrap:anywhere;min-height:96px;padding:18px;border-radius:var(--r-lg);background:linear-gradient(120deg,var(--gov),var(--deep));color:#fff} .bnr span{font-size:.78rem;opacity:.88} .bnr-play{margin-top:8px;font-size:.75rem;color:var(--ink-2)} /* 실적 카운터 */ .stat-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px;background:linear-gradient(120deg,var(--deep),var(--gov-d));color:#fff;border-radius:var(--r-lg);padding:26px 18px} /* 항목명·수치가 줄지 못하면 띠 밖으로 700px 까지 샌다(20종 스윕) — 격자 칸 안에서 접는다 */ .st-item{text-align:center;min-width:0;overflow-wrap:anywhere} .st-item .v{font-size:1.8rem;font-weight:800} .st-item .l{font-size:.8rem;opacity:.8} /* 갤러리 */ .gal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px} .gal-grid img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:10px;background:var(--sky)} .gal-grid>li{min-width:0} .gal-grid a{display:block;min-width:0;overflow-wrap:anywhere;border:1px solid var(--line);border-radius:10px;padding:8px} /* 탭 — 탭 이름이 길면 한 줄에 다 서지 못한다. 줄을 바꿔 담는다(안 그러면 1118px 까지 샌다 · 20종 스윕) */ .tabs{display:flex;flex-wrap:wrap;gap:4px;border-bottom:2px solid var(--line);margin-bottom:8px} .tabs button{padding:9px 16px;font-weight:700;font-size:.92rem;color:var(--ink-3);border-bottom:3px solid transparent;margin-bottom:-2px;min-width:0;overflow-wrap:anywhere} .tabs button.on{color:var(--gov);border-bottom-color:var(--gov)} html.js .tab-panel:not(.on){display:none} /* 티커 */ .c-ticker{display:flex;align-items:center;gap:14px;background:var(--sky);border-radius:var(--r);padding:10px 16px;overflow:hidden} /* 라벨이 줄지 못하면 정지 버튼이 띠 밖으로 262px 까지 밀린다 — 켜고 끄는 조작이 화면 밖으로 나가면 키보드·화면확대 사용자가 닿지 못한다(KWCAG 2.1.1 · 20종 스윕). 라벨을 줄이고 버튼을 지킨다 */ .tk-label{font-size:.9rem;font-weight:800;color:var(--deep);white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis} .tk-track{flex:1;min-width:0;overflow:hidden;white-space:nowrap} html.js .tk-track li{display:none} html.js .tk-track li.on{display:block} .tk-play{flex:none;font-size:.75rem;color:var(--ink-2)} /* FAQ · 상세형 아코디언 */ details{border-bottom:1px solid var(--line);min-width:0;overflow-wrap:anywhere} details summary{padding:13px 4px;font-weight:600;cursor:pointer} details .faq-a{padding:0 4px 14px;font-size:.9rem;color:var(--ink-2)} /* 신청 CTA — 문구가 줄지 못하면 밴드 밖으로 236px 까지 샌다(20종 스윕). 버튼은 칸을 넘지 않는다 */ .c-cta>div{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;background:linear-gradient(120deg,var(--gov),var(--deep));color:#fff;border-radius:var(--r-lg);padding:20px 24px} .c-cta b{font-size:1.05rem;min-width:0;overflow-wrap:anywhere} .c-cta .btn{max-width:100%;overflow-wrap:anywhere} /* 사업 카드 — 이미지·아이콘 + 제목 그리드. 한 줄에 몇 «열» 인지는 cfg-c3/c4/c6 이 정하고, 카드 «수» 는 문서의 d.items 길이가 정한다(태스크 #17) */ .card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px} /* `1fr` 의 하한은 «내용 최소 폭» 이라 열 수를 못 박은 칸은 좁아져도 줄지 않는다 — `minmax(0,1fr)` 가 그 하한을 푼다(달력 칩에서 쓴 것과 같은 수법 · 20종 스윕). 아래 고정 열 규칙 전부 같다 */ .cfg-c3 .card-grid{grid-template-columns:repeat(3,minmax(0,1fr))} .cfg-c4 .card-grid{grid-template-columns:repeat(4,minmax(0,1fr))} .cfg-c6 .card-grid{grid-template-columns:repeat(6,minmax(0,1fr))} .card-grid>li{min-width:0} /* 가운데 정렬이라 칸보다 넓은 제목은 «좌우 양쪽» 으로 샜다(escL 124px 실측) */ .biz-card{display:flex;flex-direction:column;align-items:center;gap:8px;height:100%;min-width:0;overflow-wrap:anywhere;padding:20px 12px;border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;text-align:center;color:var(--ink)} .biz-card>*{max-width:100%} .biz-card .ic{font-size:1.5rem;line-height:1} .biz-card .ph{display:block;width:100%;aspect-ratio:16/10;border-radius:var(--r);overflow:hidden;background:var(--sky)} .biz-card .ph img{width:100%;height:100%;object-fit:cover;display:block} .biz-card b{font-size:.92rem} .cfg-lift a.biz-card:hover{box-shadow:var(--sh-lg);transform:translateY(-2px)} .cfg-zoom a.biz-card:hover .ic{transform:scale(1.15)} .cfg-zoom a.biz-card:hover .ph img{transform:scale(1.08);transition:.15s} a.biz-card{transition:.15s} a.biz-card:hover{border-color:var(--gov);color:var(--gov)} /* 타임라인 — 가로 스텝이 기본, cfg-vertical 이 세로 리스트로 눕힌다 */ .tl-track{display:flex;gap:10px;flex-wrap:wrap} /* `min-width:110px` 은 «줄어들 수 있는» 하한일 뿐이라 긴 문구는 그 칸을 뚫고 나갔다(377px 실측) */ .tl-track li{flex:1;min-width:110px;overflow-wrap:anywhere;border-top:3px solid var(--gov);padding:12px 4px 0} .tl-track .yr{display:block;font-size:1.05rem;color:var(--deep)} .tl-track .lb{display:block;font-size:.86rem;color:var(--ink-2);margin-top:4px} .cfg-vertical .tl-track{display:block} .cfg-vertical .tl-track li{border-top:0;border-left:3px solid var(--gov);padding:6px 0 6px 14px} /* 스플릿 섹션 — 이미지 + 문구. cfg-right 는 이미지를 오른쪽에 둔다 */ .c-split{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:center} /* 두 단은 «내용 최소 폭» 아래로 못 줄어 좁은 칸에서 351px 까지 샜다(20종 스윕) */ .c-split>*{min-width:0;overflow-wrap:anywhere} .c-split .sp-img img{width:100%;border-radius:var(--r-lg);background:var(--sky)} .c-split .sp-body h2{font-size:1.3rem;margin-bottom:8px} .c-split .sp-body p{color:var(--ink-2)} .cfg-right .sp-img{order:2} .cfg-tint{background:var(--sky);border-radius:var(--r-lg);padding:22px} /* 오시는 길 — 지도 API 는 별도 결정이라 주소·교통 안내까지다 */ /* 주소·전화·교통 안내는 «끊을 자리가 없는» 한 덩어리일 수 있다 — 상자 안에서 접는다(235px 실측) */ .c-map{border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;background:var(--sky);min-width:0;overflow-wrap:anywhere} .c-map h2{font-size:1.05rem;color:var(--deep)} .c-map .addr{margin-top:8px;font-size:1rem;font-weight:700} .c-map .transit{margin-top:4px;font-size:.86rem;color:var(--ink-2)} /* SNS 피드 */ .sns-list{display:flex;gap:10px;flex-wrap:wrap} .sns-list li{flex:1;min-width:130px;overflow-wrap:anywhere} .sns-list>li>a,.sns-list>li>span{display:block;padding:14px;border:1px solid var(--line);border-radius:var(--r);text-align:center;font-size:.9rem} .sns-list>li>a{color:var(--gov);font-weight:700} /* 보류 2종(cal·search 인기검색어) · 준비 중 자리 */ .c-static{border:1.5px dashed var(--line-d);border-radius:var(--r-lg);padding:22px;text-align:center;background:#FBFCFE} .c-static h2{font-size:1rem;color:var(--ink-2)} @media (max-width:760px){ .cfg-c3 .card-grid,.cfg-c4 .card-grid,.cfg-c6 .card-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .c-split{grid-template-columns:minmax(0,1fr)} .cfg-right .sp-img{order:0} } /* 레이어 팝업 */ .pop-ov{position:fixed;inset:0;background:rgba(14,33,68,.45);z-index:300;display:flex;align-items:center;justify-content:center;padding:20px} .pop-ov[hidden]{display:none} .popup{background:#fff;border-radius:18px;width:min(420px,100%);overflow:hidden;box-shadow:var(--sh-lg);min-width:0;overflow-wrap:anywhere} .popup .vis{background:linear-gradient(135deg,var(--gov),var(--deep));color:#fff;padding:24px;text-align:center;font-size:1.1rem} .popup .bd{padding:20px 24px;font-size:.88rem;color:var(--ink-2)} .popup .ft{display:flex;border-top:1px solid var(--line)} .popup .ft>*{flex:1;padding:13px;font-size:.84rem;text-align:center;color:var(--ink-2)} .popup .ft>*+*{border-left:1px solid var(--line)} .popup .ft .go{color:var(--gov);font-weight:800} /* 서브 페이지 */ .sub-head{background:linear-gradient(120deg,var(--deep),var(--gov-d));color:#fff} .sub-head .wrap{padding-top:38px;padding-bottom:38px} .sub-head .crumb{font-size:.78rem;opacity:.85;margin-bottom:10px;display:flex;gap:6px;flex-wrap:wrap} .sub-head h1{font-size:1.8rem;font-weight:800} .sub-body{padding:34px 22px 20px} .sub-layout{display:grid;grid-template-columns:220px 1fr;gap:34px;align-items:start} .sub-layout .sub-main{min-width:0} .lnb{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden} .lnb-h{background:var(--deep);color:#fff;padding:15px;font-weight:800;font-size:1rem} .lnb .l1{display:block;padding:12px 16px;font-size:.88rem;border-bottom:1px solid var(--line);color:var(--ink-2)} .lnb li:last-child .l1{border-bottom:0} .lnb .l1:hover{background:var(--sky);color:var(--gov)} .lnb .l1.on{background:var(--sky);color:var(--gov);font-weight:800;box-shadow:inset 3px 0 0 var(--gov)} /* 게시판 목록 */ .board-tools{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap;align-items:center} .board-tools .total{font-size:.84rem;color:var(--ink-2)} .board-tools input{margin-left:auto;padding:9px 14px;border:1.5px solid var(--line-d);border-radius:99px;min-width:200px;font-family:inherit;font-size:.86rem} .board-tools button{border:1.5px solid var(--line-d);border-radius:99px;padding:9px 16px;font-size:.86rem} table.board{width:100%;border-collapse:collapse;font-size:.9rem;border-top:2px solid var(--deep)} .board th{background:var(--sky);padding:12px;font-size:.82rem;color:var(--deep);border-bottom:1px solid var(--line)} .board td{padding:13px 12px;border-bottom:1px solid var(--line);text-align:center;color:var(--ink-2)} .board td.tt{text-align:left} .board td.tt a{font-weight:600;color:var(--ink)} .board td.tt a:hover{color:var(--gov);text-decoration:underline} .badge-n{font-size:.66rem;font-weight:800;color:#fff;background:var(--gov);border-radius:5px;padding:2px 6px} .col-no{width:70px}.col-writer{width:130px}.col-date{width:110px}.col-view{width:80px}.col-file{width:90px} .bd-webzine article{border-bottom:1px solid var(--line);padding:16px 4px} .bd-webzine h2{font-size:1.05rem;color:var(--deep)} .bd-webzine .meta{font-size:.78rem;color:var(--ink-3);margin-top:6px} .cal-list li{display:flex;gap:14px;padding:12px 4px;border-bottom:1px solid var(--line);font-size:.92rem} .cal-list time{color:var(--gov);font-weight:700;white-space:nowrap} .pager{display:flex;justify-content:center;gap:5px;margin-top:22px;flex-wrap:wrap} .pager a{min-width:34px;height:34px;display:grid;place-items:center;border-radius:9px;font-size:.85rem;font-weight:600;color:var(--ink-2);border:1px solid var(--line);padding:0 8px} .pager a:hover{border-color:var(--gov);color:var(--gov)} .pager a.on{background:var(--deep);border-color:var(--deep);color:#fff} /* 게시물 상세 */ .post-view h2{font-size:1.3rem;font-weight:800;color:var(--deep);padding-bottom:14px;border-bottom:2px solid var(--deep)} .post-meta{display:flex;gap:8px 18px;font-size:.8rem;color:var(--ink-3);padding:12px 4px;border-bottom:1px solid var(--line);flex-wrap:wrap} .post-meta dt{font-weight:700} .post-meta dd{margin-right:10px} .post-body{padding:26px 6px;font-size:.95rem;line-height:1.9;color:var(--ink-2)} .post-body h3,.post-body h4{color:var(--deep);margin:18px 0 8px} .post-body p{margin:10px 0} .post-files{background:var(--sky);border-radius:10px;padding:14px 16px;font-size:.88rem} .post-files h3{font-size:.9rem;color:var(--deep);margin-bottom:6px} .post-files a{color:var(--gov);font-weight:700;text-decoration:underline} .post-nav{border-top:1px solid var(--line);margin-top:22px} .post-nav p{display:flex;gap:14px;padding:12px 6px;border-bottom:1px solid var(--line);font-size:.86rem} .post-nav b{color:var(--ink-3);white-space:nowrap} .post-back{text-align:center;margin-top:24px} /* 콘텐츠 페이지 · 검색 */ .content-page{font-size:.95rem;color:var(--ink-2);line-height:1.9} .content-page h2{font-size:1.2rem;color:var(--deep);margin:22px 0 10px} .content-page section:first-child h2{margin-top:0} .page-rev{margin-top:26px;font-size:.78rem;color:var(--ink-3);border-top:1px solid var(--line);padding-top:12px} /* 서브페이지 블록 스택 전용 조각 — blockpage.html 에서만 나오는 유형이라 .t-bphero 로 가둔다 */ .t-bphero .bp-hero{background:linear-gradient(120deg,var(--deep),var(--gov-d));color:#fff; border-radius:var(--r-lg);padding:38px 26px} .t-bphero .bp-hero h2{font-size:1.8rem;font-weight:800;letter-spacing:-.6px; min-width:0;overflow-wrap:anywhere} .t-bphero .bp-hero .empty{color:#C9D6EC} .search-body{max-width:820px} .sr-total{font-size:.92rem;margin-bottom:16px} .sr-item{border:1px solid var(--line);border-radius:12px;padding:16px 18px;margin-bottom:10px} .sr-item a,.sr-item b{color:var(--deep);font-weight:700} .sr-item p{font-size:.84rem;color:var(--ink-3);margin-top:4px} #topBtn{position:fixed;right:22px;bottom:22px;width:44px;height:44px;border-radius:50%;background:var(--deep);color:#fff;box-shadow:var(--sh-md);z-index:90} #topBtn[hidden]{display:none} /* 푸터 */ footer.site{background:var(--deep-x);color:#9FB0CC;margin-top:52px} .ft-links{border-bottom:1px solid rgba(255,255,255,.1)} .ft-links .wrap{display:flex;gap:6px 20px;flex-wrap:wrap;padding:14px 22px;font-size:.8rem} .ft-links a:hover{color:#fff} .ft-main .wrap{padding:24px 22px} .ft-info b{color:#fff;font-size:.92rem;display:block;margin-bottom:6px} .ft-info span{font-size:.79rem} .ft-cms{border-top:1px solid rgba(255,255,255,.08);font-size:.7rem;text-align:center;padding:11px 0;color:#6E80A0} .ft-cms b{color:#F4A259} /* ── 모바일 스택 규칙 — 12컬럼 배치를 행→열 순서 그대로 1열로 눕힌다 ── */ @media(max-width:1000px){ .canvas{display:block} .canvas .comp{margin-bottom:18px} .sub-layout{grid-template-columns:1fr} .gnb>ul{flex-wrap:wrap} /* 닫힌 드롭다운도 페이지 폭을 민다 — `visibility:hidden` 은 «자리를 차지한다». 좁은 화면에서 1차 메뉴 한 칸은 70px 인데 패널은 `min-width:200px` 라, 가운데 정렬(`left:50%`)이 마지막 칸에서 오른쪽으로 43px 삐져나가 모든 페이지에 가로 스크롤이 생겼다(390px 운영 실측 · 360px 은 46px). 기준을 메뉴 «전체» 로 옮겨 좌우를 본문 여백에 못 박는다 — 닫혔을 때 폭을 밀지 않고, 열렸을 때도 잘리지 않는다. 여는 방법(hover · :focus-within)과 전환은 그대로다. 1000px 위(데스크톱)는 이 블록 밖이라 한 픽셀도 바뀌지 않는다. */ .gnb{position:relative} .gnb>ul>li{position:static} .gnb .sub{left:22px;right:22px;transform:none;min-width:0} .hd-search{display:none} html{font-size:14px} } @media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}} /* ── M5 언어 전환 · 회원 유틸 (프로토타입 .lang-btn · 상단 유틸 대응) ── */ .gov-band .lang{margin-left:auto;display:flex;gap:4px;align-items:center} .gov-band .lang a{padding:3px 9px;border-radius:6px;font-size:.74rem;color:inherit} .gov-band .lang a:hover{background:rgba(255,255,255,.12);color:#fff} .gov-band .lang a.on{background:rgba(255,255,255,.18);color:#fff;font-weight:800} .gov-band .member{display:flex;gap:6px;align-items:center} .gov-band .member a,.gov-band .member button{padding:3px 9px;border-radius:6px;font-size:.74rem;color:inherit} .gov-band .member a:hover,.gov-band .member button:hover{background:rgba(255,255,255,.12);color:#fff} .gov-band .member form{display:inline} .gov-band .member .me{color:#fff;font-weight:700} .gov-band .util{margin-left:0} /* ── M5 인증 화면 (로그인 · 가입 3단계) — 프로토타입 .auth-card 계열 ── */ .auth-wrap{max-width:460px;margin:46px auto;padding:0 20px} .auth-wrap.auth-wide{max-width:520px} .auth-card{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--sh-md);padding:36px 32px} .auth-card .sub{text-align:center;font-size:.84rem;color:var(--ink-3);margin:0 0 24px} .fld{margin-bottom:14px} .fld label{display:block;font-size:.8rem;font-weight:700;color:var(--ink-2);margin-bottom:6px} .fld input{width:100%;padding:11px 13px;border:1.5px solid var(--line-d,var(--line));border-radius:10px;background:#FBFCFE;font-family:inherit;font-size:.9rem} .fld input:focus{border-color:var(--gov);outline:2px solid transparent;background:#fff} .fld .hint{display:block;font-size:.72rem;color:var(--ink-3);margin-top:4px} .auth-card .err,.err{font-size:.78rem;color:var(--bad,#C0392B);font-weight:600;margin:0 0 12px} .btn-full{width:100%;justify-content:center;padding:13px} .auth-alt{display:flex;justify-content:center;gap:8px;font-size:.8rem;color:var(--ink-3);margin-top:16px} .auth-alt a{color:var(--gov);font-weight:700;text-decoration:underline} .agree-box{border:1.5px solid var(--line);border-radius:12px;padding:14px 16px;margin-bottom:14px;font-size:.82rem} .agree-box label{display:flex;gap:8px;align-items:flex-start;padding:5px 0;cursor:pointer} .agree-box input{margin-top:3px;flex:none} .agree-box .more{margin-left:auto;font-size:.74rem;color:var(--gov);text-decoration:underline} .steps{display:flex;gap:0;margin:0 0 22px;list-style:none} .steps li{flex:1;text-align:center;font-size:.76rem;font-weight:700;color:var(--ink-3);padding:8px 4px;border-bottom:3px solid var(--line)} .steps li.on{color:var(--gov);border-bottom-color:var(--gov)} .done-view{text-align:center;padding:26px 0 6px} .done-view b{display:block;font-size:1.2rem;color:var(--deep);margin:12px 0 6px} .done-view p{font-size:.86rem;color:var(--ink-2);margin-bottom:20px} @media (max-width:760px){ .gov-band .lang,.gov-band .member{margin-left:0} .auth-card{padding:26px 20px} } /* ── S2 무효 축 A ── (태스크 #20 · 설계서 2026-08-06-component-detail-design.md §2) 시각으로만 결정되는 축을 여기서 실구현한다. 규칙 셋(설계서 §1.1·§5.2 규칙 3). ① 모든 규칙은 `.t-<유형>` 으로 스코프한다 — 코드는 유형끼리 겹칠 수 있다(hero light ≠ 다른 유형 light). ② 위 본문의 기존 규칙은 손대지 않는다. 축을 «고르지 않은» 칸의 그림은 한 픽셀도 바뀌지 않는다. ③ 각 축의 첫 칸(현행 모양)은 값이 현행과 같은 규칙으로 「이관」한다 — 골라도 화면이 그대로다. ④ 최소 높이 사다리의 코드 접두사를 새 코드에 넣지 않는다 — 위쪽에 그 접두사를 부분일치로 잡는 선택자가 있어(태스크 #18) 이름이 겹치면 엉뚱한 칸이 flex 컨테이너가 된다. S4 가 넣을 마크업(`.hero-txt`·`.q-item .ic`·`figcaption`·`.st-item .u`·`.c-cta .sub`)의 자리도 여기서 미리 잡아 둔다 — 그 요소가 없으면 규칙이 아무것도 고르지 않아 무해하다. */ /* ── hero — 스타일 3종 · 비율 3종 · 문구 위치 3종 (설계서 §2.1) ── */ /* light = 현행 `.hero` 그라데이션 이관. 값이 같아 골라도 화면이 바뀌지 않는다 */ .t-hero.cfg-light .hero{background:linear-gradient(115deg,#0E2144 0%,#0B5BD3 78%,#2E7BE8 100%);color:#fff} /* dark = 짙은 몰입형. 오버레이 대신 사진 자체를 눌러 «자막이 오버레이 아래 깔리는» 겹침 사고를 피한다 */ .t-hero.cfg-dark .hero{background:#0B1220;color:#fff} .t-hero.cfg-dark .hero-slide img{filter:brightness(.62)} .t-hero.cfg-dark .hero-cap,.t-hero.cfg-dark .hero-ctrl{background:rgba(6,12,26,.82)} /* glass = 반투명 블러 카드 위 문구 */ .t-hero.cfg-glass .hero{background:linear-gradient(135deg,#1E3A6E 0%,#2E7BE8 100%)} .t-hero.cfg-glass .hero-cap{margin:10px 16px;border-radius:var(--r);border:1px solid rgba(255,255,255,.28); background:rgba(255,255,255,.16);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)} .t-hero.cfg-glass .hero-txt{border-radius:var(--r-lg);border:1px solid rgba(255,255,255,.3); background:rgba(14,33,68,.34);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)} /* 비율 — 사진 크기가 제각각이어도 슬라이드 높이가 흔들리지 않는다. 축을 안 고르면 현행(원본 비율) 그대로다 */ .t-hero.cfg-ratio_wide .hero-slide img{aspect-ratio:21/9;height:auto} .t-hero.cfg-ratio_std .hero-slide img{aspect-ratio:16/9;height:auto} .t-hero.cfg-ratio_tall .hero-slide img{aspect-ratio:4/3;height:auto} /* 문구 블록 자리(S4 신설 마크업) — 축을 고르지 않으면 사진 아래 흐름 그대로다 */ /* 사진 위 문구·버튼은 «상자보다 커질 수» 있다 — 사진 폭 안에서 접는다(20종 스윕 처방) */ .t-hero .hero-txt{padding:14px 16px;color:#fff;min-width:0;overflow-wrap:anywhere} .t-hero .hero-txt .eyebrow{display:block;font-size:.78rem;font-weight:700;letter-spacing:.08em;opacity:.85} .t-hero .hero-txt h2{font-size:1.6rem;font-weight:800;line-height:1.3;margin-top:4px} .t-hero .hero-txt p{font-size:.92rem;opacity:.9;margin-top:6px} .t-hero .hero-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px;min-width:0} .t-hero .hero-cta .btn{max-width:100%;overflow-wrap:anywhere} /* 문구 위치 — 고른 칸에서만 문구가 사진 위로 올라간다 */ .t-hero.cfg-cap_bottom .hero-slide, .t-hero.cfg-cap_center .hero-slide, .t-hero.cfg-cap_left .hero-slide{position:relative} .t-hero.cfg-cap_bottom .hero-txt, .t-hero.cfg-cap_center .hero-txt, .t-hero.cfg-cap_left .hero-txt{position:absolute;left:0;right:0;padding:22px 26px; text-shadow:0 2px 12px rgba(6,12,26,.55)} .t-hero.cfg-cap_bottom .hero-txt{bottom:0} .t-hero.cfg-cap_center .hero-txt{top:50%;transform:translateY(-50%);text-align:center} .t-hero.cfg-cap_center .hero-cta{justify-content:center} .t-hero.cfg-cap_left .hero-txt{top:50%;transform:translateY(-50%);right:auto;width:min(58%,620px)} /* ── quick — 스타일 3종 · 열 수 (설계서 §2.3) ── */ /* 아이콘 자리(S4 신설 `span.ic`) — icon 이 기본 모양이다 */ .t-quick .q-item .ic{display:block;font-size:1.6rem;line-height:1;margin-bottom:8px} /* text = 제목만 큰 글자 */ .t-quick.cfg-text .q-item .ic,.t-quick.cfg-text .q-item small{display:none} .t-quick.cfg-text .q-item{padding:22px 12px} .t-quick.cfg-text .q-item b{font-size:1.05rem} /* image = 이미지 배경 위 제목. 이미지 자리는 사업 카드의 `.ph` 규약을 그대로 따른다(site.css .biz-card .ph) */ .t-quick.cfg-image .q-item{position:relative;overflow:hidden;padding:0;min-height:132px; display:flex;flex-direction:column;justify-content:flex-end} .t-quick.cfg-image .q-item .ic{display:none} .t-quick.cfg-image .q-item .ph{position:absolute;inset:0;display:block;background:var(--sky)} .t-quick.cfg-image .q-item .ph img{width:100%;height:100%;object-fit:cover;display:block} .t-quick.cfg-image .q-item::after{content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(6,12,26,0) 42%,rgba(6,12,26,.74) 100%)} .t-quick.cfg-image .q-item b,.t-quick.cfg-image .q-item small{position:relative;z-index:1;color:#fff;padding:0 12px} .t-quick.cfg-image .q-item b{font-size:.95rem} .t-quick.cfg-image .q-item small{opacity:.85;padding-bottom:12px} /* 열 수 — qc_auto 는 규칙을 두지 않는다. 현행 auto-fit 이고, 그래야 타일 크기 축(.cfg-tile_lg)이 계속 먹는다 */ /* 하한이 «내용 최소 폭» 이면 3·4열을 못 박은 칸이 좁은 폭에서 69px 넘쳤다 — `minmax(0,1fr)` 로 푼다 */ .t-quick.cfg-qc_2 .quick-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .t-quick.cfg-qc_3 .quick-grid{grid-template-columns:repeat(3,minmax(0,1fr))} .t-quick.cfg-qc_4 .quick-grid{grid-template-columns:repeat(4,minmax(0,1fr))} /* ── gallery — 타일 비율 · 캡션 (설계서 §2.8) ── */ /* square 는 현행(`.gal-grid img{aspect-ratio:1/1}`) 그대로라 규칙이 없다 */ /* mosaic — 비율을 풀고 행 높이를 서버가 준 `data-span`(1|2, 격자 항목 `li`)이 정한다 */ .t-gallery.cfg-mosaic .gal-grid{grid-auto-rows:120px;grid-auto-flow:row dense} .t-gallery.cfg-mosaic .gal-grid li{grid-row:span 1} .t-gallery.cfg-mosaic .gal-grid li[data-span="2"]{grid-row:span 2} .t-gallery.cfg-mosaic .gal-grid a,.t-gallery.cfg-mosaic .gal-grid figure{height:100%;display:flex;flex-direction:column} .t-gallery.cfg-mosaic .gal-grid img{aspect-ratio:auto;flex:1;min-height:0;height:100%} /* 캡션 자리(S4 신설 `figure`/`figcaption`) — gc_off 는 조각이 `figcaption` 을 내지 않아 규칙이 없다 */ .t-gallery .gal-grid figure{margin:0;min-width:0;overflow-wrap:anywhere} .t-gallery.cfg-gc_under .gal-grid figcaption{padding:6px 2px 0;font-size:.78rem;line-height:1.4;color:var(--ink-2)} .t-gallery.cfg-gc_hover .gal-grid figure{position:relative;overflow:hidden;border-radius:10px} .t-gallery.cfg-gc_hover .gal-grid figcaption{position:absolute;left:0;right:0;bottom:0; padding:18px 10px 8px;font-size:.78rem;line-height:1.4;color:#fff; background:linear-gradient(180deg,rgba(6,12,26,0),rgba(6,12,26,.82));opacity:0;transition:opacity .15s} .t-gallery.cfg-gc_hover .gal-grid figure:hover figcaption, .t-gallery.cfg-gc_hover .gal-grid figure:focus-within figcaption{opacity:1} /* 열 수 (설계서 §7.4 ①) — gcol_auto 는 규칙을 두지 않는다. 현행 auto-fill 이고, 그래야 타일 크기 축(`.cfg-tile_lg`)이 계속 먹는다. 못 박은 칸은 그 축을 이긴다(클래스 3 대 2). 하한은 quick 선례대로 `minmax(0,1fr)` 다 — 내용 최소 폭을 하한으로 두면 좁은 칸에서 넘친다 */ .t-gallery.cfg-gcol_2 .gal-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .t-gallery.cfg-gcol_3 .gal-grid{grid-template-columns:repeat(3,minmax(0,1fr))} .t-gallery.cfg-gcol_4 .gal-grid{grid-template-columns:repeat(4,minmax(0,1fr))} .t-gallery.cfg-gcol_5 .gal-grid{grid-template-columns:repeat(5,minmax(0,1fr))} .t-gallery.cfg-gcol_6 .gal-grid{grid-template-columns:repeat(6,minmax(0,1fr))} /* ── stats — 배경 3종 · 열 수 (설계서 §2.9) ── */ /* st_deep = 현행 그라데이션 이관. 값이 같아 골라도 화면이 바뀌지 않는다 */ .t-stats.cfg-st_deep .stat-strip{background:linear-gradient(120deg,var(--deep),var(--gov-d));color:#fff} .t-stats.cfg-st_light .stat-strip{background:var(--sky);color:var(--deep);border:1px solid var(--line)} .t-stats.cfg-st_line .stat-strip{background:none;color:var(--deep);border:1px solid var(--line-d)} /* 밝은 바탕에서는 항목명을 흐리게 두면 대비가 모자란다(KWCAG 명도 대비) */ .t-stats.cfg-st_light .st-item .l,.t-stats.cfg-st_line .st-item .l{color:var(--ink-2);opacity:1} /* 단위 자리(S4 신설 `em.u`) — 카운트업 대상 밖이라 수치보다 작게 붙는다 */ .t-stats .st-item .u{font-size:.9rem;margin-left:2px} /* 열 수 — st_auto 는 현행 auto-fit 이라 규칙이 없다 */ .t-stats.cfg-st_2 .stat-strip{grid-template-columns:repeat(2,minmax(0,1fr))} .t-stats.cfg-st_3 .stat-strip{grid-template-columns:repeat(3,minmax(0,1fr))} .t-stats.cfg-st_4 .stat-strip{grid-template-columns:repeat(4,minmax(0,1fr))} .t-stats.cfg-st_6 .stat-strip{grid-template-columns:repeat(6,minmax(0,1fr))} /* ── cta — 스타일 3종 · 배치 · 크기 (설계서 §2.19) ── */ /* navy = 현행 `.c-cta>div` 밴드 이관. 값이 같아 골라도 화면이 바뀌지 않는다 */ .t-cta.cfg-navy .c-cta>div{background:linear-gradient(120deg,var(--gov),var(--deep));color:#fff} /* orange — 흰 글자 대비 4.5:1 을 넘기려고 주황을 어둡게 잡았다(#C2410C 대비 5.1:1) */ .t-cta.cfg-orange .c-cta>div{background:linear-gradient(120deg,#C2410C,#9A3412);color:#fff} /* outline — 배경이 흰색이라 테두리·글자를 --deep 로 고정하고, 흰 버튼은 반대로 뒤집는다 */ .t-cta.cfg-outline .c-cta>div{background:#fff;color:var(--deep);border:2px solid var(--deep)} .t-cta.cfg-outline .c-cta .btn-w{background:var(--deep);color:#fff} /* 부제 자리(S4 신설 `span.sub`) — 밴드가 flex-wrap 이라 제 줄을 차지하게 한다 */ .t-cta .c-cta .sub{flex-basis:100%;font-size:.86rem;opacity:.88;margin-top:2px} /* 배치 — cta_row 가 현행이다 */ .t-cta.cfg-cta_row .c-cta>div{flex-direction:row;justify-content:space-between;text-align:left} .t-cta.cfg-cta_center .c-cta>div{flex-direction:column;justify-content:center;text-align:center} /* 크기 — cta_md 가 현행 패딩이다 */ .t-cta.cfg-cta_md .c-cta>div{padding:20px 24px} .t-cta.cfg-cta_lg .c-cta>div{padding:34px 30px} .t-cta.cfg-cta_lg .c-cta b{font-size:1.35rem} /* ── split — 풀블리드 · 좌우 비율 · 세로 정렬 (설계서 §2.20) ── */ /* 풀블리드는 `.canvas-wrap`(=.wrap, max-width 1220 · 좌우 여백 22px)을 넘어 화면 끝까지 펼친다. 바깥 여백으로 화면 폭을 되찾고, 안쪽 여백으로 본문 폭(1220-44)에 글을 다시 맞춘다. 전체 폭(w==12)이 아니면 서버가 이 클래스를 아예 내지 않는다(RenderedComponent#cfgClass 예외 1건). */ .t-split.cfg-fullbleed{margin-inline:calc(50% - 50vw);padding-inline:max(22px,calc(50vw - 588px))} /* 100vw 는 세로 스크롤바 폭을 포함해 몇 px 넘친다 — 그 몇 px 때문에 가로 스크롤바가 생기는 것만 막는다. `clip` 이라 스크롤 컨테이너를 만들지 않아 sticky 헤더가 그대로다(hidden 과 다른 점). */ body:has(.t-split.cfg-fullbleed){overflow-x:clip} /* 좌우 비율 — sp_5050 이 현행이다 */ .t-split.cfg-sp_5050 .c-split{grid-template-columns:1fr 1fr} .t-split.cfg-sp_6040 .c-split{grid-template-columns:6fr 4fr} .t-split.cfg-sp_4060 .c-split{grid-template-columns:4fr 6fr} /* 세로 정렬 — sp_center 가 현행이다 */ .t-split.cfg-sp_center .c-split{align-items:center} .t-split.cfg-sp_top .c-split{align-items:start} /* ── timeline — 형식 2종 · 강조색 3종 (설계서 §2.17) ── */ /* 강조색은 지역 변수 하나로 모은다. 기본값이 현행 색(--gov)이라 축을 안 고르면 그림이 같다 */ .t-timeline{--tl:var(--gov)} .t-timeline.cfg-tl_gov{--tl:var(--gov)} .t-timeline.cfg-tl_deep{--tl:var(--deep)} .t-timeline.cfg-tl_gold{--tl:var(--gold)} .t-timeline .tl-track li{border-top-color:var(--tl)} .t-timeline.cfg-vertical .tl-track li{border-left-color:var(--tl)} /* history = 연도 강조. 현행 그대로라 규칙이 없다 */ /* process = 자동 번호 + 화살표 연결. 번호는 CSS counter 라 조각이 숫자를 내지 않아도 된다 */ .t-timeline.cfg-process .tl-track{counter-reset:step} .t-timeline.cfg-process .tl-track li{counter-increment:step;position:relative;border-top:0;padding:0 14px 0 0} .t-timeline.cfg-process .tl-track li::before{content:counter(step);display:grid;place-items:center; width:28px;height:28px;margin-bottom:8px;border-radius:50%; background:var(--tl);color:#fff;font-size:.86rem;font-weight:800} /* 화살표는 칸의 오른쪽 여백(14px) «안» 에 선다 — 밖으로 내밀면 그 2px 가 격자를 넘친다(실측) */ .t-timeline.cfg-process .tl-track li::after{content:"→";position:absolute;right:0;top:2px; color:var(--tl);font-weight:800} .t-timeline.cfg-process .tl-track li:last-child::after{content:none} .t-timeline.cfg-process.cfg-vertical .tl-track li{border-left:0;padding:6px 0 6px 0} .t-timeline.cfg-process.cfg-vertical .tl-track li::after{content:"↓";right:auto;left:8px;top:auto;bottom:-6px} /* ── tabs — 탭 모양 3종 (설계서 §2.13) ── */ /* tb_line = 현행 밑줄 탭 그대로라 규칙이 없다 */ .t-tabs.cfg-tb_pill .tabs{border-bottom:0;gap:6px;flex-wrap:wrap} .t-tabs.cfg-tb_pill .tabs button{margin-bottom:0;border-bottom:0;border-radius:99px;padding:8px 18px; background:var(--sky);color:var(--ink-2)} .t-tabs.cfg-tb_pill .tabs button.on{background:var(--deep);color:#fff} .t-tabs.cfg-tb_box .tabs{gap:3px} .t-tabs.cfg-tb_box .tabs button{margin-bottom:-2px;border:1px solid var(--line);border-bottom:0; border-radius:10px 10px 0 0;background:#FBFCFE;color:var(--ink-2)} .t-tabs.cfg-tb_box .tabs button.on{background:#fff;color:var(--gov);box-shadow:inset 0 3px 0 var(--gov)} /* 모바일 — 카드 격자의 기존 패턴(site.css:224)을 그대로 따른다. 좁은 화면에서는 열 수를 줄이고 좌우 2단은 1단으로 눕힌다. 기존 블록이 손대는 `.c-split` 은 여기서 다시 눌러야 한다 — 위에서 새로 준 `.t-split.cfg-sp_*` 가 기존 규칙보다 명시도가 높기 때문이다 */ @media (max-width:760px){ .t-quick.cfg-qc_3 .quick-grid,.t-quick.cfg-qc_4 .quick-grid{grid-template-columns:repeat(2,minmax(0,1fr))} /* 갤러리도 같은 규칙이다 — 사진 타일은 2열까지 내린다(120px 하한이 없어진 자리를 여기서 막는다) */ .t-gallery.cfg-gcol_3 .gal-grid,.t-gallery.cfg-gcol_4 .gal-grid, .t-gallery.cfg-gcol_5 .gal-grid,.t-gallery.cfg-gcol_6 .gal-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .t-stats.cfg-st_3 .stat-strip,.t-stats.cfg-st_4 .stat-strip, .t-stats.cfg-st_6 .stat-strip{grid-template-columns:repeat(2,minmax(0,1fr))} .t-split.cfg-sp_5050 .c-split,.t-split.cfg-sp_6040 .c-split, .t-split.cfg-sp_4060 .c-split{grid-template-columns:minmax(0,1fr)} .t-hero.cfg-cap_left .hero-txt{width:auto;right:0} .t-timeline.cfg-process .tl-track li::after{content:none} } /* ── S3 동작 축 B ── */ /* 이 구획 밖은 건드리지 않는다(설계서 §5.2 규칙 3). 동작 축(JS)이 필요로 하는 CSS 만 모은다. cfg 클래스는 바깥 `section.comp`(`.t-*`)에 붙고, 팝업만 `.pop-ov` 자신이 받는다(§1.2 결함 B). 기본값 코드는 클래스로 나가지 않으므로(RenderedComponent#cfgClass) 기본은 «클래스 없는» 규칙이 맡는다. */ /* banner — fx 롤링 창은 JS 가 `.rolling` 을 붙일 때만 접는다(still 이면 전체가 격자로 남는다) */ html.js .c-banner.rolling .bnr-zone>li:not(.on){display:none} /* per — 한 화면 개수. bp_auto 는 현행 auto-fit 그대로다 */ .t-banner.cfg-bp_1 .bnr-zone{grid-template-columns:minmax(0,1fr)} .t-banner.cfg-bp_2 .bnr-zone{grid-template-columns:repeat(2,minmax(0,1fr))} .t-banner.cfg-bp_3 .bnr-zone{grid-template-columns:repeat(3,minmax(0,1fr))} /* shape — 이미지 우선이면 배너 상자가 사진 액자가 된다(사진 출력은 S4 조각 몫이다) */ .t-banner.cfg-bn_img .bnr{padding:0;background:none;overflow:hidden} .t-banner.cfg-bn_img .bnr img{width:100%;height:100%;object-fit:cover;border-radius:var(--r-lg)} /* ticker — tone 3계열(기본 tk_sky 는 현행 `.c-ticker` 배경) · label tk_off */ .t-ticker.cfg-tk_deep .c-ticker{background:var(--deep);color:#fff} .t-ticker.cfg-tk_deep .tk-label,.t-ticker.cfg-tk_deep .tk-track a{color:#fff} .t-ticker.cfg-tk_line .c-ticker{background:none;border:1px solid var(--line)} .t-ticker.cfg-tk_off .tk-label{display:none} /* tabs — fx 전환 효과. JS 가 첫 조작에서 `.tab-fx` 를 붙여 첫 그림의 깜빡임을 막는다. 기본은 fade 이고 cfg-slide 일 때만 갈아탄다. reduced-motion 은 site.css 전역 규칙이 지운다 */ html.js .c-tabs.tab-fx .tab-panel.on{animation:tabFade .22s ease} html.js .t-tabs.cfg-slide .c-tabs.tab-fx .tab-panel.on{animation:tabSlide .24s ease} @keyframes tabFade{from{opacity:0}to{opacity:1}} @keyframes tabSlide{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}} /* popup — pos 5계열 (기본 pp_center 는 현행 `.pop-ov` 가운데 정렬) */ .pop-ov.cfg-pp_center{align-items:center;justify-content:center} .pop-ov.cfg-pp_tl{align-items:flex-start;justify-content:flex-start} .pop-ov.cfg-pp_tr{align-items:flex-start;justify-content:flex-end} .pop-ov.cfg-pp_bl{align-items:flex-end;justify-content:flex-start} .pop-ov.cfg-pp_br{align-items:flex-end;justify-content:flex-end} /* size — 기본 pp_md 는 현행 `.popup{width:min(420px,100%)}` */ .pop-ov.cfg-pp_sm .popup{width:min(320px,100%)} .pop-ov.cfg-pp_md .popup{width:min(420px,100%)} .pop-ov.cfg-pp_lg .popup{width:min(560px,100%)} .pop-ov.cfg-pp_full .popup{width:min(90vw,100%)} /* stack — 팝업 3건이 정확히 포개져 하나로 보이던 문제. JS 가 «뜬 순서»를 --pop-i 로 준다(설계서 §2.6) */ .pop-ov.cfg-pp_cascade .popup{transform:translate(calc(var(--pop-i,0) * 26px),calc(var(--pop-i,0) * 26px))} /* gallery — 라이트박스는 JS 가 만든다. 닫기 버튼이 있어야 포커스가 갇힐 자리가 생긴다(설계서 §2.8) */ .pop-ov.lb{flex-direction:column;gap:12px} .lb-close{position:absolute;top:14px;right:16px;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.92);color:var(--deep);font-size:1.05rem;box-shadow:var(--sh-md)} .lb-cap{color:#fff;font-size:.86rem;text-align:center;max-width:90vw} /* ── S4 내용 확장 ── (태스크 #20 · 설계서 2026-08-06-component-detail-design.md §2) S4 가 조각에 «새로 넣은 요소»의 모양과, S2·S3 이 손대지 않은 유형(board·content·video·search·faq)의 축 규칙만 여기 모은다. 규칙 셋은 S2 구획과 같다. ① 모든 규칙은 `.t-<유형>` 으로 스코프한다. ② 이 구획 밖은 손대지 않는다. ③ 각 축의 «기본» 칸은 규칙을 두지 않는다 — 축을 고르지 않은 문서의 그림이 한 픽셀도 바뀌지 않는다. ④ 최소 높이 사다리의 접두사(`cfg-minh_`)를 새 코드 이름에 넣지 않는다(태스크 #18). */ /* ── board — 목록 형태 3종 · 요약 · 새글 뱃지 (설계서 §2.2) ── */ /* bd_list 는 현행 한 줄 목록 그대로라 규칙이 없다 */ /* 썸네일 자리는 지금 «기본 도형» 이다 — 게시물 첨부에는 인라인으로 걸 공개 URL 이 없다(조각 주석 참조) */ .t-board.cfg-bd_thumb .news-list li a,.t-board.cfg-bd_thumb .news-list li>span{align-items:flex-start} .t-board.cfg-bd_thumb .news-list .ph{flex:none;display:block;width:88px;aspect-ratio:16/10; border-radius:8px;background:var(--sky)} .t-board.cfg-bd_card .news-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px} .t-board.cfg-bd_card .news-list li a,.t-board.cfg-bd_card .news-list li>span{ flex-direction:column;align-items:stretch;gap:6px;height:100%;padding:10px; border:1px solid var(--line);border-bottom:1px solid var(--line);border-radius:var(--r)} .t-board.cfg-bd_card .news-list .ph{display:block;width:100%;aspect-ratio:16/10; border-radius:8px;background:var(--sky)} .t-board.cfg-bd_card .news-list .tt{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere} /* 요약 — 한 줄이 넘치면 접는다. 줄바꿈은 요약이 켜진 칸에서만 허용한다(sum_off 는 현행 한 줄 그대로) */ .t-board.cfg-sum_1line .news-list li a,.t-board.cfg-sum_1line .news-list li>span, .t-board.cfg-sum_2line .news-list li a,.t-board.cfg-sum_2line .news-list li>span{flex-wrap:wrap} .t-board .news-list .sm{flex-basis:100%;order:3;font-size:.82rem;line-height:1.5;color:var(--ink-3); overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical} .t-board.cfg-sum_1line .news-list .sm{-webkit-line-clamp:1} .t-board.cfg-sum_2line .news-list .sm{-webkit-line-clamp:2} .t-board .news-list .badge-n{flex:none} /* ── content — 대표 이미지 (설계서 §2.5) ── */ /* 문단 수·요약 길이는 서버가 자르므로 CSS 가 할 일이 없다. ct_img_off 는 조각이 이미지를 내지 않는다 */ /* 요약 문단은 끊을 자리 없는 한 덩어리일 수 있다 — 칸 안에서 접는다(20종 스윕) */ .t-content .c-content{min-width:0;overflow-wrap:anywhere} .t-content .c-content .ph{display:block;overflow:hidden;border-radius:var(--r);background:var(--sky)} .t-content .c-content .ph img{width:100%;height:100%;object-fit:cover;display:block} .t-content.cfg-ct_img_top .c-content .ph{width:100%;aspect-ratio:16/9;margin:10px 0 12px} /* 옆에 = 이미지와 요약이 좌우로 선다. `.sec-h` 는 위에 그대로 남는다 */ .t-content.cfg-ct_img_side .c-content>div{display:grid;grid-template-columns:180px minmax(0,1fr);gap:14px;align-items:start} .t-content.cfg-ct_img_side .c-content .sec-h{grid-column:1/-1} .t-content.cfg-ct_img_side .c-content .ph{aspect-ratio:4/3} /* ── video — 화면 비율 4종 · 관련 영상 · 자막 안내 (설계서 §2.7) ── */ .t-video .c-video video{width:100%;display:block;border-radius:var(--r-lg);background:#0B1220} .t-video.cfg-v_16x9 .c-video video{aspect-ratio:16/9} .t-video.cfg-v_4x3 .c-video video{aspect-ratio:4/3} .t-video.cfg-v_1x1 .c-video video{aspect-ratio:1/1} .t-video.cfg-v_9x16 .c-video video{aspect-ratio:9/16;width:auto;max-width:100%;margin:0 auto} /* 자막이 없는 영상은 그 사실을 글로 밝힌다(KWCAG) */ .t-video .v-nocc{margin-top:6px;font-size:.78rem;color:var(--ink-3)} .t-video .v-more{margin-top:10px;display:grid;gap:6px} .t-video .v-more a{display:block;padding:8px 10px;border:1px solid var(--line);border-radius:var(--r); font-size:.86rem;color:var(--ink-2);min-width:0;overflow-wrap:anywhere} .t-video .v-more a:hover{border-color:var(--gov);color:var(--gov)} /* 옆에 = 영상과 목록이 좌우로 선다 */ .t-video.cfg-v_list_side .c-video{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:14px;align-items:start} .t-video.cfg-v_list_side .v-more{margin-top:0} .t-video.cfg-v_list_side .v-nocc{grid-column:1/-1} /* ── search — 검색바 모양 3종 · 안내 문구 · 인기검색어 (설계서 §2.10) ── */ /* `.c-search` 는 CSS 가 아예 없어 무스타일이었다 — 기본 모양(sc_plain 계열)을 여기서 준다 */ .c-search form{display:flex;gap:8px;align-items:center} .c-search input{flex:1;min-width:0;padding:11px 16px;border:1.5px solid var(--line-d); border-radius:99px;font-size:.94rem;background:#fff} .c-search input:focus{outline:2px solid var(--gov);outline-offset:1px} .c-search button{flex:none;padding:11px 22px;border-radius:99px;background:var(--gov);color:#fff; font-weight:700;font-size:.9rem} .c-search .sc-guide{margin-top:6px;font-size:.8rem;color:var(--ink-3);min-width:0;overflow-wrap:anywhere} .t-search.cfg-sc_band .c-search{background:var(--deep);border-radius:var(--r-lg);padding:20px 22px} .t-search.cfg-sc_band .c-search .sc-guide{color:#C9D6EC} .t-search.cfg-sc_hero .c-search{background:var(--sky);border-radius:var(--r-lg);padding:34px 26px;text-align:center} .t-search.cfg-sc_hero .c-search input{padding:15px 22px;font-size:1.05rem} .t-search.cfg-sc_hero .c-search button{padding:15px 28px;font-size:1rem} /* 인기검색어 — 순위 숫자는 시각 정보다. 링크 이름에는 「N위 …」 가 aria-label 로 들어간다 */ .hot-kw{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px} .hot-kw a{display:inline-flex;gap:6px;align-items:center;padding:5px 12px;border-radius:99px; background:var(--sky);font-size:.82rem;color:var(--ink-2);max-width:100%;min-width:0;overflow-wrap:anywhere} .hot-kw a:hover{background:var(--gov);color:#fff} .hot-kw b{color:var(--gov);font-size:.78rem} .hot-kw a:hover b{color:#fff} /* ── faq — 답변 표시 · 모양 2종 (설계서 §2.18) ── */ /* fq_line 은 현행 구분선 그대로라 규칙이 없다 */ .t-faq .faq-a .faq-body{margin-bottom:8px;line-height:1.7} .t-faq .faq-a .faq-body img{max-width:100%;height:auto} .t-faq .faq-a>p{margin-bottom:8px} .t-faq.cfg-fq_box details{border:1px solid var(--line);border-radius:var(--r);margin-bottom:8px; padding:0 12px;background:#fff} .t-faq.cfg-fq_box details summary{border-bottom:0} /* ── tabs — 건수 뱃지 (설계서 §2.13) ── */ .t-tabs .tabs button .cnt{margin-left:5px;font-size:.72rem;font-weight:800;color:var(--ink-3)} .t-tabs .tabs button.on .cnt{color:inherit;opacity:.85} /* ── ticker · banner — 라벨 문구와 이미지 우선 배너 (설계서 §2.15 · §2.4) ── */ /* 이미지가 «실제로» 걸린 배너만 문구를 화면에서 뺀다 — 스크린리더에는 남는다(이름 없는 링크 금지) */ .t-banner.cfg-bn_img .bnr{position:relative} .t-banner.cfg-bn_img .bnr img~b,.t-banner.cfg-bn_img .bnr img~span{ position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} /* ── cards · timeline — 설명글 `span.ds` (설계서 §2.14 · §2.17) ── */ .biz-card .ds{display:block;margin-top:6px;font-size:.82rem;line-height:1.5;color:var(--ink-3)} .t-cards.cfg-cd_left .card-grid .biz-card{text-align:left;align-items:flex-start} .tl-track .ds{display:block;margin-top:4px;font-size:.8rem;line-height:1.5;color:var(--ink-3)} /* ── map — 약도 + 정보 2단 · 교통 안내 목록 (설계서 §2.16 · 골격만) ── */ /* 약도 상자가 선 칸에서만 2단이 된다 — 안 고른 칸은 지금까지의 한 단 그대로다 */ .c-map:has(.mp-view){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:start} .c-map .mp-view{border-radius:var(--r);overflow:hidden;background:#fff;border:1px solid var(--line); display:grid;place-items:center;min-height:200px} .c-map .mp-view img{width:100%;height:100%;object-fit:cover;display:block} .t-map.cfg-map_h240 .c-map .mp-view{height:240px} .t-map.cfg-map_h320 .c-map .mp-view{height:320px} .t-map.cfg-map_h440 .c-map .mp-view{height:440px} .c-map .addr2,.c-map .tel,.c-map .fax{margin-top:4px;font-size:.9rem;color:var(--ink-2)} /* 카카오맵으로 나가는 링크 — 일정 「＋ 전체 일정」과 같은 외부·이동 링크 톤이다 */ .c-map .mp-go{margin-top:8px;font-size:.9rem} .c-map .mp-go a{color:var(--gov);font-weight:700} .c-map ul.transit{margin-top:8px;display:grid;gap:5px;font-size:.86rem;color:var(--ink-2)} .c-map ul.transit li{display:flex;gap:8px;align-items:baseline;min-width:0} /* 노선 이름은 «줄 수 있는» 칸이다 — `flex:none` 이면 긴 이름 하나가 안내 줄 전체를 벌린다 */ .c-map ul.transit b{flex:0 1 auto;min-width:0;overflow-wrap:anywhere;color:var(--deep)} /* ── sns — 유튜브 최신 영상 격자 (설계서 §2.12 · 골격만) ── */ .yt-feed{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-bottom:12px} .yt-feed a{display:block;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff} .yt-feed img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;background:var(--sky)} .yt-feed b{display:block;padding:7px 9px 0;font-size:.82rem;line-height:1.4;min-width:0;overflow-wrap:anywhere} .yt-feed small{display:block;padding:2px 9px 8px;font-size:.72rem;color:var(--ink-3)} .t-sns.cfg-sns_row .yt-feed{grid-template-columns:none;grid-auto-flow:column; grid-auto-columns:minmax(150px,1fr);overflow-x:auto} /* cal 골격 규칙은 파일 끝의 「S5 일정 모듈」 절이 이어받았다 */ @media (max-width:760px){ .t-content.cfg-ct_img_side .c-content>div, .t-video.cfg-v_list_side .c-video{grid-template-columns:1fr} .c-map:has(.mp-view){grid-template-columns:1fr} .t-board.cfg-bd_card .news-list{grid-template-columns:1fr} } /* ── S6 지도 이중구조 ── (태스크 #20 · 설계서 §2.16) `.mp-live` 안의 내용이 곧 폴백이다 — 지도가 서기 전과 못 섰을 때 약도 이미지가 그 자리를 지킨다. 지도가 서면 map.js 가 `.on` 을 붙이고 `.mp-canvas` 하나만 남긴다. */ .c-map .mp-live{width:100%;height:100%;min-height:200px;display:grid;place-items:center;position:relative} .c-map .mp-live.on{display:block} .c-map .mp-canvas{width:100%;height:100%;min-height:200px} /* 교통 수단 아이콘은 장식이다 — 글줄의 기준선에 맞춰 노선·설명 앞에 선다 */ .c-map ul.transit .kind{flex:none} /* ══ S5 일정 모듈 (설계서 §3.8) ══════════════════════════════════════════ 카테고리 색은 서버가 만든