/* 헤더 두께 · 로고 크기 = 홈과 같은 값(홈 편지 10-10 v2 6절 · 오너 2026-10-10 '모든 쪽 같은 크기'): PC 60px · 로고 32px / 900px 이하 52px · 26px.
   389px 이하 폰은 로고 22px — 목록 헤더 단추(편지 · 종 · 언어)가 320 ~ 374 폭에서 한 줄을 넘기지 않게(2026-10-05 실측).
   로고 · RUN 글자 높이는 이 한 곳(--logo-h)이 정하고 쪽마다 덮어쓰지 않는다. RUN 글자 = 로고 x 123/172. */
:root{--head-h:60px;--logo-h:32px}
@media(max-width:900px){:root{--head-h:52px;--logo-h:26px}}
@media(max-width:389px){:root{--logo-h:22px}}
header{background:var(--white);border-bottom:1px solid var(--line);height:var(--head-h);box-sizing:border-box}
header .wrap{display:flex;align-items:center;height:100%;flex-wrap:nowrap;gap:8px}
.head-acts{display:flex;align-items:center;gap:8px;margin-inline-start:auto}
.hcta~.head-acts{margin-inline-start:8px}
.langbtn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:0;border-radius:0;background:transparent;cursor:pointer;padding:0}   /* 점프와 같은 언어 아이콘 단추 */
.langbtn img{width:24px;height:24px;display:block}
.langwrap{position:relative}
.langmenu{position:absolute;inset-inline-end:0;top:44px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 2px 12px rgba(122,79,42,.10);width:220px;padding:8px;display:none;z-index:30}
.langmenu.open{display:block}
.langmenu a,.langmenu button{display:flex;width:100%;justify-content:space-between;gap:8px;border:0;background:transparent;padding:8px 10px;border-radius:10px;font:inherit;font-size:14px;cursor:pointer;text-align:start;text-decoration:none;color:var(--ink)}
.langmenu a:hover,.langmenu button:hover{background:var(--mint-soft)}
.langmenu .cur{font-weight:700;color:var(--mint-ink)}
/* 상표 묶음은 언어 방향과 상관없이 'wag:zak RUN'(오른쪽에서 왼쪽 언어에서 뒤집히던 것 — 10-10b) */
.brand{display:flex;align-items:flex-start;gap:8px;direction:ltr;flex:none}
.brand a{display:block;line-height:0}
.brand img{height:var(--logo-h);width:auto;display:block}
.brand img.word{height:calc(var(--logo-h) * 123 / 172);transform-origin:50% 50%;animation:wob 10s ease-in-out infinite}
@keyframes wob{0%,86%{transform:none}89%{transform:rotate(-6deg) translate(-1px,1px)}92%{transform:rotate(6deg) translate(1px,-1px)}95%{transform:rotate(-3deg) translate(0,1px)}98%{transform:rotate(2deg)}100%{transform:none}}
@media(prefers-reduced-motion:reduce){.brand img.word{animation:none}}
.menu{margin-inline-start:auto;display:flex;align-items:center;gap:2px;flex:none}
.menu a,.menu .nsoon{text-decoration:none;color:var(--muted);font-weight:700;font-size:15px;padding:8px 11px;border-radius:999px;white-space:nowrap}
.menu a:hover,.menu a.on{background:var(--hi);color:var(--mint)}
/* 한글·ABC = 아직 안 연 칸 — 누름 없음 · '11월 오픈'은 글자 위에 작게 얹어 폭을 늘리지 않는다(홈 header-minimal.css '메뉴 1차') */
.nsoon{position:relative;cursor:default;opacity:.85}
.nsoon small{position:absolute;left:50%;top:-5px;transform:translateX(-50%);font-size:9.5px;line-height:1.35;font-weight:800;background:#4b2a7b;color:#fff;border-radius:6px;padding:0 5px;white-space:nowrap;pointer-events:none}
/* 주소가 있는 '오픈 예정' 칸(한글·ABC — 오너 10-11 '헤더에서 눌러도 연결') = 링크 + 같은 작은 표시(홈 --soon --open) */
.nsoon.open,.fsoon.open{cursor:pointer;opacity:1}
.hcta{flex:none;display:inline-flex;align-items:center;justify-content:center;text-align:center;text-decoration:none;font-weight:800;font-size:14px;line-height:1.15;color:#fff;background:var(--mint,#1f9e7a);border-radius:999px;padding:9px 16px;white-space:nowrap;margin-inline-start:10px}
.hcta:hover{filter:brightness(1.06)}
.inapp .hcta{display:none!important}   /* 우리 앱 안 웹 화면 — 이미 앱이 있다(홈 편지 hideInRunApp) */
.mmenu{display:none;margin-left:0;position:relative}
.mmenu summary{list-style:none;cursor:pointer;width:40px;height:40px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;border:0;border-radius:0}   /* 테두리 동그라미 없음 (오너 2026-09-07) */
.mmenu summary::-webkit-details-marker{display:none}
.mmenu summary span{display:block;width:18px;height:2px;background:var(--brown);border-radius:2px}
/* 펼친 메뉴는 햄버거가 있는 쪽 끝에 붙인다 — 오른쪽에서 왼쪽 언어에서 right:0 이면 화면 왼쪽 밖으로 열렸다(10-10b) */
.mlist{position:absolute;inset-inline-end:0;top:48px;background:var(--white);border:1px solid var(--line);border-radius:16px;padding:8px;min-width:210px;max-width:calc(100vw - 24px);display:flex;flex-direction:column;z-index:30;box-shadow:0 8px 24px rgba(0,0,0,.08)}
.mlist a,.mlist .nsoon{padding:10px 14px;text-decoration:none;color:var(--ink);font-weight:700;border-radius:10px;font-size:15px}
.mlist a:hover{background:var(--hi)}
.mlist a.on{color:var(--mint)}
.mlist .nsoon small{position:static;transform:none;margin-inline-start:6px;vertical-align:middle}
.mlist .hcta{margin:8px 0 2px;display:flex;color:#fff}
.mmenu.mmenu{background:none;border:0;border-radius:0;padding:0;margin:0}   /* 오른쪽 밀기는 .head-acts 의 auto 하나만 맡는다 — auto 가 둘이면 언어 아이콘이 가운데로 떨어진다(실측 2026-09-07) */
.mmenu summary::after,.mmenu[open] summary::after{content:none}
/* 좁은 화면 — 메뉴는 햄버거로. 칸이 안 들어가는 언어 · 폭은 머리 조각(_FIT)이 재서 header.compact(메뉴 접기) · header.tight(위 단추 접기 — 메뉴 바닥에 남음) */
@media(max-width:860px){.menu{display:none}.mmenu{display:block}.hcta{font-size:12.5px;padding:7px 11px;white-space:normal;max-width:96px;margin-inline-start:auto}.hcta~.head-acts{margin-inline-start:4px}}
/* 8칸(SHOP)이 되자 영어 · 프랑스어 · 일본어 등이 1120px 에서 60px 까지 모자라 넓은 화면에서도 메뉴가 통째로 접혔다 — 접기 전에 칸 안쪽 여백을 먼저 줄인다
   (11px → 7px · 8칸 x 8px = 64px · 홈 편지 SHOP-MENU-REQUEST 2026-10-15 2절 4) */
header.snug .menu a,header.snug .menu .nsoon{padding-left:7px;padding-right:7px}
header.compact .menu{display:none}header.compact .mmenu{display:block}header.compact .hcta{margin-inline-start:auto}
header.tight .wrap>.hcta{display:none}header.tight .head-acts{margin-inline-start:auto}
footer{background:var(--white);border-top:1px solid var(--line);color:var(--muted);font-size:14px;padding:28px 0 34px}
footer a{color:var(--muted)}
.fcols{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:22px 18px;margin-bottom:22px}
.fcols>*{min-width:0}
.fcols h4{margin:0 0 8px;font-size:14px;color:var(--brown);overflow-wrap:anywhere}
.fcols a,.fcols .fsoon{display:block;text-decoration:none;color:var(--muted);font-size:14px;padding:3px 0;overflow-wrap:anywhere}
.fcols a:hover{color:var(--mint)}
.fsoon{cursor:default;opacity:.8}.fsoon small{display:block;font-size:11px;color:#4b2a7b;font-weight:800;white-space:normal}   /* 좁은 칸 · 글자 200% 에서 칸 밖으로 뚫고 나가던 것(10-10b — nowrap) */
.ffam,.flegal{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;border-top:1px solid var(--line);padding-top:14px;margin-top:4px;font-size:13px}
.ffam b{color:var(--brown);font-weight:800}
.ffam a,.flegal a{text-decoration:none;color:var(--muted)}
.ffam a:hover,.flegal a:hover{color:var(--mint)}
.ffam .cur{color:var(--brown);font-weight:700}
.flegal{border-top:0;padding-top:10px}
footer .copy{margin:0;font-size:13px;margin-inline-start:auto}
@media(max-width:1100px){.fcols{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* 폰 = 3열(360 미만만 2열) — 7열을 2열로 두면 푸터가 폰 한 화면(약 810px)을 넘어, 끝까지 내렸을 때 목록의 붙는 코스 띠가 화면 밖으로 밀렸다(10-10b ui_course B7) */
@media(max-width:640px){.fcols{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 12px}.fcols a,.fcols .fsoon{font-size:13.5px}footer .copy{margin-inline-start:0;flex-basis:100%}}
@media(max-width:359px){.fcols{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* 폰 = 열을 접는다(제목을 누르면 그 열이 펼쳐짐 · 글 · 주소는 홈 자료 그대로) — 7열을 다 펼치면 폰에서 637 ~ 780px(언어마다)이라 끝까지 내렸을 때
   목록의 붙는 코스 띠(받기)가 화면 밖으로 밀렸다(ui_course B7 · 10-10b 실측). 접으면 318 ~ 382px. 대본이 없으면(.fold 없음) 다 펼친 채 */
@media(max-width:640px){footer{padding:22px 0 24px}.fcols.fold{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 12px;margin-bottom:12px}
.fcols.fold>div>h4{margin:0;padding:11px 0;border-bottom:1px solid var(--line);cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:6px}
.fcols.fold>div>h4::after{content:'+';font-weight:800;color:var(--muted);flex:none}.fcols.fold>div.open>h4::after{content:'\2212'}
.fcols.fold>div>a,.fcols.fold>div>.fsoon{display:none}.fcols.fold>div.open>a,.fcols.fold>div.open>.fsoon{display:block}.fcols.fold>div.open>a:first-of-type{margin-top:6px}
.ffam,.flegal{padding-top:10px;gap:4px 14px}}
.langbtn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:0;border-radius:0;background:transparent;cursor:pointer;padding:0}   /* 점프와 같은 언어 아이콘 단추 */
.langbtn img{width:24px;height:24px;display:block}
.langwrap{position:relative}
.langmenu{position:absolute;inset-inline-end:0;top:44px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 2px 12px rgba(122,79,42,.10);width:220px;padding:8px;display:none;z-index:30}
.langmenu.open{display:block}
.langmenu a,.langmenu button{display:flex;width:100%;justify-content:space-between;gap:8px;border:0;background:transparent;padding:8px 10px;border-radius:10px;font:inherit;font-size:14px;cursor:pointer;text-align:start;text-decoration:none;color:var(--ink)}
.langmenu a:hover,.langmenu button:hover{background:var(--mint-soft)}
.langmenu .cur{font-weight:700;color:var(--mint-ink)}
header,footer{--white:#fff;--brown:#65472f;--mint:#1f9e7a;--hi:#eaf7ef;--mint-soft:#eaf7ef;--mint-ink:#176c53;--ink:#342d28;--muted:#746b62;--line:#e8e1d8}
header .wrap,footer .wrap{max-width:1200px;width:100%;margin:auto;padding-inline:24px}
header .brand img{max-width:none;width:auto}header .brand{gap:8px}
header button{font:inherit}header .langmenu{max-height:min(65vh,520px);overflow:auto}
footer{margin-top:24px}footer h4{line-height:1.5}header a,footer a{line-height:1.5}
@media(max-width:640px){header .wrap,footer .wrap{padding-inline:14px}}