@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700&family=Noto+Serif+KR:wght@500;600;700&display=swap');
:root{
--bg:#ffffff;
--bg2:#fbfaf6;
--line:#dbd5ca;
--text:#1f1c19;
--muted:#6f6a64;
--navy:#0b3451;
--navy-dark:#07263c;
--card:#ffffff;
--shadow:0 14px 32px rgba(30,25,18,.08);
--radius:20px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
/* 낱말 가운데서 끊지 않는다 (2026-08-30, 온 페이지에 건다)
한글은 낱자 사이 어디서나 끊어도 문법상 맞다고 보아, 브라우저가 기본으로
"캠페/인", "있습/니다" 처럼 낱말 한가운데를 자른다. 읽는 사람에게는
오타처럼 보인다. 화면이 좁거나 글자를 키워 둔 기기(앱 웹뷰는 폰 설정을
따라 1.3배까지 간다)에서 특히 잦다.
그래서 띄어쓰기에서만 끊게 한다. 다만 띄어쓰기 없는 긴 덩어리(주소·
영문 낱말)는 넘치느니 끊는 편이 나으므로 break-word 를 함께 둔다.
여기저기 낱낱이 적어 두었던 word-break 는 이 줄이 대신한다. */
body{font-family:'Noto Sans KR',sans-serif;background:var(--bg);color:var(--text);line-height:1.6;
word-break:keep-all;overflow-wrap:break-word}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
#container{min-height:40vh}
.sound_only{position:absolute!important;left:-9999px!important;top:auto!important;width:1px!important;height:1px!important;overflow:hidden!important}
.hed-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border-bottom:1px solid #f0f0f0}
.hed-header__inner{max-width:1600px;margin:0 auto;padding:18px 40px;display:flex;align-items:center;justify-content:space-between;gap:24px}
/* 두 줄 로고 — 워드마크가 주, 기관명이 종.
두 줄이라 세 줄일 때보다 헤더가 가볍고 메뉴 줄과 높이가 맞는다. */
.hed-logo{display:flex;flex-direction:column;gap:2px;min-width:180px}
.hed-logo strong{font-family:'Noto Serif KR',serif;font-size:31px;letter-spacing:.02em;line-height:1.15}
.hed-logo span{font-size:15px;color:var(--muted);line-height:1.3}
.hed-nav{flex:1;display:flex;justify-content:center}
.hed-nav__list{display:flex;align-items:center;gap:42px;list-style:none;margin:0;padding:0}
.hed-nav__item{position:relative}
.hed-nav__link{display:block;padding:10px 0;font-size:15px;font-weight:500;color:#2e2925}
.hed-nav__item.is-active .hed-nav__link,.hed-nav__link:hover{color:var(--navy)}
.hed-submenu{position:absolute;left:50%;transform:translateX(-50%);top:100%;padding-top:12px;opacity:0;visibility:hidden;transition:.2s ease}
.hed-nav__item:hover .hed-submenu,.hed-nav__item.is-sub-open .hed-submenu{opacity:1;visibility:visible}
.hed-submenu__inner{min-width:180px;padding:16px;border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:var(--shadow);display:grid;gap:10px}
.hed-submenu__inner a{font-size:14px;color:var(--muted)}
.hed-submenu__inner a:hover{color:var(--navy)}
.hed-tools{display:flex;align-items:center;gap:16px}
.hed-tool-icon,.hed-lang{display:flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;border:1px solid transparent}
.hed-tool-icon:hover,.hed-lang:hover{border-color:var(--line);background:#fff}
.hed-tool-icon svg{width:28px;height:28px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round}
.hed-lang{font-size:15.5px;font-weight:700}
/* 장바구니 배지 — 담긴 개수를 아이콘 위에 얹는다.
arc_cart.js 는 개수가 0 이면 인라인 display:none 을, 1 이상이면 빈 값을 넣는다.
빈 값이 되면 아래 display 가 적용되므로 여기 기본값을 none 으로 두면 안 된다. */
.hed-tool-icon--cart{position:relative}
/* 사람(로그인) 아이콘 — 로그인 중이면 오른쪽 아래에 초록 점 */
.hed-tool-icon--user{position:relative}
.hed-user-dot{position:absolute;right:9px;bottom:9px;width:9px;height:9px;border-radius:50%;
background:#2f9e63;border:2px solid #fff}
/* 로그인 중 작은 메뉴 — 상단 메뉴의 하위메뉴(hed-submenu)와 같은 방식.
마우스를 올리면 열리고, 키보드/터치는 포커스로 연다(focus-within). */
.hed-user-wrap{position:relative}
.hed-user-menu{position:absolute;right:0;top:100%;padding-top:10px;
opacity:0;visibility:hidden;transition:.18s ease;z-index:60}
.hed-user-wrap:hover .hed-user-menu,.hed-user-wrap:focus-within .hed-user-menu,
.hed-user-wrap.is-open .hed-user-menu{opacity:1;visibility:visible}
/* 아이콘이 링크에서 단추로 바뀌었다(2026-08-28) — 단추 기본 모양을 지운다 */
.hed-user-wrap > button.hed-tool-icon{border:0;background:none;padding:0;cursor:pointer;font:inherit;color:inherit}
.hed-user-menu__inner{min-width:150px;padding:14px 16px;border:1px solid var(--line);
border-radius:14px;background:#fff;box-shadow:var(--shadow);display:grid;gap:9px}
.hed-user-name{font-size:13.5px;padding-bottom:9px;border-bottom:1px solid #f0ece5;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px}
.hed-user-menu__inner a{font-size:14px;color:var(--muted)}
/* 관리자 화면 — 다른 줄과 구분되게 조금 더 진하게 */
.hed-user-adm{display:block;color:var(--navy)!important;font-weight:600}
/* MY 아카이브 — 게시판 이름을 아래에 작게 곁들인다 */
.hed-user-my{display:block;color:var(--navy)!important;font-weight:500}
.hed-user-my em{display:block;font-style:normal;font-size:12px;color:var(--muted);margin-top:2px}
.hed-user-menu__inner a:hover{color:var(--navy)}
.hed-cart-badge{position:absolute;top:-1px;right:-1px;display:flex;align-items:center;justify-content:center;
min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--navy);color:#fff;
font-size:11px;line-height:1;font-weight:700;font-variant-numeric:tabular-nums;
border:2px solid var(--bg)}
/* 손가락으로 누르는 버튼이라 눌리는 면적을 44px 로 잡는다.
막대 자체는 26x16 으로 보이고, 나머지는 여백이 받아준다. */
.hed-menu-button{display:none;border:0;background:transparent;padding:0;width:44px;height:44px;position:relative;cursor:pointer}
.hed-menu-button span{position:absolute;left:9px;right:9px;height:2px;background:#1c1c1c;border-radius:2px}
.hed-menu-button span:nth-child(1){top:14px}.hed-menu-button span:nth-child(2){top:21px}.hed-menu-button span:nth-child(3){top:28px}
.hed-menu{border-top:1px solid var(--line);background:#fff}
/* display 를 건드리는 규칙이 하나라도 생기면 hidden 속성이 무력해진다.
아래 모바일 규칙에서 position 을 주므로 여기서 못을 박아 둔다. */
.hed-menu[hidden]{display:none!important}
.hed-menu__inner{max-width:1600px;margin:0 auto;padding:24px 40px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.hed-menu__group{padding:16px;border:1px solid #eee7da;border-radius:18px}
.hed-menu__title{font-size:16px;font-weight:700;display:block;margin-bottom:12px}
.hed-menu__sub{display:grid;gap:8px}.hed-menu__sub a{font-size:14px;color:var(--muted)}
/* 빠른 검색 레이어 (2026-08-23) — 헤더 돋보기 아이콘이 연다.
유형·공공누리 필터가 있는 상세 자료검색과는 다른, 검색어만 받는 입구.
같은 hidden-속성 토글 방식을 쓴다(.hed-menu 와 같은 패턴). */
.hed-qs[hidden]{display:none!important}
html.hed-qs-open,
html.hed-qs-open body{overflow:hidden}
/* 빠른 검색 — 화면을 덮는 대신 떠 있는 레이어 한 장.
예전에는 흰 막으로 화면 전체를 지우고 큰 제목을 세웠는데, 뒤 화면이
아예 사라져 '어디에 있었는지' 감각을 잃었다. 지금은 뒤를 어둡게만
깔고 그 위에 카드를 띄운다 — 보던 목록이 비치므로 닫으면 제자리다. */
.hed-qs{position:fixed;inset:0;z-index:80;display:flex;justify-content:center}
.hed-qs__backdrop{position:absolute;inset:0;background:rgba(24,22,20,.44);backdrop-filter:blur(2px)}
.hed-qs__panel{position:relative;z-index:1;width:calc(100% - 36px);max-width:560px;margin-top:min(13vh,132px);height:max-content;padding:26px 26px 24px;border-radius:16px;background:#fff;box-shadow:0 24px 60px rgba(20,18,16,.28),0 2px 6px rgba(20,18,16,.12);animation:hedQsIn .18s ease-out}
@keyframes hedQsIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
.hed-qs__close{position:absolute;top:14px;right:14px;width:32px;height:32px;border:0;border-radius:50%;background:transparent;color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center}
.hed-qs__close:hover{background:var(--bg2);color:var(--text)}
.hed-qs__close svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.hed-qs__inner{text-align:left}
.hed-qs__title{margin:0 0 16px;font-family:'Noto Serif KR',serif;font-weight:600;color:var(--text);font-size:18px;line-height:1.45;padding-right:34px}
.hed-qs__title br{display:none}
.hed-qs__form{display:flex;height:52px;border:1px solid var(--line);border-radius:10px;background:#fff;overflow:hidden}
.hed-qs__form:focus-within{border-color:var(--navy);box-shadow:0 0 0 3px rgba(11,52,81,.10)}
.hed-qs__form input{flex:1;min-width:0;padding:0 16px;border:0;outline:0;background:transparent;font-size:15.5px;color:var(--text)}
.hed-qs__form input::placeholder{color:#a9a29a}
/* 제출 버튼 = 'AI 검색'. 돋보기만 있으면 그냥 글자 맞추기 검색처럼 보이는데,
실제로는 AI 가 먼저 읽고 순위를 매긴다 — 그 사실이 보이게 한다. */
/* 아이콘이 짙은 회색 링 + 보라 반짝임(시안 색 그대로)이라, 버튼 바탕을
남색으로 채우면 아이콘이 묻힌다. 바탕을 옅게 두고 글자만 남색으로 —
아이콘 색을 건드리지 않고 살리는 쪽을 택했다. */
.hed-qs__go{flex:0 0 auto;display:flex;align-items:center;gap:8px;margin:0;padding:0 16px 0 10px;border:0;border-radius:0;background:transparent;color:var(--navy);font-size:14px;font-weight:800;letter-spacing:-.01em;white-space:nowrap;cursor:pointer;transition:opacity .15s,transform .12s}
.hed-qs__go span{white-space:nowrap}
.hed-qs__go:hover{opacity:.72;transform:translateY(-1px)}
.hed-qs__go-icon{width:34px;height:34px;flex:none}
.hed-qs__hint{margin:9px 2px 0;font-size:12px;color:var(--muted);line-height:1.6}
.hed-qs__popular{margin-top:18px;display:block}
.hed-qs__popular-label{display:block;margin-bottom:9px;font-size:12px;font-weight:700;color:var(--muted);letter-spacing:.02em}
.hed-qs__popular-list{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:7px}
.hed-qs__popular-list a{padding:6px 12px;border:1px solid var(--line);border-radius:999px;font-size:13px;color:var(--text);background:#fff;transition:.15s ease}
.hed-qs__popular-list a:hover{border-color:var(--navy);background:var(--bg2);color:var(--navy)}
@media (prefers-reduced-motion:reduce){.hed-qs__panel{animation:none}}
@media(max-width:640px){
.hed-qs__panel{margin-top:96px;padding:0 18px}
.hed-qs__close{top:-64px;right:18px}
.hed-qs__popular{margin-top:16px}
}
/* --hud-edge: 본문 칸의 좌우 여백. 풀블리드(사진을 화면 끝까지)가 이 값을
되돌려 밖으로 나가야 해서 변수로 둔다 — 좁은 화면에서 여백을 줄이면
아래 400px 미디어에서 이 변수도 같이 바꿔야 한다. */
.editorial-home{--hud-edge:40px;max-width:1600px;margin:0 auto;padding:6px var(--hud-edge) 80px}
/* ============================================================================
히어로 — 포스터형 (GPT 시안 '02 라벨 오버레이형' 이식)
----------------------------------------------------------------------------
구조: 왼쪽 글·검색 / 오른쪽 포스터 프레임(사진 + 그라데이션 + 세로 라벨 +
사진 위 문구 + 하단 캡션). 시안 CSS 를 기반으로 세 가지만 사이트에 맞췄다.
1) 색 — 버튼·라벨의 #123b32 를 var(--navy) 로. 관리자 색상 팔레트가
--navy 를 덮으므로(현재 진녹 #17332a) 팔레트를 바꾸면 함께 바뀐다.
배경도 시안의 #f6f2eb 대신 페이지 배경(--bg:#ffffff)을 그대로 쓴다 —
두 값이 두세 계조 차이라 따로 칠하면 위아래로 옅은 띠가 생긴다.
2) 세로 여백 — 시안의 40~78px 를 16~32px 로. 이 홈은 휠 한 번에 구역
하나씩 넘어가는 화면이라(아래 scroll-snap) 히어로+통계가 1366x768
한 화면에 들어가야 한다. 재 보니 시안 값으로는 20px 쯤 넘쳤다.
3) 크기는 전부 clamp/minmax — 폭별 계단을 두면 특정 노트북 해상도만
유독 무너지는 일이 생긴다(이전 히어로에서 실제로 겪었다).
========================================================================== */
.arc-hero{padding:clamp(16px,1.8vw,32px) 0 clamp(18px,1.9vw,34px)}
.arc-hero__inner{
display:grid;
grid-template-columns:minmax(460px,.78fr) minmax(620px,1.22fr);
gap:clamp(48px,5vw,96px);
align-items:center;
}
.arc-hero__inner > *{min-width:0}
/* .ed-kicker 는 아래 구역들의 왼쪽 소개칸도 같이 쓴다 — 이름을 바꾸지 않는다 */
.ed-kicker{margin:0 0 clamp(14px,1.4vw,22px);color:var(--muted);font-size:13px;letter-spacing:.22em;text-transform:uppercase}
.arc-hero__title{
margin:0;font-family:'Noto Serif KR',serif;color:#1c1b19;
font-size:clamp(40px,4.2vw,78px);line-height:1.14;font-weight:600;
letter-spacing:-.045em;word-break:keep-all;
}
.arc-hero__desc{
margin:clamp(20px,1.9vw,34px) 0 clamp(22px,2vw,38px);color:#363532;
font-size:clamp(16px,1.35vw,26px);line-height:1.75;word-break:keep-all;
}
/* 검색 — 폼은 자료검색의 것 그대로(arc_do/arc_q), 겉모양만 시안 */
.arc-hero-search{width:min(100%,680px);height:clamp(56px,4.2vw,74px);display:flex;border:1px solid #cfc8bd;background:#fff}
.arc-hero-search input{min-width:0;flex:1;padding:0 clamp(16px,1.6vw,26px);border:0;outline:0;background:transparent;font-size:clamp(14px,1.1vw,18px);color:#333}
.arc-hero-search button{flex:0 0 clamp(60px,5vw,82px);border:0;background:var(--navy);cursor:pointer;display:flex;align-items:center;justify-content:center}
.arc-hero-search svg{width:26px;height:26px;fill:none;stroke:#fff;stroke-width:1.9;stroke-linecap:round}
/* 포스터 프레임 — 아이보리 대지 위에 사진을 얹은 인쇄물 느낌.
시안 지시대로 둥근 모서리는 쓰지 않는다. */
.arc-hero__visual-wrap{min-width:0}
.arc-hero__frame{
position:relative;
padding:clamp(12px,1.2vw,22px);
background:#fbf8f2;
box-shadow:0 8px 26px rgba(37,31,24,.12);
}
.arc-hero__visual{position:relative;overflow:visible;aspect-ratio:16/8.7}
.arc-hero__visual > img{display:block;width:100%;height:100%;object-fit:cover;object-position:58% center}
/* 사진 왼쪽에만 얕은 어둠 — 흰 글씨가 밝은 하늘·바다 위에서도 읽히게 */
.arc-hero__shade{
position:absolute;inset:0;pointer-events:none;
background:linear-gradient(90deg,rgba(14,42,38,.47) 0%,rgba(14,42,38,.20) 28%,rgba(14,42,38,0) 58%);
}
/* 세로 라벨 — 사진 왼쪽 모서리에 1/3 쯤 걸쳐 프레임 밖으로 살짝 나온다.
글귀는 index.php 의 $hud_hero_tag 한 줄로 바꾼다. */
.arc-hero__label{
position:absolute;left:0;top:50%;
width:clamp(52px,4.5vw,72px);height:78%;
transform:translate(-32%,-50%);
display:flex;align-items:center;justify-content:center;
writing-mode:vertical-rl;text-orientation:mixed;
background:var(--navy);color:#fff;
font-size:12px;letter-spacing:.24em;white-space:nowrap;
z-index:3;
}
/* 사진 위 문구 — 왼쪽 본문과 겹치지 않는 별도 글.
내용은 index.php 의 $hud_hero_copy_* 로 바꾼다. */
.arc-hero__visual-copy{
position:absolute;z-index:2;
left:clamp(64px,10%,150px);top:26%;
color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.18);
word-break:keep-all;
}
.arc-hero__visual-copy h2{
margin:0 0 clamp(12px,1.4vw,24px);
font-family:'Noto Serif KR',serif;
font-size:clamp(24px,2.3vw,44px);line-height:1.3;font-weight:600;letter-spacing:-.025em;
}
.arc-hero__visual-copy p{margin:0;font-size:clamp(13px,1.05vw,19px);line-height:1.75}
.arc-hero__caption{
margin:clamp(10px,1vw,15px) 2px 0;
color:#253b35;font-size:10px;letter-spacing:.22em;text-align:right;
}
/* --- 일반 데스크톱 (시안의 1439 이하 칸 나누기) --- */
@media (max-width: 1439px){
.arc-hero__inner{grid-template-columns:minmax(400px,.85fr) minmax(520px,1.15fr);gap:48px}
}
/* --- 1단 전환 : 제목 → 설명 → 검색 → 이미지 순서(마크업 순서 그대로) --- */
@media (max-width: 1099px){
.arc-hero__inner{grid-template-columns:1fr;gap:44px}
.arc-hero__content{max-width:760px}
.arc-hero__visual{aspect-ratio:16/9}
/* 세로 라벨은 가로 배지로 — 1단에서는 왼쪽에 걸칠 모서리가 없다 */
.arc-hero__label{
left:20px;top:20px;width:auto;height:auto;
padding:11px 16px;transform:none;
writing-mode:horizontal-tb;
}
.arc-hero__visual-copy{left:44px;top:auto;bottom:44px}
}
/* --- 모바일 --- */
@media (max-width: 640px){
.arc-hero{padding:12px 0 22px}
.arc-hero__inner{gap:30px}
.arc-hero__title{font-size:clamp(36px,11vw,48px)}
.arc-hero__desc{font-size:16px}
.arc-hero__desc br{display:none}
.arc-hero__frame{padding:9px}
.arc-hero__visual{aspect-ratio:4/3}
.arc-hero__label{left:12px;top:12px;padding:8px 12px;font-size:11px;letter-spacing:.18em}
.arc-hero__visual-copy{left:20px;right:18px;bottom:24px}
.arc-hero__visual-copy h2{font-size:24px}
.arc-hero__visual-copy p{font-size:13px}
.arc-hero__caption{font-size:8px;letter-spacing:.14em}
}
/* ============================================================================
히어로 03 — 풀블리드 확장형 (.arc-hero--bleed)
----------------------------------------------------------------------------
프레임·세로 라벨 없이 사진이 오른쪽 화면 끝까지 나간다. 캡션은 종이가
아니라 사진 위, 문구 왼쪽에는 흰 세로줄.
밖으로 빼는 방법 — 컨테이너 오른쪽 여백(--hud-edge)과, 1600px 초과
화면에서 생기는 가운데 정렬 여백까지 음수 margin 으로 되돌린다.
스크롤바 폭만큼의 초과분은 body 의 overflow-x:clip 이 잘라낸다.
아래 선택자들은 전부 클래스 두 개(0,2,0)라, 위쪽 02 기본 규칙과
그 미디어 블록(0,1,0)을 순서와 상관없이 이긴다.
========================================================================== */
/* 칸 나누기·제목 크기는 반드시 데스크톱 구간으로 묶는다.
이 선택자는 클래스 두 개(0,2,0)라 미디어 없이 두면 아래 1099px 미디어의
1단 전환(0,1,0)까지 이겨 버린다 — 실제로 그 상태에서 모바일이 2열
(최소 1040px)로 남아 가로로 737px 나 넘쳤다. */
@media (min-width: 1100px){
/* 최소폭 합(왼+오+간격)이 본문폭보다 크면 격자가 칸을 뚫고 나간다.
1100px 화면의 본문폭이 ~1005px 라, 380+540+36=956 으로 잡았다 —
1100~1180 구간에서 사진이 통계 카드 오른끝을 넘던 원인이 이 합이었다. */
.arc-hero--bleed .arc-hero__inner{
grid-template-columns:minmax(380px,.6fr) minmax(540px,1.4fr);
gap:clamp(36px,3.5vw,72px);
}
/* 왼쪽 칸이 02 보다 좁아서 제목 상한도 같이 낮춘다 — 78px 이면 넓은
화면에서 '해운대의 기록을' 이 칸을 넘어 줄이 꺾인다(재 보고 정한 값). */
.arc-hero--bleed .arc-hero__title{font-size:clamp(38px,3.4vw,64px)}
}
/* 데스크톱에서는 밖으로 빼지 않는다 — 사진 오른끝이 아래 통계 카드
(상세 검색)의 오른끝과 정확히 같은 선에 선다.
변천사: 처음엔 화면 끝까지(울트라와이드에서 사진이 화면 절반을 삼킴)
→ 컨테이너 여백까지(통계 카드보다 40px 더 나가 선이 어긋남)
→ 지금: 본문 선에 정렬. 1단(1099px 이하)에서만 좌우로 빼서
폰·태블릿의 가로 띠 느낌을 살린다(아래 미디어 블록). */
/* 사진 높이 — 데스크톱에서는 비율로 정하지 않는다.
위끝은 왼쪽 'HAEUNDAE ARCHIVE' 줄, 아래끝은 검색창 밑선에 맞춘다.
방법: 격자 줄 높이는 왼쪽 글 칸이 정하고(align-items:stretch), 사진 칸은
그 높이를 100% 로 받는다. 이때 img 를 절대배치로 빼는 것이 핵심이다 —
흐름에 남겨 두면 격자가 줄 높이를 잴 때 img 의 원본 높이(887px)를
세어 버려서 왼쪽이 아니라 사진이 줄 높이를 정하게 된다.
글자 크기가 변하면 사진도 따라 변하므로 어긋날 일이 없다. */
@media (min-width: 1100px){
.arc-hero--bleed .arc-hero__inner{align-items:stretch}
.arc-hero--bleed .arc-hero__visual{height:100%;aspect-ratio:auto;max-height:none}
.arc-hero--bleed .arc-hero__visual > img{position:absolute;inset:0}
}
/* 1단(1099px 이하)의 비율은 아래 미디어 블록(16/7 · 16/9)이 정한다.
여기 미디어 밖에 비율을 두면 안 된다 — 위 aspect-ratio:auto 와 특이도가
같아 뒤에 적힌 쪽이 이기는데, 그러면 height:100% 에 비율이 곱해져
사진 폭이 칸을 104px 넘어 통계 카드와의 오른끝 정렬이 깨졌다(실측). */
.arc-hero--bleed .arc-hero__shade{
background:linear-gradient(90deg,rgba(13,30,40,.52) 0%,rgba(13,30,40,.24) 30%,rgba(13,30,40,0) 60%);
}
/* 문구 — 세로 중앙, 왼쪽에 흰 세로줄 */
.arc-hero--bleed .arc-hero__visual-copy{
left:clamp(36px,6.5%,110px);top:50%;transform:translateY(-54%);
border-left:2px solid rgba(255,255,255,.85);
padding-left:clamp(18px,1.8vw,30px);
}
.arc-hero--bleed .arc-hero__visual-copy h2{font-size:clamp(22px,2.1vw,40px)}
/* 사진 위 캡션 — 왼쪽 아래, 흰 세로줄 한 토막을 앞에 둔다 */
.arc-hero__caption--on{
position:absolute;z-index:2;margin:0;
left:clamp(36px,6.5%,110px);bottom:clamp(16px,2vw,28px);
display:flex;align-items:center;gap:14px;
color:#fff;font-size:10px;letter-spacing:.22em;text-align:left;
}
.arc-hero__caption--on::before{content:"";width:2px;height:12px;background:rgba(255,255,255,.9);flex:none}
@media (max-width: 1099px){
/* 1단에서는 양쪽 다 화면 끝까지 — 띠 사진이 본문 폭에 갇히면 어중간하다 */
.arc-hero--bleed .arc-hero__visual-wrap{
margin-left:calc(-1 * var(--hud-edge,40px));
margin-right:calc(-1 * var(--hud-edge,40px));
}
.arc-hero--bleed .arc-hero__visual{aspect-ratio:16/7}
/* 02 기본 미디어가 문구를 아래로 내리는데, 03 은 캡션이 그 자리에 있다 —
문구는 세로 중앙을 유지한다 */
.arc-hero--bleed .arc-hero__visual-copy{top:50%;bottom:auto;transform:translateY(-54%)}
/* 한 단으로 내려오면 글이 쓸 폭이 두 배로 늘어난다(2026-08-30).
2단일 때 380px 짜리 좁은 기둥에 맞춰 넣어 둔 줄바꿈이, 여기서는
한 줄에 다 들어가는 문장을 굳이 두 동강 내고 있었다. 줄바꿈은
폭이 정하게 둔다. (
앞 빈칸 덕에 낱말이 붙지 않는다.) */
.arc-hero--bleed .arc-hero__title br,
.arc-hero--bleed .arc-hero__desc br{display:none}
/* 검색칸도 같이 넓힌다 — 680px 은 좁은 기둥 시절의 상한이라,
넓은 한 단에서는 글 아래 짧은 토막처럼 떠 보였다. */
.arc-hero--bleed .arc-hero-search{width:100%}
}
@media (max-width: 640px){
.arc-hero--bleed .arc-hero__visual{aspect-ratio:16/9}
.arc-hero--bleed .arc-hero__visual-copy{left:22px;right:20px;padding-left:14px}
.arc-hero--bleed .arc-hero__visual-copy h2{font-size:22px}
.arc-hero__caption--on{left:22px;bottom:12px;font-size:8px;gap:10px}
/* 폰 첫 화면 — 제목을 줄이고 검색을 앞세운다(2026-08-30).
제목이 화면 폭에 비례해 커지게(11vw) 두었더니 갤럭시처럼 글자 크기를
키운 기기에서 세 줄로 늘어나, 머리 영역이 첫 화면의 3분의 2를 먹었다.
아카이브는 찾으러 오는 곳이다 — 남는 자리는 검색칸에 준다. */
/* 제목을 한 줄로 앉힌다. "해운대의 기록을 다시 탐색하다" 한 줄의 폭은
글자 크기의 13.01배로 재어졌다(2026-08-30). 화면에서 페이지 여백을
뺀 자리를 그 비율로 나누면, 어떤 폭에서도 한 줄에 들어가는 크기가
나온다 — 기기마다 두 줄·세 줄로 갈리던 것이 없어진다.
13.2 로 나눈 것은 글꼴이 바뀌어도 넘치지 않게 둔 여유다. */
.arc-hero--bleed .arc-hero__title{
font-size:clamp(19px,calc((100vw - 42px) / 13.2),26px);
line-height:1.3;letter-spacing:-.03em;
}
.arc-hero--bleed .arc-hero__title br{display:none} /* 줄바꿈은 폭이 정한다 */
.arc-hero--bleed .ed-kicker{margin-bottom:9px;font-size:11.5px;letter-spacing:.2em}
.arc-hero--bleed .arc-hero__desc{display:none} /* 제목이 이미 같은 말을 한다 */
.arc-hero--bleed .arc-hero__inner{gap:20px}
.arc-hero--bleed .arc-hero-search{
margin-top:18px;height:54px;
border-color:var(--navy);box-shadow:0 2px 10px rgba(7,38,60,.10);
}
/* 16px 밑으로 내려가면 폰이 칸을 누를 때 화면을 확대해 버린다 */
.arc-hero--bleed .arc-hero-search input{font-size:16px;padding:0 16px}
.arc-hero--bleed .arc-hero-search button{flex:0 0 62px}
}
.ed-stats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));background:#fff;border:1px solid var(--line);margin-top:4px}
.ed-stat{padding:23px 26px;display:flex;flex-direction:column;gap:7px;border-right:1px solid #ece7df;min-height:154px}
.ed-stat:last-child{border-right:0}
.ed-stat small{font-size:17px;font-weight:600;color:#3f3b37}.ed-stat strong{font-family:'Noto Serif KR',serif;font-size:46px;line-height:1}.ed-stat em{font-style:normal;color:#6e685f;font-size:18px}.ed-stat span{color:#7a746c;font-size:14px;margin-top:auto}
.ed-stat--cta{background:var(--navy);color:#fff;justify-content:flex-end}.ed-stat--cta strong{font-size:32px;color:#fff}.ed-stat--cta span{color:#d5e2eb}.ed-stat--cta em{font-size:26px;color:#fff;margin-top:6px}
/* 구역 사이 가로 구분선은 두지 않는다(2026-08-28).
여섯 구역 위에 같은 선이 그어져 첫 화면이 표처럼 보였다. 구역은 여백과
제목이 이미 갈라 주므로 선까지 있으면 눈이 쉴 곳이 없다. */
.ed-section{padding:52px 0}
.ed-section__head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:28px}
.ed-section__head h2,.ed-section__aside h2{margin:0;font-family:'Noto Serif KR',serif;font-size:46px;line-height:1.2;letter-spacing:-.03em}
/* 왼쪽 제목칸은 270px 이고 글자가 46px 이라 한 줄에 다섯 자가 한계다.
그대로 두면 '최신 아카이/브' 처럼 낱말 중간에서 끊긴다 — 한국어는
낱말 단위로만 끊기게 하고, 줄 나눌 자리는 마크업의
로 정한다. */
.ed-section__aside h2{word-break:keep-all}
.ed-section__head a{font-weight:500;color:#45403a}
.ed-section__aside p{margin:16px 0 0;color:var(--muted);font-size:16px;max-width:270px}
.ed-outline-btn{display:inline-flex;align-items:center;gap:8px;padding:14px 18px;border:1px solid #bdb5a9;background:#fff;margin-top:26px;font-weight:600}
.ed-curation{display:grid;grid-template-columns:270px minmax(0,1fr);gap:32px}
/*
* 큐레이션 카드
* ------------------------------------------------------------------
* 둥근 흰 카드에 동그란 대표 이미지, 그 아래 제목·소개·건수를 가운데로
* 모은다. 마우스를 올리면 그 동그란 이미지가 카드 전체로 퍼지고 글자가
* 흰색으로 바뀐다.
*
* 퍼지는 효과는 이미지를 두 층으로 깔아서 만든다 — 평소에는 동그란
* __thumb 만 보이고 전체를 덮는 __bg 는 투명하게 숨어 있다가, 올리면
* 서로 바뀐다. 사라지는 쪽도 opacity 로만 다루므로(display 를 건드리지
* 않는다) 칸 높이가 흔들리지 않는다.
*/
.ed-cur-card{position:relative;overflow:hidden;display:block;padding:30px 22px 32px;border:1px solid var(--line);border-radius:20px;background:#fff;text-align:center;transition:transform .45s cubic-bezier(.4,0,.2,1),box-shadow .35s ease,border-color .3s ease}
/* 대표 이미지는 평소에 '동그라미'로 잘려 있다가, 마우스를 올리면 그 원이
카드 전체로 퍼진다. 빠져나가면 다시 동그라미로 오므라든다.
── 예전에는 동그란 사진과 배경 사진 두 장을 서로 흐려지게(opacity) 바꿔
치기했다. 그러면 '바뀌었다'로만 보이고 무엇이 커지는지 눈이 못 따라간다.
같은 사진 한 장을 원으로 오려 두고 그 원만 키우면, 손이 닿은 그 자리에서
퍼져 나가는 것이 보인다.
원의 중심 105px = 카드 위여백 30px + 동그라미 반지름 75px. */
.ed-cur-card__bg{position:absolute;inset:0;background-size:cover;background-position:center;
opacity:0;clip-path:circle(75px at 50% 105px);
transition:clip-path .55s cubic-bezier(.4,0,.2,1),opacity .3s ease}
/* 어둡게 덮는 층은 원이 카드를 채운 뒤에만 필요하다 — 작은 동그라미일 때
덮어 버리면 사진이 탁해 보인다. */
.ed-cur-card__bg:after{content:'';position:absolute;inset:0;background:rgba(11,34,26,.62);
opacity:0;transition:opacity .35s ease .12s}
/* 대표 이미지가 있는 카드에서만 이 방식을 쓴다. 이미지가 없으면 원이 빈
채로 커지므로, 예전처럼 동그라미 자리를 그대로 둔다. */
.ed-cur-card.has-bg .ed-cur-card__bg{opacity:1}
.ed-cur-card.has-bg .ed-cur-card__thumb{visibility:hidden}
.ed-cur-card__body{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:12px}
.ed-cur-card__thumb{width:150px;height:150px;border-radius:50%;overflow:hidden;background:linear-gradient(135deg,#e4dfd2,#cfc9ba);transition:opacity .35s ease}
.ed-cur-card__thumb img{width:100%;height:100%;object-fit:cover;display:block}
/* word-break:keep-all — 한글은 낱자 단위로 끊어도 문법상 맞아서 브라우저가
"해운/대해수욕장" 처럼 낱말 가운데를 잘라 버린다. 낱말째로 넘기게 한다. */
.ed-cur-card strong{font-family:'Noto Serif KR',serif;font-size:21px;line-height:1.35;letter-spacing:-.02em;word-break:keep-all;text-wrap:balance;transition:color .3s ease}
.ed-cur-card em{font-style:normal;font-size:14px;line-height:1.65;color:var(--muted);word-break:keep-all;transition:color .3s ease}
.ed-cur-card small{font-size:13px;color:var(--muted);letter-spacing:.02em;transition:color .3s ease}
/* 살짝 떠오르는 대신 카드 전체가 커진다. 떠오르기(translateY)는 '눌러도
되는 것' 정도만 알려 주지만, 커지면 그 카드가 앞으로 나온 것처럼 읽혀
지금 무엇을 보고 있는지가 분명해진다.
z-index 는 커진 카드가 옆 카드 위로 올라오게 한다 — 없으면 이웃에
가려 모서리가 잘린 것처럼 보인다. */
.ed-cur-card:hover{transform:scale(1.07);z-index:3;
box-shadow:0 22px 48px rgba(20,30,26,.22);border-color:transparent}
.ed-cur-card:hover .ed-cur-card__bg{clip-path:circle(100% at 50% 44%)}
.ed-cur-card:hover .ed-cur-card__bg:after{opacity:1}
.ed-cur-card:hover strong,.ed-cur-card:hover em,.ed-cur-card:hover small{color:#fff}
/* 대표 이미지가 없는 카드는 퍼질 사진이 없으니 예전처럼 살짝 떠오르기만 */
.ed-cur-card:not(.has-bg):hover{transform:translateY(-6px)}
/* 2개 이하일 때 — 넘길 것이 없으니 그냥 나란히 둔다(카드는 같은 모양) */
.ed-curation__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,320px));gap:18px;align-content:start}
/* 3개 이상 — 왼쪽 소개 칸은 고정이고 오른쪽 카드 영역만 옆으로 밀린다.
화살표는 카드 위에 겹쳐 양옆에 둔다(참고한 배치). */
.ed-curation__slider{position:relative;min-width:0}
/* container-type — 아래 @container 가 "화면 폭"이 아니라 "이 카드 영역의 폭"을
기준으로 장수를 정하게 해 준다. 화면 폭으로만 재면 왼쪽 소개 칸(270px)이
붙어 있는 구간과 그것이 위로 빠진 구간의 카드 영역 폭이 크게 달라져
숫자가 어긋난다(예: 1101px 에서는 3장이 각 229px 로 눌렸다). */
/* 안쪽 여백을 줬다가 바깥 여백으로 도로 당긴다.
overflow:hidden 이 커진 카드의 모서리와 그림자를 잘라 먹기 때문이다.
자리는 그대로면서 잘릴 여유만 생긴다(참고 사이트도 같은 방법을 쓴다). */
.ed-curation__viewport{overflow:hidden;container-type:inline-size;
padding:26px 22px;margin:-26px -22px}
/* 한 번에 보여줄 장수는 --per 하나만 바꾼다(폭별 규칙은 바로 아래).
JS 는 카드 폭을 실제로 재서 몇 장 보이는지 알아내므로, 여기를 고쳐도
넘기는 칸 수는 저절로 맞는다 — JS 를 같이 고칠 필요가 없다. */
.ed-curation__track{--per:3;--gap:16px;display:flex;gap:var(--gap);align-items:stretch;transition:transform .62s ease}
.ed-curation__track .ed-cur-card{flex:0 0 calc((100% - (var(--per) - 1) * var(--gap)) / var(--per))}
/* 카드 영역이 넓어지면 장수를 늘린다 — 넓어졌는데 카드만 커지면 여백이
남고 넘겨 볼 재미가 없다. 반대로 좁아지면 줄여서 한 장이 250px 아래로
눌리지 않게 한다(그 아래로 가면 동그란 이미지가 뭉개진다).
선택자를 두 겹(.ed-curation__viewport .ed-curation__track)으로 쓴 것은
아래쪽 폭별 규칙(@media)보다 확실히 이기게 하려는 것이다. @container 를
모르는 브라우저에서는 이 블록이 통째로 무시되고 @media 값이 쓰인다. */
@container (max-width:519px){ .ed-curation__viewport .ed-curation__track{--per:1} }
@container (min-width:520px){ .ed-curation__viewport .ed-curation__track{--per:2} }
@container (min-width:790px){ .ed-curation__viewport .ed-curation__track{--per:3} }
@container (min-width:1060px){ .ed-curation__viewport .ed-curation__track{--per:4} }
.ed-curation__arrow{position:absolute;top:50%;z-index:4;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--text);font-size:18px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(20,30,26,.14);transition:background .15s,color .15s,border-color .15s}
.ed-curation__arrow.is-prev{left:-14px}
.ed-curation__arrow.is-next{right:-14px}
.ed-curation__arrow:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
@media (prefers-reduced-motion: reduce){
.ed-curation__track{transition:none}
.ed-cur-card{transition:none}
}
/* 최신 아카이브 — 제목은 왼쪽, 자료는 오른쪽 4열 2행 (16:9)
'AI 아카이브 스마트 검색'(.ed-smart)과 같은 골격을 쓴다. */
.ed-latest{display:grid;grid-template-columns:270px minmax(0,1fr);gap:32px}
/* 페이지를 옆으로 넘긴다. 한 페이지가 정확히 보이는 칸의 한 폭이라
(flex-basis:100%) 걸음과 페이지 폭이 딱 맞는다. */
.ed-latest__viewport{position:relative;overflow:hidden}
.ed-latest__track{display:flex;transition:transform .6s ease;will-change:transform}
.ed-latest__page{flex:0 0 100%;min-width:0}
@media (prefers-reduced-motion: reduce){ .ed-latest__track{transition:none} }
/* 글이 사진 위로 올라가 아래에 자리를 쓰지 않으므로 위아래 간격도 16px */
.ed-latest__page{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;align-content:start}
/* 화살표는 사진 벽과 같은 모양·자리 */
.ed-latest__arrow{position:absolute;top:50%;z-index:4;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--text);font-size:18px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(20,30,26,.16);transition:background .15s,color .15s,border-color .15s}
.ed-latest__arrow.is-prev{left:10px}
.ed-latest__arrow.is-next{right:10px}
.ed-latest__arrow:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
.ed-latest-card{position:relative;background:transparent}
.ed-latest-card .thumb{position:relative;aspect-ratio:16/9;overflow:hidden;background:#e4e0d7;border:1px solid #e8e0d3}
.ed-latest-card img{width:100%;height:100%;object-fit:cover;transition:transform .45s ease}
.ed-latest-card .badge{position:absolute;top:10px;left:10px;z-index:2;padding:4px 8px;border-radius:5px;background:rgba(255,255,255,.95);font-size:12px;font-weight:700;color:#29333a}
.ed-latest-card .play{position:absolute;right:12px;bottom:12px;z-index:2;width:46px;height:46px;border-radius:50%;background:rgba(11,52,81,.82);color:#fff;display:flex;align-items:center;justify-content:center;font-size:18px}
/* 제목·출처·날짜는 평소에 감추고, 마우스를 올리면 사진 위에 얹어 보여준다.
사진 벽(.ed-wall__cap)과 같은 방식이다 — 사진을 사진으로 먼저 보게 하고,
설명이 필요할 때만 꺼내 본다.
글상자를 사진 위로 띄우므로(absolute) 카드 높이는 사진 높이 그대로다.
글자가 사진 위에 놓이니 아래로 갈수록 진해지는 그늘을 깔아 읽히게 한다. */
.ed-latest-card .copy{
position:absolute;left:0;right:0;bottom:0;z-index:1;
padding:40px 14px 13px;
color:#fff;
background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.55) 42%,rgba(0,0,0,.82));
opacity:0;transition:opacity .3s ease;
}
.ed-latest-card:hover .copy,
.ed-latest-card:focus-within .copy{opacity:1}
.ed-latest-card:hover img{transform:scale(1.04)}
.ed-latest-card h3{margin:0 0 5px;font-size:17px;line-height:1.42;color:#fff;word-break:keep-all}
.ed-latest-card p{margin:0 0 3px;color:#e2ddd3;font-size:13.5px}
.ed-latest-card time{font-size:12.5px;color:#cfc9be}
/* 손가락으로 쓰는 화면에는 롤오버가 없으니 늘 보여준다 */
@media (hover:none){ .ed-latest-card .copy{opacity:1} }
@media (prefers-reduced-motion: reduce){
.ed-latest-card img{transition:none}
.ed-latest-card:hover img{transform:none}
}
/*
* 사진 벽 — 2줄 고정, 옆으로 넘겨 보기
* ------------------------------------------------------------------
* grid-auto-flow:column 과 2행 지정을 함께 쓰면, 칸이 왼쪽 위에서 아래로
* 채워진 뒤 다음 열로 넘어가며 오른쪽으로 계속 늘어난다. 그래서 줄 수가
* 정확히 2로 고정되고 빈칸이 생기지 않는다(장수는 PHP 에서 짝수로 맞춘다).
* 넘치는 부분은 뷰포트가 잘라내고, 띠를 translateX 로 옮겨 한 화면씩 넘긴다.
*
* 모양이 단조로워지지 않게 두 가지를 섞는다.
* 1) 열 폭을 여러 값으로 돌린다(grid-auto-columns 에 값을 나열하면 그
* 목록이 열마다 되풀이된다). 값을 5개(홀수)로 둔 것은 아래 2)의
* 2열 주기와 어긋나게 해서 같은 폭이 규칙적으로 반복되지 않게 하려는
* 것이다.
* 2) 매 3번째 사진은 2줄을 통째로 써서 세로로 길게 세운다(.is-tall).
* "세로 한 장 + 포개진 두 장" 이 두 열을 채우므로(1+2=3장) 빈칸이
* 생기지 않는다. PHP 가 장수를 3의 배수로 맞추고, 세로 자리에는
* 되도록 사람이 없는 사진을 놓는다(잘려도 안전하도록).
*
* 사진은 칸에 맞춰 잘린다(object-fit:cover) — 2줄을 빈틈없이 채우는 것이
* 우선이라 원본 비율은 쓰지 않는다.
*/
/* 사진 벽 — 제목은 왼쪽, 사진은 오른쪽 3줄
------------------------------------------------------------------
dense 를 쓰는 이유 — 세로로 2칸을 차지하는 큰 사진(is-tall)이 마지막
줄에 걸리면 들어갈 자리가 없어 구멍이 생긴다. 2줄일 때는 한 칸 아래가
늘 비어 있어 문제가 없었는데, 3줄이 되면 세 번째 줄에서 막힌다.
dense 는 뒤쪽 사진을 끌어와 그 구멍을 메운다(순서가 조금 바뀌는 대신
빈 칸이 남지 않는다 — 사진 벽에서는 그 편이 낫다). */
.ed-wall{display:grid;grid-template-columns:270px minmax(0,1fr);gap:32px}
.ed-wall__viewport{position:relative;overflow:hidden}
/* 사진이 아직 없을 때.
벽이 차지하던 높이(156px 세 줄 = 488px)를 그대로 두면, 빈 상자가
화면 한 판을 차지해 "없음"만 도드라진다. 구역이 있다는 것만 알면
되므로 낮게 잡는다. */
.ed-wall__empty{display:flex;flex-direction:column;align-items:center;justify-content:center;
min-height:220px;padding:28px 24px;text-align:center;
border:1px dashed var(--line);border-radius:10px;background:var(--bg2)}
.ed-wall__empty p{margin:0;color:var(--muted)}
.ed-wall__empty-sub{margin-top:6px!important;font-size:14px;opacity:.8}
.ed-wall__track{display:grid;grid-auto-flow:column dense;grid-template-rows:repeat(3,156px);grid-auto-columns:300px 220px 265px 200px 330px;gap:10px;transition:transform .6s ease;will-change:transform}
.ed-wall__item.is-tall{grid-row:span 2}
.ed-wall__item{position:relative;display:block;overflow:hidden;border-radius:10px;background:#e9e5dc}
.ed-wall__item img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .45s ease}
.ed-wall__arrow{position:absolute;top:50%;z-index:4;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--text);font-size:18px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(20,30,26,.16);transition:background .15s,color .15s,border-color .15s}
.ed-wall__arrow.is-prev{left:10px}
.ed-wall__arrow.is-next{right:10px}
.ed-wall__arrow:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
@media (prefers-reduced-motion: reduce){ .ed-wall__track{transition:none} }
.ed-wall__cap{position:absolute;left:0;right:0;bottom:0;padding:26px 12px 10px;color:#fff;font-size:13.5px;line-height:1.45;text-align:center;word-break:keep-all;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.72));opacity:0;transition:opacity .3s ease}
/* 캡션은 평소 숨긴다 — 사진 벽은 사진을 보는 곳이라 글자가 늘 덮여 있으면
정작 사진이 안 보인다. 마우스를 올린 장에만 제목을 띄운다.
손가락 기기(hover 없음)에서는 늘 보이게 해 둔다 — 올릴 방법이 없으니까. */
.ed-wall__item:hover img{transform:scale(1.04)}
.ed-wall__item:hover .ed-wall__cap{opacity:1}
@media (hover:none){ .ed-wall__cap{opacity:1} }
@media (prefers-reduced-motion: reduce){
.ed-wall__item img{transition:none}
.ed-wall__item:hover img{transform:none}
}
.ed-smart{display:grid;grid-template-columns:270px minmax(0,1fr);gap:32px}
.ed-smart__grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.ed-smart-card{min-height:220px;background:#fff;border:1px solid var(--line);padding:24px;display:flex;flex-direction:column;gap:12px;position:relative}
.ed-smart-card strong{font-size:24px;line-height:1.3;font-family:'Noto Serif KR',serif}.ed-smart-card p{margin:0;color:var(--muted);font-size:15px}.ed-smart-card .icon{margin-top:auto;font-size:48px;color:#4a4a4a;opacity:.9;align-self:flex-end;line-height:1}
.ed-smart-card.is-cta{background:var(--navy);border-color:var(--navy);color:#fff}.ed-smart-card.is-cta p{color:#d5e0e8}.ed-smart-card.is-cta .icon{color:#fff}
.ed-timeline{display:grid;grid-template-columns:270px minmax(0,1fr);gap:32px;align-items:center}
.ed-timeline__line{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px;padding-top:40px}
/* 연결선은 원의 한가운데를 지나야 한다 — 컨테이너 위 여백 40px + 원 반지름 27px */
.ed-timeline__line:before{content:"";position:absolute;left:5%;right:5%;top:67px;height:2px;background:#bfc7cb}
/* 원이 지름 54px 인데 글자 자리를 22px 부터 잡아 32px 이 겹쳐 있었다.
원 아래(54px)에서 12px 띄운 자리부터 글자가 시작하도록 되돌린다. */
.ed-time-dot{position:relative;text-align:center;padding-top:66px}
/* 배경 이미지는 시대별로 다르므로 index.php 가 인라인으로 지정한다.
여기서는 그림이 없을 때도 모양이 유지되도록 색과 크기만 잡는다. */
.ed-time-dot .dot{position:absolute;top:0;left:50%;transform:translateX(-50%);width:54px;height:54px;border-radius:50%;border:8px solid #d8d8d4;background-color:#ccc;background-position:center;background-size:cover;background-repeat:no-repeat;box-shadow:0 0 0 1px #c8c0b6}
.ed-time-dot strong{display:block;font-size:20px;margin-bottom:6px}.ed-time-dot em{font-style:normal;color:var(--muted);font-size:15px;line-height:1.45}
.ed-time-dot.is-active .dot{border-color:var(--navy);box-shadow:0 0 0 6px rgba(11,52,81,.12)}
.ed-place{display:grid;grid-template-columns:270px minmax(0,1fr);gap:32px}
/* 장소 아카이브 — 실제 지도(Leaflet + OpenStreetMap).
예전에는 여기에 CSS 로 지도처럼 보이는 그림을 그리고 핀 7개를 고정
좌표로 박아 두었다. 진짜 지도로 바꿨으므로 그 그림 규칙은 없앤다.
좌표가 든 장소가 없으면 지도 자체를 출력하지 않고, 그때는
.is-nomap 이 붙어 목록이 남은 폭을 다 쓴다. */
/* 장소 아카이브 — 왼쪽 소개(바깥 .ed-place) / 가운데 목록 / 오른쪽 지도 */
/* align-items 를 건드리지 않는다. 격자 칸은 기본이 stretch 라
지도가 왼쪽 목록(행정구역 + 촬영지)의 아래 끝선까지 저절로 늘어난다. */
/* 목록 폭을 묶고 남는 자리를 전부 지도에 준다.
예전에는 반대로 지도를 470px 로 묶어 두어, 화면이 넓어져도 늘어난 폭이
전부 목록으로 갔다. 그래서 큰 모니터일수록 지도가 상대적으로 작아 보였다.
목록은 지명이 안 잘리는 선까지 좁힌다. 실제로 재 보니 가장 긴 이름이
'해운대해수욕장'·'해운대신시가지' 103px, 'APEC나루공원' 98px 이다.
300px 이면 안쪽 한 칸이 약 116px 이라 여유가 조금 남는다.
더 줄이면 이 셋부터 잘리기 시작한다 — 하필 가장 중요한 지명들이다. */
.ed-place__body{display:grid;grid-template-columns:minmax(280px,300px) minmax(0,1fr);gap:20px}
.ed-place__group{padding:16px 18px}
.ed-place__group ul{column-gap:14px}
.ed-place__body.is-nomap{grid-template-columns:1fr}
/* 패널을 flex 로 두어 안쪽 지도가 남은 높이를 그대로 채우게 한다.
Leaflet 은 높이가 확정돼야 타일을 그리므로 min-height 도 함께 둔다. */
.ed-map-panel{border:1px solid var(--line);background:#f0ede6;padding:12px;display:flex}
.ed-map-live{flex:1;min-height:420px;border:1px solid #e3ddd1;background:#eae6db}
/* Leaflet 이 기본으로 심는 파란 링크색이 아카이브 색과 어긋나서 맞춘다 */
.ed-map-live .leaflet-popup-content a{color:var(--navy);text-decoration:none}
.ed-map-live .leaflet-popup-content strong{font-size:14px}
.ed-map-live .leaflet-container{font-family:inherit}
/* 왼쪽 촬영지 목록에 마우스를 올리면 지도 위 핀이 통통 튄다.
Leaflet 이 바깥 요소(.hud-pin)의 transform 으로 위치를 잡으므로,
애니메이션은 안쪽 hud-pin-inner 에만 걸어 위치 이동과 부딪히지 않게 한다. */
.hud-pin-inner{transform-origin:bottom center}
.hud-pin.is-bounce .hud-pin-inner{animation:hud-pin-bounce .6s ease-in-out infinite}
@keyframes hud-pin-bounce{
0%,100%{transform:translateY(0) scale(1)}
30%{transform:translateY(-11px) scale(1.05)}
50%{transform:translateY(0) scale(.96)}
68%{transform:translateY(-5px) scale(1.02)}
84%{transform:translateY(0) scale(1)}
}
@media (prefers-reduced-motion: reduce){
.hud-pin.is-bounce .hud-pin-inner{animation:none}
}
/* 가운데 — 촬영지 / 행정구역.
두 묶음을 좌우로 나눠 놓았더니 각 카드가 240px 밖에 못 받아 지명이
"해운대신시…" 처럼 잘렸다. 위아래로 쌓고 카드 안에서 2열을 쓴다.
같은 폭이라도 이름 한 칸이 두 배 넓어진다. */
.ed-place__stats{display:grid;grid-template-columns:1fr;gap:18px}
/* 지도가 없을 때(좌표 미입력)는 목록이 전폭으로 늘어나 허전해 보인다.
이때만 두 묶음을 좌우로 놓아 자리를 채운다. 카드가 각 500px 은 되므로
안쪽 2열도 여유가 있어 이름은 잘리지 않는다. */
.ed-place__body.is-nomap .ed-place__stats{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
.ed-place__group{border:1px solid var(--line);background:#fff;padding:18px 22px}
.ed-place__group h3{margin:0 0 8px;font-family:'Noto Serif KR',serif;font-size:22px;letter-spacing:-.02em}
.ed-place__group ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:22px}
.ed-place__group a{display:block;padding:10px 0;border-top:1px solid #eee8dd;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 각 열의 첫 줄 위에는 선을 긋지 않는다(2열이라 1·2번째가 첫 줄) */
.ed-place__group li:nth-child(1) a,.ed-place__group li:nth-child(2) a{border-top:0}
.ed-place__group a:hover{color:var(--navy)}
.ed-place__empty{margin:10px 0 0;color:var(--muted);font-size:13.5px;line-height:1.6}
.hed-footer{border-top:1px solid var(--line);background:#ffffff;margin-top:10px}
.hed-footer__inner{max-width:1600px;margin:0 auto;padding:30px 40px;display:grid;grid-template-columns:1.1fr 1.2fr 1fr;gap:32px;align-items:start}
.hed-footer__brand strong{display:block;font-family:'Noto Serif KR',serif;font-size:42px;line-height:1.1;margin-bottom:8px}.hed-footer__brand span{font-size:18px;color:#4f4a44}.hed-footer__brand p{margin:18px 0 0;color:var(--muted)}
.hed-footer__social{display:flex;gap:10px;margin-top:18px}.hed-footer__social a{display:inline-flex;width:36px;height:36px;border-radius:50%;border:1px solid #c8c2b7;align-items:center;justify-content:center}
.hed-footer__links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.hed-footer__links h3,.hed-footer__subscribe h3{margin:0 0 12px;font-size:18px}.hed-footer__links a,.hed-footer__links p{display:block;margin:7px 0;color:#5e5a55;font-size:14px;line-height:1.6}
.hed-footer__subscribe p{margin:0 0 12px;color:#6b675f;font-size:14px}.hed-footer__subscribe form{display:flex;gap:10px}.hed-footer__subscribe input{flex:1;height:46px;border:1px solid #c8c2b7;padding:0 14px;background:#fff}.hed-footer__subscribe button{height:46px;padding:0 16px;border:0;background:var(--navy);color:#fff;font-weight:700}
.hed-footer__bottom{max-width:1600px;margin:0 auto;padding:0 40px 26px;display:flex;justify-content:space-between;gap:20px;color:#625d56;font-size:14px}.hed-footer__meta{display:flex;gap:18px;flex-wrap:wrap}
@media (max-width: 1400px){
.hed-nav__list{gap:26px}
/* 제목 크기는 .ed-hero h1 의 clamp 가 맡는다 — 계단식 지정은 제거 */
/* 통계 카드 5열 -> 3열(2줄) 전환을 여기서 빼낸다.
1366px 노트북(가장 흔한 해상도)이 정확히 이 구간(<=1400px)에 걸려
카드가 2줄이 되면서 '히어로+통계' 구역만 191px 더 커졌다 —
페이지 넘김을 한 화면 한 구역으로 맞추려는 작업과 정면으로 부딪혔다.
1100px 아래에서는 이미 2열로 바뀌는 규칙이 따로 있으므로(gap 없음),
그 사이(1101~1400px)는 기본값인 5열 한 줄을 그대로 쓴다. */
.ed-smart__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.hed-footer__inner{grid-template-columns:1fr 1fr}
.hed-footer__subscribe{grid-column:1/-1}
}
@media (max-width: 1100px){
.hed-nav{display:none}.hed-menu-button{display:block}
.hed-menu__inner{grid-template-columns:repeat(2,minmax(0,1fr))}
/* 전체메뉴를 본문 위에 덮는 패널로 바꾼다. 예전에는 본문을 아래로 밀어내서
메뉴 아래에 원래 페이지가 계속 보였다. 기준은 sticky 헤더. */
.hed-menu{position:absolute;left:0;right:0;top:100%;max-height:78vh;overflow-y:auto;box-shadow:0 22px 46px rgba(20,30,26,.22)}
/* 손가락으로 누르는 영역 확보 — 데스크톱(46px)보다 작아지지 않게 같은 값을 쓴다.
예전에는 44px 였는데, 데스크톱을 46px 로 키운 뒤로는 이 규칙이 오히려
모바일에서 아이콘을 줄이고 있었다. */
.hed-tool-icon,.hed-lang{width:46px;height:46px}
.hed-menu__title{padding:5px 0}
.hed-menu__sub a{display:block;padding:9px 0}
.hed-footer__links a{margin:0;padding:9px 0}
.hed-footer__social a{width:44px;height:44px}
.hed-footer__meta a,.ed-section__head a{display:inline-flex;align-items:center;min-height:44px}
.ed-outline-btn{min-height:48px}
/* 좁아지면 제목을 위로 올린다 — 왼쪽 270px 을 떼면 오른쪽이 너무 좁다 */
.ed-curation,.ed-smart,.ed-timeline,.ed-place,.ed-latest,.ed-wall{grid-template-columns:1fr}
/* 8장이 3열이면 3+3+2 로 세 줄이 된다 — 마지막 줄이 덜 차는 대신
카드가 너무 작아지지 않는다. */
.ed-latest__page{grid-template-columns:repeat(3,minmax(0,1fr))}
.ed-wall__track{grid-template-rows:repeat(3,146px);grid-auto-columns:250px 190px 225px 175px 275px}
.ed-smart__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.ed-timeline__line{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:26px;padding-top:0}.ed-timeline__line:before{display:none}
/* 좁아지면 지도를 목록 아래로 내린다(가로로 나란히 두기엔 둘 다 좁아진다) */
.ed-place__body{grid-template-columns:1fr}
.ed-place__body.is-nomap .ed-place__stats{grid-template-columns:1fr}
.ed-map-live{min-height:460px}
}
/* 이 구간(821~1100px)에서는 히어로의 검색창을 오른쪽에 둔다.
------------------------------------------------------------------
1100px 아래에서는 사진이 위로 올라가고(order:-1) 글줄만 아래에 남는데,
제목·설명이 왼쪽 절반만 쓰기 때문에 오른쪽이 크게 빈다. 그 빈 자리로
검색창을 옮겨 '글은 왼쪽, 검색은 오른쪽'으로 나란히 둔다.
왜 이 구간만인가 — 820px 아래(폰·작은 태블릿)에서는 둘을 나란히 두면
검색칸이 글자를 넣기도 버거울 만큼 좁아진다. 그때는 지금처럼 글 아래에
그대로 두는 편이 낫다.
자리를 자동 배치에 맡기지 않고 하나씩 지정하는 이유 — 이 칸의 자식은
kicker, h1, 설명, 검색창 넷이 나란히 있을 뿐이라(감싸는 상자가 없다)
그냥 두면 넷이 두 열에 둘씩 나뉘어 버린다. */
/* (예전 821~1100px 검색창 오른쪽 배치 블록은 히어로 개편으로 제거 —
새 구조는 1099px 이하에서 1단으로 전환한다) */
/* 태블릿 세로. 예전에는 768px 아래에서 전부 1열로 무너져 아이패드 세로에서
카드 한 장이 700px 넘게 늘어났다. 여기서는 3열을 그대로 유지한다. */
@media (max-width: 820px){
.hed-header__inner,.editorial-home,.hed-footer__inner,.hed-footer__bottom{padding-left:18px;padding-right:18px}
.hed-logo{min-width:0}.hed-logo strong{font-size:24px}.hed-logo span{font-size:13px}
.editorial-home{--hud-edge:18px;padding-top:4px;padding-bottom:48px}
/* 사진이 한 장이 되면서 겹침 위치를 잡던 규칙은 필요 없어졌다.
좁은 화면에서는 테두리만 얇게 줄인다. */
.ed-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
.ed-stat{min-height:0;padding:20px 18px;border-right:1px solid #ece7df;border-bottom:1px solid #ece7df}
.ed-stat:nth-child(2n){border-right:0}
.ed-stat--cta{grid-column:1/-1;border-right:0;border-bottom:0}
.ed-section{padding:34px 0}
/* 구역 제목은 단계로 뛰지 않고 폭을 따라 이어서 줄어든다. 46 → 32 → 27 로
못박아 두면 그 사이 폭을 가진 기기에서만 유독 어색해진다(2026-08-30) */
.ed-section__head h2,.ed-section__aside h2{font-size:clamp(24px,4.6vw,36px)}
.ed-section__aside p{max-width:none}
.ed-curation__grid{grid-template-columns:1fr}
/* 세 장이면 각 230px 아래로 눌려 동그란 이미지가 어색해진다 — 두 장으로 */
.ed-curation__track{--per:2}
.ed-cur-card{padding:24px 18px 26px}
.ed-cur-card__thumb{width:120px;height:120px}
/* 카드가 작아지면 동그라미도 작아진다 — 중심 84px = 위여백 24 + 반지름 60 */
.ed-cur-card__bg{clip-path:circle(60px at 50% 84px)}
/* 좁은 화면에서는 손가락으로 쓰므로 hover 가 없다. 커지기만 하면 옆
카드를 가리므로 조금만 키운다. */
.ed-cur-card:hover{transform:scale(1.03)}
.ed-cur-card strong{font-size:20px}
.hed-footer__inner{grid-template-columns:1fr}
.hed-footer__brand strong{font-size:34px}
.hed-footer__bottom{flex-direction:column;gap:10px}
}
/* 폰. 썸네일 카드는 2열이 기본이다 — 1열로 늘리면 한 화면에 한 장만 남아
자료를 눈으로 훑어 고를 수가 없다. */
@media (max-width: 560px){
.ed-place__stats{grid-template-columns:1fr}
.hed-header__inner{gap:8px}.hed-tools{gap:2px}
.hed-menu__inner{grid-template-columns:1fr;padding:18px}
/* 글자 크기는 clamp 가 처리한다 */
.ed-stat{padding:15px 14px}
.ed-stat small{font-size:13px}.ed-stat strong{font-size:30px}
.ed-stat em{font-size:14px}.ed-stat span{font-size:12px}
.ed-stat--cta strong{font-size:22px}.ed-stat--cta em{font-size:18px}
/* 폰에서는 한 줄에 한 장, 세로로 넉 장 (한 페이지 4장).
두 열로 나누면 사진이 너무 작아 무엇인지 알기 어렵다 — 폭을 다 쓰고
대신 페이지를 넘겨 본다(몇 장씩 묶을지는 index.php 의 perPage 참고). */
.ed-latest__page{grid-template-columns:1fr;gap:10px}
.ed-latest__arrow{width:34px;height:34px;font-size:16px}
.ed-latest__arrow.is-prev{left:6px}.ed-latest__arrow.is-next{right:6px}
/* 폰에서는 칸을 작게 — 한 화면에 두 열쯤 보이고 나머지는 넘겨 본다.
다만 104px 은 너무 납작해 무엇을 찍은 사진인지 알기 어려웠다 —
세로를 145px 로 키운다(폭은 그대로라 칸이 정사각에 가까워진다). */
.ed-wall__track{grid-template-rows:repeat(3,145px);grid-auto-columns:180px 135px 160px 125px 195px;gap:6px}
.ed-wall__item{border-radius:8px}
.ed-wall__cap{padding:18px 7px 6px;font-size:11.5px}
.ed-wall__arrow{width:34px;height:34px;font-size:16px}
.ed-wall__arrow.is-prev{left:6px}.ed-wall__arrow.is-next{right:6px}
.ed-latest-card h3{font-size:15px;line-height:1.4}
.ed-latest-card p{font-size:12.5px}.ed-latest-card time{font-size:12px}
.ed-latest-card .play{width:38px;height:38px;font-size:15px}
/* 큐레이션 카드는 여기서만 한 장씩 — 두 장이면 동그란 이미지가 뭉개진다 */
.ed-curation__track{--per:1}
.ed-curation__arrow.is-prev{left:-6px}.ed-curation__arrow.is-next{right:-6px}
.ed-smart__grid{grid-template-columns:1fr}
.ed-smart-card{min-height:0;padding:18px}
.ed-smart-card strong{font-size:20px}.ed-smart-card p{font-size:14px}
.ed-smart-card .icon{margin-top:10px;font-size:34px}
.ed-time-dot strong{font-size:18px}.ed-time-dot em{font-size:13.5px}
.hed-footer__links{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.hed-footer__brand strong{font-size:30px}
.hed-footer__subscribe form{flex-wrap:wrap}
.hed-footer__subscribe input,.hed-footer__subscribe button{flex:1 1 100%}
}
/* =========================================================================
메인화면 페이지 넘김 (마우스 휠 스크롤 스냅)
-------------------------------------------------------------------------
구역마다 화면 한 장(1366x768 기준)을 넘지 않도록 앞서 높이를 맞춘 것이
전부 이 기능을 위한 준비였다. 휠을 돌리면 다음 구역 경계에 딱 붙는다.
PC에서만 켠다(1101px 이상 — 상단 메뉴가 가로 한 줄로 보이는 구간과
같은 기준). 폰·태블릿은 화면이 좁아 구역 하나가 뷰포트보다 커지기
쉽고, 주소창이 늘었다 줄었다 하며 뷰포트 높이 자체가 흔들려 스냅이
오히려 어색해진다.
scroll-snap-type 은 실제로 스크롤되는 요소, 즉 문서 자체(html)에 준다.
페이지 구조를 별도 스크롤 컨테이너로 감쌀 필요가 없다.
히어로와 통계 카드는 화면에 함께 들어가는 하나의 '첫 페이지'로 본다
(둘을 감싸는 별도 태그가 없어, 통계 카드에는 스냅 지점을 주지 않고
히어로 쪽에만 준다 — 스크롤이 멈추면 가장 가까운 스냅 지점으로 붙으므로
결과는 같다). 이후 다섯 구역(.ed-section)과 푸터가 각각 한 페이지씩이다.
scroll-margin-top 이 헤더 높이(100.19px)보다 조금이라도 크면, 그
차이만큼의 틈이 생긴다. 이 틈은 빈 공간이 아니다 — sticky 헤더는
자기 높이까지만 덮으므로, 그 아래 틈에는 스크롤된 문서가 그대로
비친다. 즉 방금 지나온 구역의 마지막 몇 px(어두운 CTA 카드 끝동
같은 것)가 살짝 보였다 — 간격을 3px 로 줄여도, 20px 로 늘려도
틈이 있는 한 이 현상 자체는 없어지지 않았다.
그래서 간격을 만드는 대신, 헤더 자기 자신을 그만큼 늘린다.
.hud-is-home .hed-header 에만 padding-bottom 을 6px 추가해 헤더의
불투명한 배경이 그 구간까지 완전히 덮게 하고, 헤더 자신의
border-bottom 은 숨긴다 — 안 그러면 그 선이 구역의 border-top 과
같은 자리에서 다시 겹친다. 이제 보이는 선은 구역 쪽 테두리 하나뿐이고,
그 위로는 헤더 배경색만 있어 이전 내용이 비치지 않는다.
다른 화면(검색·컬렉션 등)은 .hud-is-home 이 아니라서 그대로 원래
헤더 테두리를 쓴다.
scroll-snap-stop:always 는 휠을 세게 굴려도 한 구역씩만 넘어가게 한다
(없으면 관성 스크롤이 여러 구역을 건너뛸 수 있다).
스냅 지점은 반드시 홈(.hud-is-home)으로 한정해야 한다. 예전에는 한정하지
않아 컬렉션·검색 같은 다른 화면이 열리자마자 맨 아래로 튀는 문제가 있었다.
.hed-footer 는 tail.php 에 있어 모든 화면에 들어가므로, 그 화면에서는
푸터가 '유일한' 스냅 지점이 된다. mandatory 는 반드시 어느 스냅 지점에
가서 멈춰야 하므로 브라우저가 그 하나뿐인 지점(=푸터)으로 끌고 내려간
것이다. 홈으로 한정하면 다른 화면에는 스냅 지점이 아예 없고, 지점이
없으면 mandatory 여도 평소처럼 스크롤된다(그래서 html 쪽은 그대로 둬도
된다 — 다만 뜻이 분명하도록 :has() 로 홈일 때만 걸어 둔다). */
@media (min-width: 1101px){
html:has(.hud-is-home){scroll-snap-type:y mandatory}
.hud-is-home .arc-hero,
.hud-is-home .ed-section,
.hud-is-home .hed-footer{
scroll-snap-align:start;
scroll-snap-stop:always;
scroll-margin-top:107px;
}
.hud-is-home .hed-header{
padding-bottom:6px;
border-bottom-color:transparent;
}
}
/* ============================================================================
폭별 마무리 — 실제로 재 보고 남은 두 군데를 막는다
----------------------------------------------------------------------------
폭 19가지를 훑어 가로 넘침을 쟀더니 320px 과 900px 두 곳에서만 남았다.
========================================================================== */
/* 격자 칸은 기본값이 min-width:auto 라 "안의 내용보다 좁아지지 못한다".
긴 낱말이나 넓은 자식이 하나만 있어도 칸이 화면 밖으로 밀린다.
실제로 320px 에서 히어로 왼쪽 칸이 7px 넘쳤다. 줄어들 수 있게 풀어 준다. */
.arc-hero__inner > *,
.ed-curation > *,
.ed-latest > *,
.ed-wall > *,
.ed-smart > *,
.ed-timeline > *,
.ed-place > *{min-width:0}
/* 옆으로 넘기는 띠는 칸 밖으로 흐르는 것이 정상이지만, 그 흘러넘친 폭이
문서 전체 가로폭으로 새어 나가면 페이지에 가로 스크롤이 생긴다.
900px 에서 큐레이션 카드가 4px 새고 있었다. 바깥 구역에서 한 번 더 막는다. */
.ed-curation,
.ed-latest,
.ed-wall{overflow-x:clip}
/* 아주 좁은 화면에서는 좌우 여백을 줄인다 — 40px 씩 떼면 320px 화면에
남는 폭이 240px 뿐이라 글이 갇힌다. */
@media (max-width: 400px){
.editorial-home{--hud-edge:18px;padding-left:18px;padding-right:18px}
.hed-header__inner{padding-left:18px;padding-right:18px}
}
/* 아주 좁은 폰. HUDMEDIA 는 한 단어라 줄바꿈이 안 되므로,
글자 크기를 줄이고 좌우 여백을 좁혀야 오른쪽 아이콘을 덮지 않는다. */
@media (max-width: 360px){
.hed-header__inner{padding-left:12px;padding-right:12px}
.hed-logo strong{font-size:17px}
.hed-logo span{font-size:11px}
}
/* 마지막 4px.
900px 에서 문서가 4px 더 넓게 잡힌다(clientWidth 885 / scrollWidth 889).
옆으로 넘기는 띠들이 칸 밖으로 흐르면서 남긴 자투리인데, 어느 요소
하나를 짚어 고치기보다 본문 칸에서 한 번 끊는 편이 확실하다.
overflow-x:clip 은 hidden 과 달리 스크롤 컨테이너를 만들지 않아서
안쪽의 position:sticky 가 그대로 동작한다. 헤더는 이 칸 바깥에 있어
애초에 영향을 받지 않는다. */
/* 클리핑을 컨테이너가 아니라 body 에 둔다 — 두 가지를 동시에 해결한다.
1) 옆으로 넘기는 띠들이 남기던 자투리 가로폭 (원래 목적)
2) 히어로 풀블리드 — 사진을 100vw 계산으로 화면 끝까지 빼는데, 100vw 에는
스크롤바 폭이 포함되어 그만큼 오른쪽으로 초과한다. 그 초과분을 여기서
잘라낸다. 컨테이너(.editorial-home)에서 자르면 1600px 초과 화면에서
풀블리드 자체가 컨테이너 모서리에서 잘려 버린다 — 그래서 옮겼다.
clip 은 hidden 과 달리 스크롤 컨테이너를 만들지 않아 html 의
scroll-snap 과 sticky 헤더가 그대로 동작한다.
html 에도 같이 건다 — body 만 자르면 스크롤바 폭만큼의 초과가 문서
scrollWidth 에 남아 환경에 따라 미세한 가로 흔들림이 생길 수 있다. */
html,body{overflow-x:clip}
/* ============================================================================
1단 구간(1100px 이하)의 구역 소개칸 — 세로 쌓기 대신 한 줄로
----------------------------------------------------------------------------
2단일 때 왼쪽 기둥이던 소개칸이 1단이 되면 위로 올라오는데, 세로로
쌓인 채(눈표/제목/설명/버튼) 그대로 두면 이 칸 혼자 화면 반을 먹었다.
제목 옆에 설명을 붙이고 버튼도 같은 줄 오른끝에 둔다.
폭이 더 좁아지면 flex-wrap 이 설명·버튼을 자연스럽게 다음 줄로 내린다.
========================================================================== */
@media (max-width: 1100px){
.ed-section__aside{
display:flex;flex-wrap:wrap;align-items:center;
column-gap:22px;row-gap:10px;
}
.ed-section__aside .ed-kicker{flex:1 1 100%;margin:0}
.ed-section__aside h2{flex:0 0 auto}
/* 두 줄짜리 제목('사진으로
보는 해운대')은 한 줄로 편다 —
가로 배치에서 줄바꿈 지점은 폭이 정하게 둔다 */
.ed-section__aside h2 br{display:none}
/* 설명은 "한 줄로 다 들어가면 제목 옆에, 아니면 통째로 아랫줄로".
220px 같은 숫자를 못박으면 그 언저리 폭의 기기에서 제목 옆에 낀 채
두 줄로 접힌다 — 화면마다 제각각으로 보이던 까닭이다(2026-08-30).
max-content 는 "이 글이 한 줄일 때의 폭"이라, 자리가 모자라면
flex-wrap 이 통째로 아랫줄로 내리고 거기서 다시 접는다. 글이 길든
짧든, 기기가 몇 px 이든 스스로 맞는다. */
.ed-section__aside p{flex:0 1 max-content;margin:0;max-width:none}
.ed-section__aside .ed-outline-btn{flex:0 0 auto;margin:0 0 0 auto}
}
/* ==========================================================================
* 회원 화면 (2026-08-25)
* --------------------------------------------------------------------------
* 이 테마에는 회원 스킨이 없어(skin 폴더 자체가 없다) 그누보드 기본 스킨이
* 그대로 나온다. 그 스킨은 분홍(#f2838f) 띠와 파랑 체크박스라 아카이브
* 화면과 따로 놀았다. 겉모습만 테마 색으로 덮는다.
*
* 선택자 앞에 body 를 붙인 이유
* 기본 스킨의 style.css 가 테마 CSS 보다 나중에 실린다. 같은 굵기의
* 선택자면 나중 것이 이기므로, 한 단계만 굵게 해서 넘어선다.
* !important 는 쓰지 않는다 — 나중에 이 화면을 손볼 때 또 !important 로
* 덮어야 하는 싸움이 시작된다.
*
* 스킨 파일은 건드리지 않는다 — 로그인·가입 동작과 약관·본인확인 처리가
* 거기 들어 있다. 특히 동의 체크박스는 스킨이 자리를 절대좌표로 잡고
* label 안의 span 을 상자처럼 그린다. 그 방식은 그대로 두고 색만 바꾼다.
*
* 색은 테마 변수를 쓰므로 「색상 설정」에서 색을 바꾸면 함께 따라간다.
* ========================================================================== */
body #fregister,
body #fregisterform,
body #register_form,
body #mb_login,
body #mb_confirm,
body #find_info{
max-width: 760px;
margin: 40px auto 72px;
padding: 0 20px;
color: var(--text);
}
/* ---- 안내 띠 — 기본 스킨은 분홍이다 ---- */
body #fregister p{
position: relative;
height: auto;
margin: 0 0 18px;
padding: 15px 18px;
border: 1px solid var(--line);
border-radius: 12px;
background: #f6f4f0;
color: var(--text);
font-size: 14px;
font-weight: 600;
line-height: 1.7;
text-align: left;
}
body #fregister p:before{ display: none; }
body #fregister p i{ margin-right: 6px; color: var(--navy); }
/* ---- 약관 상자 ---- */
body #fregister section{
position: relative;
margin: 0 0 18px;
border: 1px solid var(--line);
border-radius: 14px;
background: var(--card);
overflow: hidden;
}
body #fregister h2{
margin: 0;
padding: 17px 22px;
border-bottom: 1px solid var(--line);
background: #faf8f5;
color: var(--navy);
font-size: 15px;
font-weight: 700;
text-align: left;
}
body #fregister textarea{
display: block;
width: 100%;
height: 190px;
padding: 18px 22px;
border: 0;
background: var(--card);
color: var(--text);
font-size: 13.5px;
line-height: 1.8;
resize: vertical;
}
body .fregister_terms div{ padding: 18px 22px; background: var(--card); }
/* ---- 동의 체크박스 ----
* 스킨이 잡아 둔 자리(오른쪽 위)와 방식(label 안의 span 을 상자로)은 그대로
* 두고 색만 바꾼다. 기본은 파랑(#3a8afd)이라 테마와 어긋난다.
*
* fieldset 은 테두리를 지운다. 이 테마에는 fieldset 초기화가 없어 브라우저가
* 기본 테두리를 그렸고, 동의 칸이 빈 fieldset 이라 체크박스 옆에 정체 모를
* 작은 네모가 하나 더 보였다. */
body #fregister fieldset,
body #fregisterform fieldset,
body #mb_login fieldset,
body #find_info fieldset{ margin: 0; padding: 0; border: 0; }
body .fregister_agree input[type="checkbox"] + label span{
border-color: #b9b2a6;
border-radius: 5px;
background: var(--card);
}
body .fregister_agree input[type="checkbox"]:checked + label span{
border-color: var(--navy);
background-color: var(--navy);
}
body .fregister_agree input[type="checkbox"] + label{ color: var(--muted); }
body .fregister_agree input[type="checkbox"] + label:hover{ color: var(--navy); }
body .fregister_agree input[type="checkbox"]:checked + label{ color: var(--text); }
body #fregister_chkall{
margin: 0 0 22px;
border: 1px solid var(--line);
border-radius: 12px;
background: #faf8f5;
color: var(--navy);
font-weight: 700;
line-height: 52px;
}
/* ---- 가입 폼 · 로그인 · 비밀번호 찾기 ---- */
body #fregisterform .tbl_frm01,
body #mb_login .tbl_frm01,
body #find_info .tbl_frm01{
border: 1px solid var(--line);
border-radius: 14px;
background: var(--card);
overflow: hidden;
}
body #fregisterform th,
body #mb_login th,
body #find_info th{
padding: 14px 18px;
background: #faf8f5;
color: var(--navy);
font-size: 14px;
font-weight: 700;
text-align: left;
white-space: nowrap;
}
body #fregisterform td,
body #mb_login td,
body #find_info td{
padding: 12px 18px;
border-top: 1px solid var(--line);
color: var(--text);
font-size: 14px;
line-height: 1.7;
}
body #fregisterform .frm_input,
body #mb_login .frm_input,
body #find_info .frm_input{
height: 44px;
padding: 0 14px;
border: 1px solid var(--line);
border-radius: 10px;
background: var(--card);
color: var(--text);
font-size: 14px;
}
body #fregisterform textarea.frm_input{ height: auto; padding: 12px 14px; }
body #fregisterform .frm_input:focus,
body #mb_login .frm_input:focus,
body #find_info .frm_input:focus{
border-color: var(--navy);
outline: 3px solid rgba(0, 0, 0, .10);
outline-offset: 0;
}
body #fregisterform .frm_info,
body #fregisterform .cert_desc{
display: block;
margin: 6px 0 0;
color: var(--muted);
font-size: 12.5px;
line-height: 1.6;
}
/* ---- 버튼 ---- */
body #fregister .btn_confirm,
body #fregisterform .btn_confirm,
body #mb_login .btn_confirm,
body #find_info .btn_confirm{
display: flex;
justify-content: center;
gap: 10px;
margin: 26px 0 0;
}
body #fregister .btn_confirm .btn_submit,
body #fregisterform .btn_confirm .btn_submit,
body #mb_login .btn_confirm .btn_submit,
body #find_info .btn_confirm .btn_submit,
body #fregister .btn_confirm .btn_close,
body #fregisterform .btn_confirm .btn_close,
body #mb_login .btn_confirm .btn_close,
body #find_info .btn_confirm .btn_close{
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 140px;
height: 50px;
padding: 0 26px;
border: 1px solid var(--navy);
border-radius: 999px;
font-size: 15px;
font-weight: 700;
text-decoration: none;
cursor: pointer;
}
body #fregister .btn_confirm .btn_submit,
body #fregisterform .btn_confirm .btn_submit,
body #mb_login .btn_confirm .btn_submit,
body #find_info .btn_confirm .btn_submit{ background: var(--navy); color: #fff; }
body #fregister .btn_confirm .btn_submit:hover,
body #fregisterform .btn_confirm .btn_submit:hover,
body #mb_login .btn_confirm .btn_submit:hover,
body #find_info .btn_confirm .btn_submit:hover{ background: var(--navy-dark); }
body #fregister .btn_confirm .btn_close,
body #fregisterform .btn_confirm .btn_close,
body #mb_login .btn_confirm .btn_close,
body #find_info .btn_confirm .btn_close{ background: var(--card); color: var(--navy); }
/* ---- 수신 동의 묶음 ---- */
body #fregisterform .chk_box{ margin: 0 0 6px; }
body #fregisterform .consent-line{ margin: 0 0 8px; line-height: 1.7; }
body #fregisterform .consent-date{ color: var(--muted); font-size: 12.5px; }
@media (max-width: 720px){
body #fregister, body #fregisterform, body #register_form,
body #mb_login, body #mb_confirm, body #find_info{ margin: 24px auto 48px; }
body #fregisterform th, body #mb_login th, body #find_info th{
display: block; padding-bottom: 6px; border-top: 1px solid var(--line);
}
body #fregisterform td, body #mb_login td, body #find_info td{ display: block; border-top: 0; }
body #fregister .btn_confirm, body #fregisterform .btn_confirm,
body #mb_login .btn_confirm, body #find_info .btn_confirm{ flex-direction: column; }
}
/* ── 현재 위치 표시(빵부스러기)를 모든 페이지에서 감춘다 (2026-08-28) ──────
「홈 › 시민 제보 › 사진·영상 제보」처럼 위쪽에 붙던 줄이다.
스킨마다 제 나름의 이름으로 넣어 두어서(arc-crumb, hmr-crumb, arc-gj-crumb,
arc-st-crumb, crumb, arc-search-breadcrumb …) 파일을 하나씩 고치면 열다섯
군데를 손봐야 하고, 새 스킨을 만들 때 또 빠뜨리기 쉽다. 한 곳에서 덮는
편이 낫고, 되돌릴 때도 이 블록만 지우면 된다.
!important 를 쓰는 이유 — 이 파일은 스킨 CSS 보다 먼저 실려서, 그냥
두면 뒤에 오는 스킨 규칙(display:flex 등)에 밀린다. */
.arc-crumb,
.hmr-crumb,
.arc-gj-crumb,
.arc-st-crumb,
.crumb,
.arc-breadcrumb,
.arc-search-breadcrumb { display:none !important; }
/* ── 폰에서 로고가 두 줄로 접히던 것 (2026-08-28) ──────────────────────────
375px 화면에서 「해운대구 미디어센터」가 「해운대구 미디어 / 센터」로 접혀
머리가 100px 까지 높아졌다. 로고 자리가 95px 밖에 안 남아서다.
글자만 줄여서는 안 풀린다 — 11px 로 줄여도 폭이 105px 라 여전히 모자란다.
자리를 만들어 주는 쪽이 맞다. 오른쪽 아이콘 다섯 개가 46px 씩 차지하고
있었는데, 손가락으로 누르기에 38px 이면 충분하다(접근성 권장 크기가 대략
그 언저리다). 여덟 픽셀씩 다섯 개면 40px 가 로고로 돌아온다.
결과 — 부제가 한 줄에 들어가고 머리가 낮아진다. 기관 이름을 지우지 않고
푸는 방법이라 이쪽을 골랐다. */
@media (max-width: 560px) {
.hed-tool-icon, .hed-lang { width:38px; height:38px; }
.hed-menu-button { width:38px; height:38px; }
.hed-lang { font-size:14px; }
.hed-logo span { white-space:nowrap; font-size:12px; }
.hed-logo strong { font-size:22px; }
}
/* 아주 좁은 폰(360px 이하)은 아래쪽 기존 규칙이 글자를 한 번 더 줄인다 */
@media (max-width: 360px) {
.hed-tool-icon, .hed-lang, .hed-menu-button { width:34px; height:34px; }
.hed-logo span { font-size:10.5px; }
}
/* ── 게시판 배너 여섯 장 (2026-08-30) ──────────────────────────────────────
첫 화면 맨 위. 예전에는 이 자리에 아카이브 현황(숫자)이 있었는데, 처음 온
사람에게 숫자는 어디로 가야 할지 알려 주지 않는다. 갈 곳을 먼저 보여 주고
숫자는 장소 아카이브 아래로 내렸다.
한 칸의 차례 — 번호 → 가는 선 → 아이콘 → 이름 → 한 줄 설명.
번호와 선은 여섯이 한 벌임을 보이게 하는 표시다. 선은 칸 안에서 번호를
나머지와 떼어 놓는 구실만 하므로 짧고 옅게 둔다(구역과 구역을 가르던 그
가로선과는 다른 것이다 — 그쪽은 없앴다).
여섯이 한 줄에 선다. 줄이 나뉘면 뒷줄이 덤처럼 보이는데, 여섯 곳 모두 같은
무게의 입구이므로 한 줄이라야 그 뜻이 산다. 좁아지면 3열 → 2열로 접힌다. */
/* 왼쪽 소개칸 + 오른쪽 배너 — 큐레이션 구역과 같은 틀(270px + 나머지) */
/* 구역에 옅은 바탕을 깐다.
흰 바탕에 흰 카드라 테두리 하나로만 버티고 있었고, 그래서 "숨겨진 듯"
보였다. 바탕을 한 겹 깔면 카드가 그 위에 떠오른다 — 카드를 진하게 만드는
것보다 이쪽이 낫다. 카드를 어둡게 하면 아이콘의 회색이 묻힌다. */
.ed-shortcuts{
display:grid;grid-template-columns:230px minmax(0,1fr);gap:26px;
margin-top:30px;padding:30px 28px;border-radius:22px;
background:linear-gradient(180deg,#f7f9fb 0%,#f2f5f8 100%);
align-items:center;
}
/* 오른쪽은 한 줄에 여섯. 왼쪽 소개칸을 230px 로 줄이고 칸 사이도 좁혀
한 칸이 140px 남짓 나오게 맞췄다 — 여섯이 한 줄에 서야 여섯 곳이 같은
무게로 읽힌다. */
.ed-banners{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.ed-banner{
display:flex;flex-direction:column;align-items:center;text-align:center;
padding:20px 8px 22px;border-radius:14px;background:#fff;
border:1px solid #fff;
box-shadow:0 2px 6px rgba(17,34,51,.05), 0 10px 24px rgba(17,34,51,.06);
transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.ed-banner:hover{transform:translateY(-5px);
box-shadow:0 4px 10px rgba(17,34,51,.06), 0 18px 38px rgba(17,34,51,.12);
border-color:var(--hv,#fff)}
.ed-banner:focus-visible{outline:3px solid rgba(11,52,81,.28);outline-offset:3px}
/* 번호 + 그 아래 가는 선 */
/* 번호 — 사이트가 청록 계열이라 번호도 그 계열의 회색으로 둔다(청회색이면
카드 안에 파랑과 청록이 섞인다). 손을 얹으면 포인트색으로 살아난다. */
.ed-banner__no{
display:block;font-size:21px;font-weight:800;letter-spacing:.06em;line-height:1;
color:#8ba1a4;transition:color .22s ease;
}
.ed-banner:hover .ed-banner__no{color:var(--hv-ink,#2e2b28)}
.ed-banner__no::after{
content:'';display:block;width:48px;height:1px;margin:12px auto 0;
background:#dfe8e8;transition:background .22s ease, width .22s ease;
}
/* 선도 함께 — 번호만 색이 바뀌면 아래 선이 혼자 남는다 */
.ed-banner:hover .ed-banner__no::after{background:var(--hv-ink,#4a4744);opacity:.45;width:60px}
/* 아이콘 — 그림은 검은 실루엣 한 벌이고 색은 여기서 입힌다(마스크).
그래야 색을 바꿀 때 그림을 다시 만들지 않는다. 색은 보내주신 그림의 회색
계열이되 두 단계 짙게 잡았다(원본 #878485 → #555253). 흰 카드 위에서는
원본대로면 묽어 보인다. */
/* 아이콘 자리 — 동그란 옅은 바탕을 깔아 무게를 준다.
선 그림 하나만 떠 있으면 카드 가운데가 비어 보인다. 그림 자체는 손대지
않고(주신 회색 그대로) 뒤에 바탕만 둔다. */
.ed-banner__figure{
display:flex;align-items:center;justify-content:center;
width:86px;height:86px;margin-top:18px;border-radius:50%;
background:#eef2f6;
transition:background .22s ease, transform .22s ease;
}
.ed-banner__icon{
display:block;width:56px;height:56px;
background:#555253;
-webkit-mask:var(--icon) center/contain no-repeat;
mask:var(--icon) center/contain no-repeat;
transition:background .22s ease;
}
/* 손을 얹었을 때 (2026-08-30)
칸마다 파스텔 한 가지씩(--hv). 짙게 칠해 봤더니 탁했고 한 색으로 통일하면
여섯이 구별되지 않아, 옅은 색을 하나씩 나눠 줬다.
파스텔 위에 흰 그림을 올리면 보이지 않으므로, 그림은 같은 계열의 짙은
색(--hv-ink)이 된다. 색은 index.php 의 배너 목록에 한 줄씩 적혀 있다. */
.ed-banner:hover .ed-banner__figure{
background:var(--hv,#eef2f6);
box-shadow:0 8px 18px rgba(30,25,18,.10);
transform:scale(1.06);
}
.ed-banner:hover .ed-banner__icon{background:var(--hv-ink,#2e2b28)}
.ed-banner strong{margin-top:20px;font-size:14.5px;font-weight:800;letter-spacing:-.03em;
color:var(--navy);line-height:1.3;word-break:keep-all}
.ed-banner em{margin-top:7px;font-style:normal;font-size:11.5px;color:var(--muted);
line-height:1.45;word-break:keep-all}
/* 아카이브 현황이 아래로 내려오면서 위 구역과 붙지 않게 사이를 띄운다 */
.ed-stats--below{margin-top:34px}
/* 접히는 차례
1280 이상 왼쪽 소개칸 + 한 줄 여섯
1000~1279 소개칸을 위로 (옆에 두면 칸이 115px 까지 좁아진다)
760~999 한 줄에 셋
760 미만 한 줄에 둘 */
@media (max-width: 1279px){
.ed-shortcuts{grid-template-columns:1fr;gap:18px;padding-top:26px}
.ed-section__aside p{max-width:none}
}
@media (max-width: 999px){
.ed-banners{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* 폰 — 판의 옆 여백을 줄여 글이 설 자리를 만든다(2026-08-30).
좌우로 28px 씩 물고 있던 여백에 페이지 여백 18px 이 더해져, 344px 화면
에서 쓸 수 있는 폭이 252px 뿐이었다. "자주 찾는 곳으로 한 번에 이동
하세요."가 제목 옆에 설 자리가 없어 아랫줄로 밀린 까닭이다.
좁은 화면일수록 여백이 아깝다 — 16px 이면 판의 테두리는 충분히 읽힌다. */
@media (max-width: 640px){
.ed-shortcuts{padding:24px 16px}
.ed-section__aside{column-gap:10px}
.ed-section__aside p{font-size:15px}
}
@media (max-width: 760px){
.ed-banners{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.ed-banner{padding:18px 10px 20px}
.ed-banner__no{font-size:20px}
.ed-banner__no::after{width:52px;margin-top:11px}
.ed-banner__figure{width:76px;height:76px;margin-top:16px}
.ed-banner__icon{width:48px;height:48px}
.ed-banner strong{font-size:15px;margin-top:19px}
.ed-banner em{font-size:11.5px;margin-top:7px}
}
/* 폰 — 바로가기 구역에서 겉치레를 걷어낸다 (2026-08-30)
----------------------------------------------------------------------------
폰 첫 화면에는 필요한 것이 한눈에 들어와야 한다. 이 구역이 자리를 많이
먹던 까닭은 내용이 아니라 겉치레였다 — 소개칸 석 줄, 카드마다 붙은 번호와
밑줄, 카드를 받치던 회색 판.
1) 소개칸(QUICK LINKS / 바로가기 / 설명)은 화면 밖으로 물린다. 지우지
않는 것은 화면 낭독기에 구역 이름이 있어야 목록을 건너뛸 수 있어서다.
2) 번호(01·02…)와 그 아래 가는 선은 뺀다. 여섯이 한 벌임을 보이려던
표시인데, 폰에서는 두 칸씩 석 줄로 서므로 번호 없이도 한 벌로 읽힌다.
3) 판의 바탕색과 안쪽 여백을 없앤다. 흰 바탕에 흰 카드가 묻히지 않게
깔았던 것인데, 카드에 그림자가 있어 판이 없어도 떠 보인다.
이 블록은 760px 규칙보다 뒤에 있어야 한다 — 선택자 굵기가 같아서, 앞에
두면 760px 쪽 값(그림 위 여백 16px 따위)에 진다.
641px 이상(PC·태블릿)은 손대지 않는다. */
@media (max-width: 640px){
.ed-shortcuts .ed-section__aside{
position:absolute;left:-9999px;top:auto;
width:1px;height:1px;overflow:hidden;
}
.ed-shortcuts{
margin-top:8px;padding:0;gap:0;
background:none;border-radius:0;
}
.ed-banner__no{display:none}
/* 한 줄에 셋, 두 줄로 여섯 (2026-08-30)
------------------------------------------------------------------------
여섯이 한 화면에 다 들어와야 "한눈에"가 된다. 셋씩 놓으려면 칸이 좁아
지므로 여백을 깎아 그만큼을 글자에 준다 — 칸 사이 6px, 카드 안쪽 좌우
4px. 375px 화면에서 한 칸이 109px, 글이 쓸 폭은 101px 남는다.
이름 크기를 숫자로 못박지 않고 clamp 로 폭에 맡긴 까닭:
13px 로 고정하면 360px 이하 기기에서 '사진찾아가세요'가 두 줄로
접힌다. 폭을 따라 줄어들게 두면 320px 기기까지 한 줄로 선다. */
.ed-banners{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.ed-banner{padding:12px 4px 14px}
.ed-banner__figure{width:62px;height:62px;margin-top:0}
.ed-banner__icon{width:38px;height:38px}
.ed-banner strong{margin-top:10px;font-size:clamp(11.5px,3.4vw,13px)}
/* 설명글은 뺀다 — 이름만으로 어디인지 읽힌다. 카드가 한 줄만큼 낮아진다 */
.ed-banner em{display:none}
/* 사진과 첫 줄 사이도 바짝 붙인다 (사진 아래 22px → 12px) */
.arc-hero{padding-bottom:12px}
}
/* 폰 — 오늘의 큐레이션 (2026-08-30)
----------------------------------------------------------------------------
1) 구역 소개글은 뺀다. 제목 '오늘의 큐레이션'이 이미 같은 말을 한다.
2) 한 줄에 두 장. 한 장씩 세로로 쌓이면 카드 하나가 화면 반을 먹어
무엇이 있는지 훑어볼 수가 없다.
큐레이션이 셋 이상이면 격자가 아니라 옆으로 넘기는 띠가 되는데,
그쪽은 --per(한 번에 보일 장수)로 정한다. @container 규칙과 선택자
굵기가 같으므로 파일에서 뒤에 오는 이 줄이 이긴다.
3) 칸이 좁아진 만큼 동그란 사진과 글자를 줄이고, 카드 소개글은 뺀다 —
제목과 자료 수만 있으면 어떤 묶음인지 가려낼 수 있다.
641px 이상(PC·태블릿)은 손대지 않는다. */
@media (max-width: 640px){
.ed-curation .ed-section__aside p:not(.ed-kicker){display:none}
.ed-curation__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.ed-curation__viewport .ed-curation__track{--per:2;--gap:10px}
.ed-cur-card{padding:16px 10px 18px;border-radius:16px}
.ed-cur-card__body{gap:8px}
.ed-cur-card__thumb{width:96px;height:96px}
/* 원의 중심 64px = 카드 위여백 16px + 반지름 48px */
.ed-cur-card__bg{clip-path:circle(48px at 50% 64px)}
.ed-cur-card strong{font-size:15px}
.ed-cur-card em{display:none}
.ed-cur-card small{font-size:11.5px}
}
/* 손가락에는 hover 가 없다 (2026-08-30)
----------------------------------------------------------------------------
그런데 폰에서 카드를 한 번 누르면 :hover 가 걸린 채 남아, 사진이 카드
전체로 퍼진 상태로 굳는다 — 글자가 사진 위에 겹쳐 읽히지 않는다.
마우스가 없는 기기(hover:none)에서는 퍼지는 효과를 아예 끈다. */
@media (hover:none) and (max-width: 640px){
.ed-cur-card:hover,
.ed-cur-card:not(.has-bg):hover{transform:none;box-shadow:none;border-color:var(--line)}
.ed-cur-card:hover .ed-cur-card__bg{clip-path:circle(48px at 50% 64px)}
.ed-cur-card:hover .ed-cur-card__bg:after{opacity:0}
.ed-cur-card:hover strong{color:inherit}
.ed-cur-card:hover em,.ed-cur-card:hover small{color:var(--muted)}
}
/* 폰 — 남은 소개글과 구역 버튼 (2026-08-30) */
@media (max-width: 640px){
/* 최신 아카이브·사진으로 보는 해운대의 소개글도 뺀다 —
큐레이션과 같은 이유다. 구역 제목이 이미 같은 말을 한다. */
.ed-latest .ed-section__aside p:not(.ed-kicker),
.ed-wall .ed-section__aside p:not(.ed-kicker){display:none}
/* 구역 버튼('전체 컬렉션 보기'·'더보기')이 구역 제목만큼 커 보였다.
소개글이 빠지면서 제목 옆 한 줄에 둘만 남아 더 두드러진다.
누를 자리는 남기되(높이 36px) 글자와 여백을 줄인다. */
.ed-section__aside .ed-outline-btn{
min-height:36px;padding:0 12px;gap:6px;
font-size:12.5px;margin-top:0;
}
}
/* 폰 — 구역과 구역 사이 (2026-08-30)
----------------------------------------------------------------------------
구역마다 위아래 34px 을 물고 있어, 이어 붙으면 사이가 68px 이 됐다.
큐레이션 카드 아래와 'LATEST ARCHIVE' 사이가 유난히 비어 보이던 까닭이다.
소개글을 걷어내 구역 머리가 짧아진 만큼 사이도 줄인다 — 18px 씩, 사이
36px. 눈표(LATEST ARCHIVE)가 다음 구역의 시작을 알려 주므로 이 정도면
구역이 섞여 읽히지 않는다.
큐레이션만 위쪽을 조금 더 둔다 — 바로 위 바로가기 판이 여백 없이
카드로 끝나 있어, 18px 이면 카드에 붙어 보인다.
641px 이상(PC·태블릿)은 손대지 않는다. */
@media (max-width: 640px){
/* :not(.ed-shortcuts) — 바로가기 판은 위에서 여백 0 으로 두었다.
.ed-section 만 쓰면 굵기가 같고 이 줄이 뒤라 그 값을 덮어 버린다. */
.ed-section:not(.ed-shortcuts){padding:18px 0}
.ed-section.ed-curation{padding-top:26px}
}
/* 폰 — 구역 제목과 버튼을 한 줄에 (2026-08-30)
----------------------------------------------------------------------------
'사진으로 보는 해운대'만 버튼이 아랫줄로 내려갔다. 재 보니 375px 화면에서
제목 215.6px + 사이 10px + 버튼 114.5px = 340.1px 으로, 쓸 수 있는 339px 을
1.1px 넘겼다. 딱 그만큼이 모자라 한 줄이 두 줄이 된 것이다.
1px 을 깎는 식으로는 기기가 바뀌면 또 어긋난다. 제목이 폭을 따라 줄어들게
둔다 — 지금은 4.6vw 로 적혀 있지만 아래끝이 24px 이라 522px 아래에서는
줄지 않고 24px 에 멈춰 있었다. 5.6vw / 아래끝 17px 로 바꾸면 320px 기기까지
제목·버튼이 한 줄에 선다. 375px 에서 24px → 21px 로, 다른 구역 제목도 함께
조금 작아진다(네 구역이 같은 크기를 쓰므로 어긋나 보이지 않는다).
사이 여백과 버튼 여백에서도 조금씩 덜어 낸다.
641px 이상(PC·태블릿)은 손대지 않는다. */
@media (max-width: 640px){
.ed-section__head h2,
.ed-section__aside h2{font-size:clamp(17px,5.6vw,24px)}
.ed-section__aside{column-gap:8px}
.ed-section__aside .ed-outline-btn{padding:0 10px}
}
/* 폰 — 두 구역은 통째로 감춘다 (2026-08-30)
----------------------------------------------------------------------------
폰 첫 화면은 짧을수록 좋다.
AI 아카이브 스마트 검색 — 설명이 길고, 같은 일을 맨 위 검색 칸에서도
할 수 있다.
기록의 시간 — 시대별 다섯 칸이 세로로 늘어서 화면 두 장을 먹는다.
PC 에서는 둘 다 그대로 둔다. 내려받는 것까지 막지는 않는다 — 화면에서만
감춘다. */
@media (max-width: 640px){
.ed-smart,
.ed-timeline{display:none}
}
/* 폰 — 장소 아카이브는 행정구역만 (2026-08-30)
----------------------------------------------------------------------------
이 구역은 지도 + 목록 두 묶음(행정구역·촬영지)이라 폰에서 세로로 길게
늘어졌다. 동 이름은 목록이 고정이라 찾아 들어가는 길이 되지만, 촬영지는
하루 두 번 도는 소개 성격이고 지도는 작은 화면에서 손가락에 걸린다.
행정구역 한 묶음만 남긴다.
묶음은 data-group 으로 가려낸다(index.php 에서 붙인다). :nth-child 로
세지 않는 까닭은, 묶음이 늘거나 순서가 바뀌면 엉뚱한 것이 사라져서다.
641px 이상(PC·태블릿)은 손대지 않는다. */
@media (max-width: 640px){
.ed-place .ed-section__aside p:not(.ed-kicker){display:none}
.ed-place__group[data-group="shoot"]{display:none}
.ed-map-panel{display:none}
}