/* 헤더 두께 · 로고 크기 = 홈과 같은 값(홈 편지 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}}

:root{--white:#fff;--cream:#fff;--paper:#fff;--brown:#7a4f2a;--muted:#5a4a3a;--ink:#1a1410;--line:#e4d9cc;--mint:#0f6b55;--mint-ink:#0f6b55;--mint-soft:#e6f7f1;--hi:#eaf6f1;--gold:#ffd166;--purple:#7c4dbd;--shadow:0 2px 12px rgba(122,79,42,.10);
  --c-color:#0f6b55;--c-marker:#7c4dbd;--c-friend:#a5481a;--c-song:#1d5fb8;--gray:#6f6355}   /* 랜딩과 같은 흰색 기본 · 강조 #eaf6f1 · 단추 #0f6b55 (LIST-PLAN P0-2) · 유형 글자색 넷(노래 파랑 — W-98, 흰 바탕 6.2:1) · 회색 글자 4.5:1 이상(W-39) */
*{box-sizing:border-box} html{scroll-behavior:smooth}
body{margin:0;background:var(--white);color:var(--ink);font-family:"Pretendard","Noto Sans KR","Malgun Gothic","Apple SD Gothic Neo","Noto Sans",sans-serif;line-height:1.45}
[dir=rtl] .head-acts,[dir=rtl] .tools{flex-direction:row-reverse}
a{color:inherit}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
/* 로고 · RUN 글자 크기 = site_chrome.CSS 한 곳(--logo-h) — 여기서 덮어쓰지 않는다(2026-10-10 오너 · 쪽마다 크기가 달랐다: 목록 RUN 52x19 · 소개 64x23) */
header{position:sticky;top:0;z-index:20}
.btn{border:1px solid var(--line);background:#fff;border-radius:999px;padding:8px 14px;font:inherit;font-size:14px;cursor:pointer;color:var(--ink)}
.btn.primary{background:var(--mint-ink);border-color:var(--mint-ink);color:#fff;font-weight:700}
.btn.ghost{background:transparent}
.langmenu{width:300px;max-height:60vh;overflow:auto}   /* 목록은 51개 언어라 길다 */
/* 폰은 언어 메뉴를 화면 기준으로 붙인다(헤더는 sticky 라 바로 아래) — 오른쪽→왼쪽 언어에서 헤더 단추가 셋(W-59 봉투)이 되자 메뉴가 오른쪽 밖으로
   나가고(아랍어 390 · 412 · 430 = 156 ~ 456, 서버02 실측 2026-10-05 · 다른 눈 검토 1번) · 320 에서 왼쪽이 잘리던 것(옛 라이브부터 -31 ~ -40)을 같이 고친다 */
@media(max-width:640px){.langmenu{position:fixed;top:calc(var(--head-h) + 4px);inset-inline-end:8px;inset-inline-start:auto;width:min(300px,calc(100vw - 16px))}}
.langmenu button:hover{background:var(--mint-soft)} .langmenu button[disabled]{color:#9a8f83;cursor:default}
.langmenu button[disabled]:hover{background:transparent} .langmenu small{color:#9a8f83}
.heroband{background:var(--hi);border-bottom:1px solid var(--line)}   /* 히어로 = 연한 민트 띠, 아래 필터 영역은 흰색 — 구분 (오너 2026-09-07) */
.hero{padding:44px 0 36px;display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center}
.typerow{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:10px 14px;padding:22px 0 4px}   /* 유형 알약 — 히어로 아래 가운데 */   /* 여백 넉넉히 (오너 2026-09-06 "답답하다") */
/* 놀이 코스 입구 = 유형 알약 줄 오른쪽(오른쪽에서 왼쪽 언어는 왼쪽) · 다른 바탕색(금색) — 오너 10-05. 좁아서 한 줄에 안 들어가면 알약 아래 가운데로 */
.hero .oneline{margin:12px 0 18px;color:var(--muted);font-size:16px;line-height:1.5}
.typepills{display:inline-flex;border:1px solid var(--line);border-radius:999px;background:#fff;padding:3px;gap:2px;max-width:100%;flex-wrap:wrap;justify-content:center}   /* 글자를 키우거나 말이 길면(독일어 · 영어 200%) 다음 줄로 — 가로로 넘쳐 화면 전체가 줄어들지 않게(놀이 코스 창 · 띠가 화면 밖으로 밀렸다, 3단계) */
.typepills button{border:0;background:transparent;border-radius:999px;padding:8px 16px;font:inherit;font-size:14px;font-weight:700;color:var(--muted);cursor:pointer}
.typepills button.on{background:var(--mint-ink);color:#fff}
.typepills button{display:inline-flex;align-items:center;gap:6px}
.typepills svg{width:16px;height:16px;flex:none}   /* 카드 유형 줄과 같은 아이콘(W-39) */
@media(max-width:420px){.typepills svg{display:none}}   /* 좁은 폰은 글자만 — 넷이 한 줄에 들어가게 */
.hero h1{margin:0;font-size:30px;color:var(--brown)} .hero p{margin:0;color:var(--muted);font-size:16px;max-width:640px}
.hero img{height:132px;width:auto;filter:drop-shadow(0 6px 10px rgba(122,79,42,.18))}
.steps{display:flex;flex-wrap:wrap;gap:8px 24px;margin:14px 0 18px}   /* 세 걸음 가이드 — 히어로 안 (오너 2026-09-07 복원) */
.step{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--brown);font-size:15px}
.step img{width:56px;height:56px;object-fit:contain;filter:none}
.step>span{display:flex;align-items:center;gap:8px}
.step b{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:999px;background:var(--mint-ink);color:#fff;font-size:12px;flex:0 0 24px}
/* 세 갈래 안내 3칸 (W-45 · 오너 W-47, 2026-10-03) — 세 걸음 띠 자리를 바꾼다(높이는 옛 띠 안쪽). 썸네일 없이 아이콘 — 카드와 헷갈리지 않게.
   칸을 누르면 그 갈래로 걸러진다 · 끝 칸 = 먼저 무료 앱(PC 는 QR — 폰 카메라로 찍는다) */
.wg-guide{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;gap:12px;margin:14px 0 6px;text-align:start}
.wg-tile{font:inherit;text-align:start;cursor:pointer;background:#fff;border:1.5px solid var(--line);border-radius:16px;padding:12px 14px;display:flex;flex-direction:column;gap:6px;color:var(--brown);min-width:0}
.wg-tile:hover,.wg-tile:focus-visible{border-color:var(--mint-ink)}
.wg-h{display:flex;align-items:center;gap:8px;font-weight:800;font-size:17px}
.wg-h i{display:inline-flex;flex:none;width:30px;height:30px;border-radius:999px;align-items:center;justify-content:center;background:var(--hi);color:var(--mint-ink)}
.wg-h i svg{width:17px;height:17px}
.wg-h em{margin-inline-start:auto;font-style:normal;color:var(--muted);font-size:18px;line-height:1}
[dir=rtl] .wg-h em{transform:scaleX(-1)}
.wg-one{font-size:14px;color:var(--muted)}
.wg-need{display:flex;flex-wrap:wrap;gap:4px}
.wg-need span{display:inline-flex;align-items:center;gap:4px;font-size:12.5px;font-weight:700;padding:3px 8px;border-radius:999px;background:#f6efe6;color:#5a4334}
.wg-need svg{width:12px;height:12px;flex:none}
.wg-stp{font-size:12.5px;color:var(--muted)}
.wg-app{display:flex;align-items:center;gap:10px;background:#fff;border:1.5px dashed var(--line);border-radius:16px;padding:10px 12px;max-width:240px;color:var(--brown);text-decoration:none}
.wg-app b{display:block;font-size:14.5px}.wg-app small{display:block;font-size:12.5px;color:var(--muted)}
.wg-qr{flex:none;width:76px;height:76px;display:block}.wg-qr svg{width:100%;height:100%;display:block}
@media (max-width:1000px){.wg-guide{grid-template-columns:repeat(3,minmax(0,1fr))}.wg-app{grid-column:1/-1;max-width:none;justify-content:center}}
@media (max-width:640px){.wg-guide{grid-template-columns:1fr;gap:8px}
 .wg-tile{flex-direction:row;flex-wrap:wrap;align-items:center;padding:10px 12px}.wg-h{font-size:16px;flex:1 0 100%}.wg-one,.wg-stp{display:none}
 .wg-app{background:var(--mint-ink);color:#fff;border:0;font-weight:800;justify-content:center;padding:14px}.wg-app .wg-qr,.wg-app small{display:none}.wg-app b{font-size:16px}}
.chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:14px 0 6px}
.chip{border:1px solid var(--line);background:#fff;border-radius:999px;padding:7px 14px;font:inherit;font-size:14px;cursor:pointer}
.chip.on{background:var(--brown);border-color:var(--brown);color:#fff;font-weight:700}
.chip .cn{margin-inline-start:6px;font-size:12px;color:var(--gray);font-weight:400}
.chip.on .cn{color:rgba(255,255,255,.85)}
.chips{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.chip{white-space:nowrap;flex:0 0 auto}

/* 한 줄 필터 — 찾기 · 보기 · 골라서 받기 (오너 2026-09-06, quiga.io 방식). 주제는 2026-10-02 부터 메뉴가 아니라 늘 보이는 칩 줄(W-39) */
.bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:8px 0 18px;padding:10px 0;border-bottom:1px solid var(--line)}
.viewwrap{position:relative}
.bar .tfind{margin-inline-end:auto}
/* 주제 칩 줄 (W-39 1단계) — '고르기 ▾' 메뉴(열기 82 · 고르기 13)를 늘 보이는 칩으로. PC 는 줄바꿈, 폰 · 태블릿(손가락 화면 · 가로 폰)은 한 줄 가로 밀기 + 끝 흐림.
   개수 = 지금 종류 · 찾기를 반영한 종이 장수. 0 이면 숨기지 않고 흐리게(자리 고정). AR 친구들을 고르면 줄 전체를 흐리게 + '주제는 종이에만'
   여백(오너 10-05 "주제 버튼 윗줄과 각 카테고리 버튼의 위아래 여백 — 너무 딱 붙어 있다"): 찾기 줄 선 아래 18px · 칩 줄끼리 12px · 결과 줄까지 12px */
.topics{display:flex;align-items:center;gap:10px;margin:0 0 12px;min-width:0}
.tlbl{flex:none;font-size:13px;font-weight:800;color:var(--muted)}
.tchips{display:flex;flex-wrap:wrap;gap:12px 8px;min-width:0;flex:1 1 auto}
.tchip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:#fff;border-radius:999px;padding:7px 12px;font:inherit;font-size:14px;font-weight:700;color:var(--ink);cursor:pointer;white-space:nowrap;flex:0 0 auto}
.tchip svg{width:16px;height:16px;color:#8a7a68;flex:none}
.tchip .cn{font-size:12.5px;font-weight:600;color:var(--gray)}
.tchip:hover{background:#faf7f2}
.tchip.on,.tchip[aria-pressed="true"]{background:var(--brown);border-color:var(--brown);color:#fff}
.tchip.on svg,.tchip.on .cn{color:#fff}
.tchip.zero{opacity:.45;cursor:default}
.tchip:disabled{cursor:default}
.topics.off .tchips{opacity:.45}
/* 결과 줄 — 종이와 AR 친구를 섞어 세지 않는다(코덱스 결함 — 옛 '157장'). 조건 지우기는 0건이어도 남는다. 고정 영역 밖이다 */
.resline{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:0 0 14px;font-size:13.5px;font-weight:700;color:var(--muted)}
.resline #resTxt{word-break:keep-all;overflow-wrap:anywhere}
.resclear{border:0;background:none;padding:2px 0;font:inherit;font-size:13.5px;font-weight:700;color:var(--brown);text-decoration:underline;cursor:pointer}
.resclear[hidden]{display:none}
.rsw[hidden]{display:none!important}   /* 관리자 보기는 번호순이라 '앱에서 되는 것 먼저'를 감춘다(오너 10-05) */
.rsw{margin-inline-start:auto;display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:var(--muted);cursor:pointer;max-width:100%}   /* 줄 바꿈 허용 — nowrap 이던 때 그리스어 글자 2배 390 폰에서 이 이름표가 493px 로 화면을 505 까지 넘겼다(10-05 실측, 옛 라이브부터) */
.rsw span{min-width:0;overflow-wrap:anywhere}
.rsw input{appearance:none;-webkit-appearance:none;width:34px;height:20px;border-radius:999px;background:#cfc6bb;position:relative;margin:0;cursor:pointer;flex:none;transition:background .15s}
.rsw input::after{content:"";position:absolute;inset-inline-start:3px;top:3px;width:14px;height:14px;border-radius:999px;background:#fff;transition:inset-inline-start .15s}
.rsw input:checked{background:var(--mint-ink)}
.rsw input:checked::after{inset-inline-start:17px}
.rsw input:focus-visible{outline:2px solid var(--mint-ink);outline-offset:2px}
.empty .resclear{display:inline-block;margin-top:10px}
.iconbtn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid var(--line);background:#fff;border-radius:999px;cursor:pointer;color:var(--muted)}
.iconbtn[aria-expanded="true"]{background:var(--hi);border-color:var(--mint-ink);color:var(--mint-ink)}
.viewmenu{position:absolute;inset-inline-end:0;top:46px;z-index:30;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);min-width:140px;padding:6px;display:flex;flex-direction:column}
.viewmenu[hidden]{display:none}
.viewmenu button{border:0;background:transparent;border-radius:10px;padding:9px 12px;font:inherit;font-size:14px;cursor:pointer;text-align:start;color:var(--ink)}
.viewmenu button:hover,.viewmenu button:focus-visible{background:var(--mint-soft);outline:0}
.viewmenu button.on{font-weight:700;color:var(--mint-ink)}
@media(max-width:560px){
  .hero{padding:28px 0 24px}
  .typerow{padding:16px 0 2px}
  .hero .oneline{font-size:15px;margin:10px 0 14px}
  .typepills button{padding:7px 12px;font-size:13px}
  .bar{gap:8px;padding:8px 0;margin:4px 0 14px}
  .tfind.open{flex:1 1 auto}.tfind.open input{width:100%}
  .topics{gap:8px;margin:0 0 10px}
  .tlbl{font-size:12.5px}
  .tchip{padding:6px 11px;font-size:13.5px}
  .resline{font-size:13px;margin:0 0 12px}
  .rsw{margin-inline-start:0}
}
/* 폰 · 태블릿: 주제 칩은 줄을 바꾸지 않고 한 줄 가로 밀기 + 끝 흐림 — 고정 영역을 한 줄만 쓴다(W-39).
   좁은 폰만이 아니라 가로 폰(844×390 — 오너 폰) · 손가락 화면 1024 이하 전부(오너 10-05 "모바일에서 줄 바꿈이 아닌 좌우 스크롤").
   마우스만 있는 좁은 PC 창은 줄바꿈 그대로(숨긴 가로 막대는 마우스로 못 민다) */
@media (max-width:560px),(max-width:1024px) and (any-pointer:coarse),(max-height:500px) and (any-pointer:coarse){
  .tchips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;padding-inline-end:28px;padding-block:4px;
    -webkit-mask-image:linear-gradient(90deg,#000 82%,transparent);mask-image:linear-gradient(90deg,#000 82%,transparent)}
  [dir=rtl] .tchips{-webkit-mask-image:linear-gradient(270deg,#000 82%,transparent);mask-image:linear-gradient(270deg,#000 82%,transparent)}
  .tchips::-webkit-scrollbar{display:none}
}
/* 손가락 화면: 유형 알약 줄도 줄을 바꾸지 않는다 — 놀이 코스 단추는 오른쪽에 고정하고, 알약이 다 안 들어가면 알약 묶음만 좌우로 민다
   (오너 10-05 "모바일에서 줄 바꿈이 아닌 좌우 스크롤" · 코스 단추가 알약 아래로 내려가면 붙는 띠가 세로 폰 화면 27 → 34% 로 두꺼워졌다 — 실측).
   넘칠 때만(.ovf — 화면이 잰다) 끝을 흐린다 · 고른 알약은 화면이 보이는 자리로 민다 */
@media (any-pointer:coarse) and (max-width:1024px){
  .typerow{flex-wrap:nowrap}
  .typepills{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;min-width:0;flex:0 1 auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}   /* 가운데 정렬인 채 넘치면 시작 쪽이 잘리고 밀어도 안 나온다(10-05 시안 2판 세로 폰 '모든 유형' 잘림) */
  .typepills::-webkit-scrollbar{display:none}
  .typepills button{flex:none;white-space:nowrap}
  /* 끝 흐림은 고정 폭 32px + 같은 만큼 끝 여백 — 끝까지 밀었을 때 마지막 알약이 흐림 안에 남지 않게(검토 지적 10-05) */
  .typepills.ovf{padding-inline-end:32px;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent)}
  [dir=rtl] .typepills.ovf{-webkit-mask-image:linear-gradient(270deg,#000 calc(100% - 32px),transparent);mask-image:linear-gradient(270deg,#000 calc(100% - 32px),transparent)}
  /* 긴 말(그리스어 'Διαδρομές παιχνιδιού' 등) · 글자 200% 에서는 단추 안에서 줄을 바꾼다 — 알약 자리를 다 먹지 않게 줄의 46% 까지.
     .typerow 를 붙여 뒤에 오는 기본 .cr-entry{max-width:100%}(COURSE_CSS)를 이긴다 — 전에는 덮여 320 폰 알약 75px · 200% 에서 화면이 옆으로 넘쳤다(검토 지적 · 실측 10-05) */
  .typerow .cr-entry{flex:0 0 auto;max-width:46%}
}
.morewrap{display:flex;justify-content:center;padding:0 0 44px}
.btn.more{padding:12px 26px;font-weight:700;border-radius:999px}
/* 바닥 고정 앱 받기 — 랜딩과 같은 모양. 카드 목록이 화면에 들어오면 나온다 (오너 2026-09-07) */
/* 바닥 앱 받기 — 흰 띠 없이 단추 하나, 단추 안 오른쪽에 X 닫기 (오너 2026-09-07) */
.fixedcta{position:fixed;left:0;right:0;bottom:0;z-index:25;background:transparent;border:0;padding:0 16px calc(12px + env(safe-area-inset-bottom,0px));pointer-events:none;transition:transform .18s ease,opacity .18s ease}
.fixedcta .inner{max-width:420px;margin:0 auto;pointer-events:auto}
.fixedcta .ctabtn{display:flex;align-items:center;height:52px;border-radius:14px;background:var(--mint-ink);color:#fff;font-size:16px;font-weight:700;text-decoration:none;box-shadow:0 6px 18px rgba(15,107,85,.28);overflow:hidden}
.fixedcta .ctabtn a{flex:1;display:flex;align-items:center;justify-content:center;height:100%;color:#fff;text-decoration:none;padding-inline-start:44px}   /* X 폭만큼 왼쪽에 여백을 줘 글자가 가운데 온다 */
.fixedcta .ctabtn button{width:44px;height:100%;border:0;background:rgba(255,255,255,.14);color:#fff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.fixedcta.hidecta{transform:translateY(110%);opacity:0;pointer-events:none}
.fixedcta.closed{display:none}
body{padding-bottom:calc(82px + env(safe-area-inset-bottom,0px))}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
/* 받기 — 묶음(전부/갈래) · 골라서 (오너 2026-09-07). 명세가 없으면 통째로 숨긴다 */
.dlwrap{display:flex;gap:8px;align-items:center}
.dlbtn{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 14px;border-radius:999px;font-weight:700;white-space:nowrap}
.dlbtn small{font-weight:400;color:var(--gray);font-size:12px}
.dlbtn.ghost{background:transparent}
.dlbtn[aria-pressed="true"]{background:var(--mint-ink);color:#fff}
/* 고르는 동안 '골라서 받기' 는 꺼진다 — 받기는 아래 막대 'N장 받기' 하나만 살아 있어 헷갈리지 않게(오너 2026-09-15, W-31) */
.dlbtn:disabled{opacity:.45;cursor:not-allowed}
/* N장 받기 -> 낱장(zip) / 한 권(PDF) 고르개. 둘 다 표지·광고·마지막 쪽을 담는다 */
.pickgo{position:relative}
.pickmenu{position:absolute;top:calc(100% + 6px);inset-inline-end:0;min-width:250px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 8px 24px rgba(0,0,0,.12);padding:6px;z-index:35;text-align:start}
.pickmenu[hidden]{display:none}
.pickmenu button{display:flex;width:100%;align-items:baseline;gap:8px;background:none;border:0;padding:10px 12px;border-radius:10px;font:inherit;color:var(--ink);cursor:pointer;text-align:start}
.pickmenu button:hover{background:#faf7f2}
.pickmenu small{color:var(--gray);font-size:12px;margin-inline-start:auto;white-space:nowrap}
.pickmenu .note{margin:2px 12px 6px;font-size:12px;color:var(--gray)}
/* 상세 창 '이 종이 고르기' (오너 2026-09-15, W-30) — 도구 줄 아래 한 줄 단추. 담기면 채워진 상자 */
.ppick{display:flex;align-items:center;gap:12px;width:100%;margin:0 0 14px;padding:12px 14px;border:2px solid var(--mint-ink);border-radius:14px;background:var(--mint-soft);color:var(--mint-ink);font:inherit;cursor:pointer;text-align:start}
.ppick-box{flex:none;width:22px;height:22px;border:2px solid var(--mint-ink);border-radius:7px;background:#fff}
.ppick-t{display:flex;flex-direction:column;gap:1px;min-width:0}
.ppick b{font-size:15px;font-weight:800;line-height:1.3}
.ppick small{font-size:12.5px;color:var(--muted)}
.ppick[aria-pressed="true"]{background:var(--mint-ink);color:#fff}
.ppick[aria-pressed="true"] .ppick-box{background:#fff;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f6b55' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E");background-size:16px;background-position:center;background-repeat:no-repeat}
.ppick[aria-pressed="true"] small{color:rgba(255,255,255,.85)}
.ppick:disabled{opacity:.45;cursor:not-allowed}
/* 고르기 모드 창 안 한 줄 — 빈 곳을 누르면 목록으로(오너 2026-10-02 W-41). 모드일 때만 보인다 */
.ptapclose{margin:-6px 0 14px;font-size:12.5px;font-weight:700;color:var(--muted)}
.ptapclose[hidden]{display:none!important}
.picking-panel .pbody,.picking-panel .phead h2{cursor:pointer}
/* AR 친구들 — 상세 창 (2026-09-15) */
.pfriend{margin:0 0 14px}
.pfonly{margin:0 0 10px;padding:10px 12px;border-radius:12px;background:var(--hi);border:1px solid var(--line);font-size:14px;line-height:1.45}
.pfbtns{display:flex;gap:8px;flex-wrap:wrap}
.pfbtns .btn{flex:1 1 auto;justify-content:center;text-align:center;text-decoration:none}
.pfbtns .btn:disabled{opacity:.5;cursor:default}
.psong{margin:0 0 14px} .psnote{margin:6px 0 0;color:var(--muted);font-size:12.5px}   /* 노래 창(W-98) — 원곡 듣기(유튜브 · 새 창) · 앱에서 따라 부르기 · 앱 받기 QR(친구 창과 같은 틀) */
.sgtile{display:flex;align-items:center;justify-content:center;background:#eaf1fb;color:var(--c-song)} .sgtile svg{width:38%;height:auto;max-width:120px}
.pimg .sgtile{width:100%;aspect-ratio:4/3;border-radius:10px} .pimg .sgtile svg{max-width:150px}   /* 썸네일 없는 곡(앱 내장) · 그림을 못 받은 곡 = 유형 아이콘을 크게 그린 칸(빈 · 깨진 그림 금지) */
/* 단추들이 display 를 스스로 정해서 hidden 속성이 지고 흐린 채 남았다(2026-09-15 화면 확인) — 숨김을 이기게 한다 */
.pacts [hidden],.ppick[hidden],.pfriend[hidden],.pspec[hidden],.psoon[hidden],.pser[hidden],.ptry[hidden],.ptry [hidden],.psong[hidden],.psong [hidden],.pimg [hidden],.phow[hidden],#typeSeg button[hidden]{display:none!important}   /* .psoon{display:flex} 가 hidden 을 이겨 곧 도착 아닌 창마다 빈 노란 칸이 떴다(2026-09-18) */
/* 공지(새 소식) — 헤더 종과 창 (오너 2026-09-15, W-32) */
.newsbtn{position:relative}
.newsdot{position:absolute;top:5px;inset-inline-end:5px;width:9px;height:9px;border-radius:999px;background:#d64545;border:2px solid #fff}
.newsdot[hidden]{display:none}
.nwlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.nwlist li{margin:0}
.nwrow{display:flex;flex-direction:column;gap:2px;width:100%;background:var(--hi);border:1px solid var(--line);border-radius:12px;padding:11px 13px;font:inherit;color:var(--ink);cursor:pointer;text-align:start}
.nwrow:hover{background:#dff0e9}
.nwrow b{font-size:14.5px;font-weight:700;line-height:1.35}
.nwrow small{font-size:12px;color:var(--gray)}
.nwrow .nwnew{display:inline-block;margin-inline-start:6px;font-size:11px;font-weight:700;color:#d64545}
.nwback{display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:4px 0;margin:0 0 6px;font:inherit;font-size:13px;color:var(--mint-ink);cursor:pointer}
.nwdate{font-size:12px;color:var(--gray);margin:0 0 2px}
.nwbody{margin:8px 0 0;font-size:14px;line-height:1.6;white-space:pre-wrap}
.nwbody .nwmail{color:var(--mint-ink);font-weight:700;text-decoration:underline;text-underline-offset:2px;unicode-bidi:isolate}
.nwgo{margin:12px 0 0;display:flex;flex-wrap:wrap;gap:8px}.nwgo[hidden],#nwGo[hidden],#nwApp[hidden]{display:none}   /* 앱 업데이트 공지 '앱 받기'(W-73) */
.nwall{margin:14px 0 2px;font-size:14px}.nwall a{color:var(--mint-ink);font-weight:700;text-decoration:underline;text-underline-offset:2px}   /* 와그작 소식(홈) 모두 보기 — W-67 */
.nwempty{margin:8px 0;color:var(--muted);font-size:14px}
.pickbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;background:var(--hi);border:1px solid var(--line);border-radius:14px;padding:10px 14px;margin:0 0 14px;font-size:14px;color:var(--muted)}
.pickbar[hidden]{display:none}.pickbar .btn{margin-inline-start:auto}.pickbar .btn+.btn{margin-inline-start:0}
/* 받는 단추 묶음은 막대 오른쪽에 붙인다 — 고르개를 span 으로 감싸면서 .btn 의 auto 여백이 안 먹는다(2026-09-15) */
.pickbar .pickgo{margin-inline-start:auto}.pickbar .pickgo+.btn{margin-inline-start:0}
.card.pickable .ctop{padding-inline-end:44px}   /* 고르기 동그라미는 카드 오른쪽 위 — 분류 줄 · 제목을 가리지 않게(W-39, 왼쪽 위는 곧 도착 자리) */
.card.pickable{position:relative}.card.pickable::after{content:'';position:absolute;top:10px;inset-inline-end:10px;width:24px;height:24px;border:2px solid #fff;border-radius:999px;background:rgba(255,255,255,.9);box-shadow:0 1px 4px rgba(0,0,0,.2)}
.card.picked{outline:3px solid var(--mint-ink);outline-offset:-3px}.card.picked::after{background:var(--mint-ink);border-color:var(--mint-ink)}
.metaline{margin:6px 0 20px;font-size:13px;color:var(--gray);text-align:center}
/* 폰: '골라서 받기' 를 아이콘 단추로 접는다 — 주제 칩 줄이 들어온 만큼 고정 영역을 늘리지 않으려고(W-39). 이름은 aria-label · title 에 남는다 */
@media(max-width:560px){.dlwrap{flex:0 0 auto}.dlbtn{padding:0 12px;font-size:13.5px}.dlwrap[hidden]{display:none}}   /* '골라서 받기'는 폰에서도 글자째(10-11 W-90 — 아이콘만이라 무엇인지 안 보였다 · 28일 담은 사람 101) */
@media(max-width:360px){.dlbtn svg,.tbtn svg{display:none}}
/* 목록 재고도화(W-89 · W-90 · 10-11): 안내 3칸 접기 · 주제 단추 + 접은 칸 · 첫 화면에 카드 */
.hero{padding:24px 0 18px}.hero img{height:104px}
.wg-fold{margin:6px 0 0}
.wg-fold>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;min-height:40px;font-weight:800;font-size:15px;color:var(--mint-ink)}
.wg-fold>summary::-webkit-details-marker{display:none}
.wg-fold>summary::after{content:'';width:8px;height:8px;border-inline-end:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin-top:-4px;transition:transform .2s}
.wg-fold[open]>summary::after{transform:rotate(225deg);margin-top:4px}
.tbtn{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 14px;border:1px solid var(--line);border-radius:999px;background:#fff;font:inherit;font-size:14px;font-weight:700;color:var(--ink);cursor:pointer;white-space:nowrap;flex:none;max-width:52%}
.tbtn b{font-weight:800;color:var(--mint-ink);overflow:hidden;text-overflow:ellipsis}
.tbtn.has{border-color:var(--mint-ink)}.tbtn[aria-expanded="true"]{background:var(--hi)}
.tfold{margin:-6px 0 14px;padding:12px 12px 10px;border:1px solid var(--line);border-radius:16px;background:#fff}
.tfold[hidden]{display:none}
.tfold .topics{margin:0}
.topt{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;margin-top:10px}
/* 종이 창 — 맨 위 큰 '받기' 하나 + 글자 달린 인쇄 · 공유(W-90 · 일반 인쇄물 사이트 꼴) · 앱 받기 아이콘은 헤더 · 바닥 띠에 있어 뺀다 */
.pacts #pApp{display:none}
.tool.lab{width:auto;padding:0 14px;gap:8px;font:inherit;font-size:14px;font-weight:700}
.tool.lab .tl{order:2;white-space:nowrap}
.tool.main.lab{order:-1;flex:1 0 100%;height:52px;font-size:16px;font-weight:800;border-radius:16px}
.tool.main.lab:disabled{opacity:.55}
.tools{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:8px 0 16px}
@media(max-width:560px){
  .tools{gap:8px;margin:6px 0 12px;row-gap:8px}
  .tcount{flex:0 0 auto;font-size:14px}
  .tfind{flex:1 1 auto;min-width:0}.tfind.open input{width:100%}
  .seg{flex:1 1 100%;justify-content:space-between}.seg button{flex:1 1 0;text-align:center;padding:8px 6px}
}   /* 모바일 도구 줄 — 개수+찾기 한 줄, 유형 한 줄, 보기 한 줄로 또렷하게 (오너 2026-09-06 "혼선 없도록") */
.seg{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;background:#fff}
.seg button{border:0;background:transparent;padding:7px 12px;font:inherit;font-size:13px;cursor:pointer;color:var(--muted)}
.seg button.on{background:var(--mint-soft);color:var(--mint-ink);font-weight:700}
.tcount{font-weight:700;color:var(--brown)}
.tfind{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:#fff;border-radius:999px;padding:4px 6px 4px 12px}
.tfind input{border:0;outline:0;font:inherit;font-size:14px;width:0;transition:width .2s;background:transparent}
.tfind.open input{width:180px}
@media(min-width:769px){.tfind input{width:180px}}
.tfind button{border:0;background:transparent;cursor:pointer;line-height:0;padding:4px 6px;color:var(--muted);display:inline-flex;align-items:center}
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));padding-bottom:24px}
@media(max-width:560px){.grid{gap:10px;grid-template-columns:repeat(auto-fill,minmax(9.5em,1fr))}}  /* 2열 목표 — em 이라 글자를 키우면 1열로 내려간다(고정 아님) */
.grid.small{grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px}
.grid.list{display:flex;flex-direction:column;gap:8px}
.row{display:flex;align-items:center;gap:12px;padding:12px 14px;background:#fff;border:1px solid var(--line);border-radius:14px;cursor:pointer}
.row:hover{background:var(--mint-soft)}
.row .rname{flex:1;font-weight:800;font-size:15.5px;word-break:keep-all;overflow-wrap:anywhere} .row .rname.pending{color:var(--gray);font-weight:600}
.row .rgo{color:var(--mint-ink);font-size:14px;font-weight:700;white-space:nowrap}
/* 카드 R2 (W-39, 2026-10-02) — 위에서 아래로 분류 작은 줄 → 제목(가장 크게) → 그림(마커 그림만) → 유형(아이콘 + 색 글자, 면 없음).
   비교 시험 B2 는 그림이 맨 위(.cv-b2 — 차례만 다르고 크기 · 그림 · 글자는 같다). 상세 창 · 받기 · 인쇄는 A4 그대로 */
.card{background:var(--paper);border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column;cursor:pointer;transition:transform .12s}
.card:hover{transform:translateY(-2px)}
.ctop{padding:13px 14px 10px}
.cv-b2 .ctop{padding:12px 14px 6px}
.ccat{display:flex;align-items:center;gap:5px;font-size:12.5px;font-weight:700;color:var(--muted);margin:0 0 3px;min-width:0;word-break:keep-all;overflow-wrap:anywhere}
.ccat svg{width:14px;height:14px;color:#8a7a68;flex:none}
/* 제목 칸 = 모든 언어 최소 2줄 · 최대 3줄(넘치면 말줄임, 전체 제목은 title 과 상세 창) — 코덱스 판정 고칠 것 2 */
.cname{font-weight:800;font-size:17px;line-height:1.3;color:var(--ink);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em;word-break:keep-all;overflow-wrap:anywhere}
.cname.pending{color:var(--gray);font-weight:600}
.thumb{aspect-ratio:4/3;background:#faf7f2;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}
.thumb img{max-width:96%;max-height:94%;object-fit:contain}
.cfoot{margin-top:auto;padding:9px 14px 12px;border-top:1px solid #f0e9df;display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
.ctype{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:800;color:var(--c-color);white-space:nowrap}
.ctype.marker{color:var(--c-marker)} .ctype.friend{color:var(--c-friend)} .ctype.song{color:var(--c-song)}
.ctype svg{width:16px;height:16px;flex:none}
.cstate{flex:1 1 100%;font-size:12px;font-weight:700;color:#7a5000;word-break:keep-all;overflow-wrap:anywhere}   /* 곧 도착 — 종이는 지금 · 앱은 업데이트 뒤(코덱스 고칠 것 1) */
@media(max-width:560px){.cname{font-size:16px}.ctop{padding:11px 12px 8px}.cfoot{padding:8px 12px 10px}}
.grid.small .cname{font-size:14px}.grid.small .ctop{padding:10px 12px 7px}.grid.small .cfoot{padding:7px 12px 9px}.grid.small .ccat{font-size:12px}
/* New · Hot 칸(오너 2026-10-18 W-102) — 지금 유형의 새 것 · 인기를 작은 카드 2줄로 좌우 밀기(칸마다 10장 · 윗줄 1 ~ 5 · 아랫줄 6 ~ 10 = 앱 AR 친구 '전체' 2줄과 같은 채움).
   오른쪽에서 왼쪽 언어는 그리드 · 밀기가 오른쪽부터(dir) · 딱지 글자 NEW · HOT 은 어느 언어나 같다(AR+VR 딱지처럼) · 바탕 대비 흰 글자 4.5:1 이상 */
/* 탭 · 접기(오너 2026-10-19 W-103 — "new, hot을 사용자가 클릭해서 구분 … 슬라이드로 접히고 펼칠 수 있도록"): 칸 하나를 옅은 테두리 상자로 묶고(위 유형 · 주제 알약과 다른 '이 칸만의 전환'),
   머리 줄 = 밑줄 탭 [NEW 새로 나왔어요] [HOT 인기 있어요] + 끝에 접기 단추(폰은 꺾쇠만 · 이름은 화면 읽기용). 두 줄은 한 칸에 겹쳐 두고 고른 쪽만 보인다 —
   칸 높이 = 두 줄 중 큰 쪽(탭을 바꿔도 아래 목록이 오르내리지 않는다 · 인지 전문가 검토 10-19). 접기 = 줄 칸이 위로 미끄러져(0.24초 · 접을 때 0.18초 · 움직임 줄이기면 바로) 머리 줄만 남는다 */
.disc{margin:2px 0 14px;border:1px solid var(--line);border-radius:16px;background:#fff;padding:2px 12px 0}
.dhead{display:flex;align-items:flex-end;gap:6px;border-bottom:1px solid #f0e9df}
.disc.folded .dhead{border-bottom-color:transparent}
.dtabs{display:flex;gap:2px;flex:1 1 auto;min-width:0}
.dtab{appearance:none;background:none;border:0;border-bottom:3px solid transparent;margin:0 0 -1px;display:inline-flex;align-items:center;gap:7px;min-height:44px;min-width:0;padding:6px 8px;font:inherit;font-size:15.5px;font-weight:800;line-height:1.25;color:var(--muted);cursor:pointer}
.dtab[hidden]{display:none}
.dtab .dlbl{white-space:normal;overflow-wrap:anywhere;min-width:0}
.dtab[aria-selected="true"]{color:var(--ink)}
.dtab.new[aria-selected="true"]{border-bottom-color:#0f6b55}.dtab.hot[aria-selected="true"]{border-bottom-color:#b4400e}
.dtab:focus-visible,.dfold:focus-visible{outline:3px solid var(--mint);outline-offset:-3px;border-radius:10px}
.dtabs.single .dtab{cursor:default;color:var(--ink);border-bottom-color:transparent}   /* 한쪽이 0장 — 탭이 아니라 제목(혼자 남은 탭은 눌러도 아무 일이 없어 고장처럼 보인다) */
.disc.folded .dtabs.single .dtab{cursor:pointer}   /* 접혀 있으면 제목을 눌러도 펼친다 */
.disc.folded .dtab[aria-selected="true"]{border-bottom-color:transparent}
.ddot{flex:none;min-width:22px;height:20px;padding:0 6px;border-radius:999px;background:#c62828;color:#fff;font-size:11.5px;font-weight:900;line-height:20px;text-align:center}
.ddot[hidden]{display:none}
.dfold{flex:none;appearance:none;background:none;border:0;display:inline-flex;align-items:center;justify-content:center;gap:4px;min-height:44px;min-width:44px;padding:6px 8px;font:inherit;font-size:13.5px;font-weight:800;color:var(--muted);cursor:pointer;white-space:nowrap}
.dfold:hover{color:var(--ink)}
.dfold svg{width:18px;height:18px;flex:none;transition:transform .24s ease}
.disc.folded .dfold svg{transform:rotate(180deg)}
.dwrap{display:grid;grid-template-rows:1fr;transition:grid-template-rows .24s ease}
.disc.folded .dwrap{grid-template-rows:0fr;transition-duration:.18s}
.dpanel{min-height:0;overflow:hidden;display:grid}
.dpanel>.drow{grid-area:1/1}
.dpanel>.drow.off{visibility:hidden}
@media (prefers-reduced-motion:reduce){.dwrap,.dfold svg{transition:none}}
/* NEW · HOT 표시는 탭 머리 한 곳에만(오너 2026-10-19 W-104 "썸네일에 별도 뱃지는 넣지 않는다 … 계속 표기되서 인지과부하") — 칸 안 카드 · 큰 목록 카드에는 딱지 없음 */
.dtag{flex:none;font-weight:900;letter-spacing:.04em;line-height:1;border-radius:999px;color:#fff;font-size:11.5px;padding:4px 8px}
.dtag.new{background:#0f6b55}.dtag.hot{background:#b4400e}
/* 카드 폭 = 최소 --dw · 최대 줄 폭의 1/5(PC 는 5장이 줄을 꽉 채운다 · 폰은 최소 폭이 이겨 좌우로 민다) */
.drow{--dg:10px;display:grid;grid-template-columns:repeat(var(--dn,5),minmax(var(--dw,164px),calc((100% - 4 * var(--dg)) / 5)));gap:var(--dg);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;padding:12px 2px 12px;scrollbar-width:thin;align-content:start}
.dc{scroll-snap-align:start;min-width:0;background:var(--paper);border:1px solid var(--line);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;cursor:pointer;box-shadow:0 1px 6px rgba(122,79,42,.08)}
.dc:hover{border-color:#cdbca8}
.dc:focus-visible{outline:3px solid var(--mint);outline-offset:2px}
/* 제목 2줄 — 아래 여백은 바깥(margin)으로: 안쪽 여백(padding)이면 잘린 셋째 줄 윗부분이 그 틈에 비친다(말라얄람어처럼 글자가 높은 언어 · 10-19 시안 360 화면에서 봄) · 줄 높이 1.4 */
.dc .dname{font-weight:800;font-size:13.5px;line-height:1.4;color:var(--ink);padding:7px 9px 0;margin-bottom:4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.8em;box-sizing:content-box;word-break:keep-all;overflow-wrap:anywhere}
.dc .ctype{font-size:11.5px;padding:0 9px 8px}
.dc .ctype svg{width:13px;height:13px}
@media(max-width:560px){.drow{--dw:130px;--dg:8px}.disc{padding:0 8px}.dtab{font-size:14.5px;padding:6px 6px;gap:6px}
  .dfold .dfoldt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}}
.row{flex-wrap:wrap}
.row .ccat{flex:1 1 100%;order:0;margin:0}
.row .rname{flex:1 1 100%;order:1}
.row .rowmeta{order:2;flex:1 1 auto;margin-top:2px;display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}   /* 유형은 카드와 같이 아래 줄에(오너 2026-09-06) */
.row .rgo{order:3;margin-inline-start:auto}
.flag{font-size:11px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:2px 8px;color:var(--muted);white-space:nowrap}
/* AR+VR 딱지(오너 2026-10-11 W-97 — VR 이 이어지는 과학 형제 · 은행): 카드 아래 줄 · 종이 창 제목 옆. 글자는 어느 언어나 'AR+VR' */
.flag.vr{background:#2f3b8f;border-color:#2f3b8f;color:#fff;font-weight:800;letter-spacing:.02em}
/* 곧 도착 (오너 2026-09-17) — 종이는 지금 받을 수 있지만 앱이 아직 이 콘텐츠를 열지 못한다.
   그림 왼쪽 위에 알약 배지, 그 위에 뿌리(하트)가 걸터앉는다. 캐릭터는 배지 밖으로 나오므로 .thumb 가 자르지 않게 여백을 둔다. */
.soon{position:absolute;inset-inline-start:22px;top:38px;z-index:2;display:inline-flex;align-items:center;font-size:12px;font-weight:800;line-height:1;
  padding-block:5px;padding-inline:22px 10px;border-radius:999px;background:#ffd45e;color:#5a3a06;box-shadow:0 2px 6px rgba(0,0,0,.18);white-space:nowrap}
/* 뿌리가 배지에 걸터앉는다. 카드 그림칸은 overflow:hidden 이라 캐릭터 머리가 칸 안에 들어오게 top 을 잡았다(2026-09-17 캡처로 확인).
   아랍·히브리처럼 오른쪽에서 왼쪽으로 읽는 언어에서는 배지와 캐릭터가 통째로 오른쪽에 선다(inset-inline-start) */
.soonchar{position:absolute;inset-inline-start:-20px;bottom:18%;width:42px;height:auto;display:block;pointer-events:none;filter:drop-shadow(0 1px 2px rgba(0,0,0,.2))}
.row .soon{position:static;margin-inline-start:2px}
/* 관리자 보기 전용 표시 — 색은 admin.js 가 주는 k 값(hold·conv·done·ready)으로 고른다 */
.stchip{position:absolute;inset-inline-end:10px;top:10px;z-index:3;font-size:11px;font-weight:800;line-height:1;padding:5px 9px;border-radius:999px;color:#fff;white-space:nowrap;box-shadow:0 1px 4px rgba(0,0,0,.2)}
.st-hold{background:#6f6a64}.st-conv{background:#d9822b}.st-done{background:#2f6fd6}.st-ready{background:#1a8a5a}.st-del{background:#b42318}.st-x{background:#1a1410}
.row .stchip{position:static;margin-inline-start:2px}
.row .soonchar{display:none}
.psoon{display:flex;align-items:flex-start;gap:10px;margin:2px 0 10px;padding:10px 12px;border-radius:12px;background:#fff6dd;border:1px solid #f0dca6}
.psoon .soonchar{position:static;flex:0 0 auto;width:46px;filter:none}
.psoon b{display:block;font-size:13px;font-weight:800;color:#5a3a06;margin-bottom:2px}
.psoon span{font-size:12.5px;color:#6b5330;line-height:1.45}
/* 묶음 (오너 2026-10-01 과학 형제 — 이어 보이게) — 카드 그림 왼쪽 아래 '묶음 n/N', 상세 창 '이어 보기' 줄 */
.sernum{position:absolute;inset-inline-start:10px;bottom:10px;z-index:2;font-size:11.5px;font-weight:800;line-height:1;padding:5px 9px;border-radius:999px;background:#e9f4ea;color:#28485a;border:1px solid #bcd9c0;white-space:nowrap}
.row .sernum{position:static;margin-inline-start:2px}
.pser{margin:0 0 16px;padding:12px;border:1px solid var(--line);border-radius:14px;background:#f6fbf6}
.pser h3{margin:0 0 8px;font-size:14px;color:#28485a}
.pser-row{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scroll-snap-type:x proximity}
.pser-it{flex:0 0 92px;scroll-snap-align:start;border:2px solid transparent;border-radius:10px;background:#fff;padding:4px;cursor:pointer;text-align:center;font:inherit;color:var(--ink)}
.pser-it img{display:block;width:100%;height:58px;object-fit:contain;background:#fff}
.pser-it span{display:block;font-size:11px;line-height:1.25;margin-top:3px;max-height:2.6em;overflow:hidden}
.pser-it.on{border-color:var(--mint-ink)} .pser-it .n{font-weight:800;color:var(--mint-ink)}
/* 인쇄 없이 해보기 (오너 2026-10-01 폰 방문자 안내) — 다른 화면(PC·태블릿)에 띄우고 폰 앱으로 비춘다 */
.ptry{margin:0 0 16px;padding:12px 14px;border-radius:14px;background:#eef6ff;border:1px solid #c9dcf3}
.ptry b{display:block;font-size:14px;color:#1e4d80;margin-bottom:4px}
.ptry p{margin:0 0 10px;font-size:13px;line-height:1.5;color:#33465c}
.ptry .ptry-btns{display:flex;flex-wrap:wrap;gap:8px}
.ptry .btn{font-weight:700}
/* 기기 두 대 (W-45 · W-47) — 역할 한 줄 · 폰은 '이 폰에 띄우기'를 글자 링크로 낮춤 · PC · 태블릿은 앱 받기 QR · 받는 화면 머리 띠 · 전체 화면 아래 할 일 띠 */
.ptry .ptry-role{display:block;font-weight:800;color:var(--brown);font-size:14px;margin:0 0 2px}
.ptry .ptry-how{margin:8px 0 0;font-size:12.5px;color:#33465c}
.ptry .ptry-here{font:inherit;background:none;border:0;padding:0;margin-top:8px;cursor:pointer;color:#1e4d80;font-size:13.5px;text-align:start;display:block}
.ptry .ptry-here span{text-decoration:underline}
.ptry .ptry-here small{display:block;color:#5b6b7c;font-size:12px}
.pqr{display:flex;align-items:center;gap:12px;margin-top:10px;padding:10px;border-radius:12px;background:#fff;border:1.5px dashed #c9dcf3}
.pqr b{display:block;font-size:14px;color:var(--brown)}.pqr small{display:block;font-size:12.5px;color:var(--muted)}
.pqr[hidden],.precv[hidden],.scrqr[hidden],.scrbar[hidden]{display:none!important}
.precv{margin:0 0 12px;padding:14px 16px;border-radius:16px;background:#fff6d9;border:2px solid #f0c94b}
.precv b{display:block;font-size:17px;color:#5a3d12}.precv p{margin:4px 0 10px;color:#6b5646;font-size:14px}
/* 화면에 띄우기 = 메인 '따라하기'와 같은 창(R4 · 2026-10-11): 어두운 바탕 · 흰 종이 위 그림 + 옆에 '이 그림을 비춰 보세요' · 3걸음(차례로 불이 켜진다) · 팁 · 앱 받기 QR · 닫기 X.
   걸음 · QR 은 그림 **밖**(그림을 가리면 인식이 깨진다 — W-45 · W-47). 그림을 누르면 안내를 감추고 그림만 크게. 가로로 긴 마커 그림이 많아 그림 칸이 남는 폭을 다 쓴다 */
.scrfull{position:fixed;inset:0;z-index:10000;background:#15110e;color:#fff;display:flex;align-items:center;justify-content:center;gap:clamp(20px,4vw,56px);padding:20px;box-sizing:border-box}
.scrfull .scrpic{flex:1 1 0;min-width:0;height:100%;margin:0;display:flex;align-items:center;justify-content:center}
.scrfull img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;background:#fff;padding:14px;border-radius:6px;box-sizing:border-box;cursor:pointer}
.scrbar{flex:0 1 400px;min-width:260px;text-align:start}
.scrbar h3{margin:0 0 18px;font-size:clamp(22px,2.6vw,30px);font-weight:900;line-height:1.25;color:#fff}
.scrbar ol{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.scrbar .st{display:flex;gap:14px;align-items:center;font-size:clamp(16px,1.6vw,19px);font-weight:700;line-height:1.45;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.06);transition:background .4s ease,transform .4s ease}
.scrbar .st.on{background:rgba(255,190,56,.18);transform:translateX(6px)}
[dir=rtl] .scrbar .st.on{transform:translateX(-6px)}
.scrbar .st b{flex:none;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.18);color:#fff;display:grid;place-items:center;transition:background .4s ease,color .4s ease}
.scrbar .st.on b{background:#ffbe38;color:#2f241c}
.scrbar .tip{display:block;color:#cfc4b8;font-size:14.5px;font-weight:500;line-height:1.5;margin:18px 0 16px}
.scrbar .noapp{font:inherit;font-size:14px;font-weight:700;color:#fff;background:transparent;border:1.5px solid rgba(255,255,255,.5);border-radius:999px;padding:9px 16px;cursor:pointer}
.scrbar .noapp:hover{background:rgba(255,255,255,.12)}
.scrqr{display:flex;align-items:center;gap:10px;background:#fff;color:var(--brown);border-radius:14px;padding:10px 12px;margin-top:12px;max-width:290px;cursor:pointer}
.scrqr b{display:block;font-size:14px}.scrqr small{display:block;font-size:12.5px;color:var(--muted)}
.scrfull .scrx{position:absolute;top:calc(16px + env(safe-area-inset-top,0px));inset-inline-end:16px;z-index:2;width:48px;height:48px;border-radius:999px;border:0;padding:0;background:rgba(255,255,255,.14);color:#fff;display:grid;place-items:center;cursor:pointer}
.scrfull .scrx:hover{background:rgba(255,255,255,.24)}
@media (max-width:760px){.scrfull{flex-direction:column;justify-content:flex-start;overflow:auto;padding:68px 16px 24px;gap:18px}
 .scrfull .scrpic{flex:none;width:100%;height:auto}.scrfull img{max-height:52vh}.scrfull.solo img{max-height:calc(100vh - 100px)}
 .scrbar{flex:none;width:100%;min-width:0}}
@media (prefers-reduced-motion:reduce){.scrbar .st{transition:none}}
.cname a{color:inherit;text-decoration:none}   /* 굽기 때 박은 카드의 제목 링크 — 수집기가 따라가게. 보이는 모양은 링크 전과 같게 (2026-09-11) */
.wr-wait #grid{visibility:hidden}   /* ?type= ?cat= 로 들어오거나 비교 시험 B2 쪽이면 박아 둔 카드가 바뀌기 전에 비치지 않게. render() 가 걷는다 */
.tips{background:#fff;border:1px dashed var(--line);border-radius:16px;padding:14px 18px;margin:0 0 16px;display:flex;gap:14px;align-items:flex-start}
.tips img{height:64px;width:auto;flex:none} .tips h3{margin:0 0 4px;font-size:15px;color:var(--mint-ink)} .tips ul{margin:0;padding-inline-start:18px;font-size:14px;line-height:1.6}
.tips>div{min-width:0;flex:1 1 auto;overflow-wrap:anywhere}   /* 긴 낱말(러시아어 · 우크라이나어)을 2배 글자로 키우면 이 칸이 줄지 않아 320 폰 화면을 334 ~ 356 까지 넘겼다(10-05 실측, 옛 라이브부터) */
@media(max-width:420px){.tips{flex-wrap:wrap}}
.tips .caution{font-size:13px;color:#c2410c;margin-top:4px}
.empty{padding:40px;text-align:center;color:var(--muted)}
/* 상세 패널 */
.scrim{position:fixed;inset:0;background:rgba(26,20,16,.45);display:none;z-index:40}
.scrim.open{display:block}
.panel{position:fixed;top:0;bottom:0;inset-inline-end:0;height:auto;width:min(520px,100%);background:var(--paper);box-shadow:-8px 0 30px rgba(0,0,0,.18);transform:translateX(100%);transition:transform .22s;z-index:50;display:flex;flex-direction:column}
[dir=rtl] .panel{transform:translateX(-100%)}
.panel.open{transform:none}
.phead{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line)}
.phead h2{margin:0;font-size:18px;color:var(--brown);flex:1;line-height:1.3}
.pbody{padding:16px;overflow:auto;flex:1;min-height:0}
/* 패널 높이는 top/bottom 으로 잡는다(height 아님) — 애드센스 스크립트가 광고 칸의 조상에 `height:auto !important` 를 인라인으로 심는다.
   height:100% 이던 때는 그 주입으로 패널이 화면보다 커져(갤23 실측 1123px/692px) 안쪽 스크롤이 죽고 광고가 화면 아래에 묻혔다 (2026-09-11 실기기) */
.pimg{background:#fff;border:1px solid var(--line);border-radius:14px;display:flex;align-items:center;justify-content:center;padding:12px}
.pimg img{max-width:100%;max-height:340px;object-fit:contain}
.pspec{margin:10px 0 14px;color:var(--muted);font-size:13px}
.pacts{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:16px}
.pacts .btn{font-weight:700} .pacts .btn[disabled]{opacity:.55;cursor:default}
/* 아이콘 줄 - 앱 받기 / 파일 받기 / 인쇄 / 공유. 글자는 aria-label 과 title 에만 둔다(51언어) */
.tool{width:46px;height:46px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);background:#fff;border-radius:14px;color:var(--ink);cursor:pointer;text-decoration:none;flex:none}
.tool:hover{background:#faf7f2} .tool[disabled]{opacity:.45;cursor:default}
.tool.main{background:var(--mint-ink);border-color:var(--mint-ink);color:#fff}
.pclose{width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);background:#fff;border-radius:999px;color:var(--ink);cursor:pointer;flex:none}
#printFrame{position:fixed;width:0;height:0;border:0;visibility:hidden}
.phow h3{margin:0 0 6px;font-size:15px;color:var(--mint-ink)} .phow ol{margin:0;padding-inline-start:20px;line-height:1.7}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:10px 16px;border-radius:999px;font-size:14px;display:none;z-index:60}
.toast.show{display:block}
/* 광고 칸 — 상세 패널 안 한 칸 (오너 2026-09-11). 받기 단추와 떨어진 '이렇게 해요' 아래 · '광고' 라벨 · 안 채워지면 자리째 숨긴다 */
.pdone{margin:14px 0 0;padding:12px 14px;border-radius:12px;background:var(--hi);border:1px solid var(--line);font-size:14px;line-height:1.45}
.pdone b{display:block;color:var(--mint-ink);margin-bottom:2px}
.pdone[hidden],.adslot[hidden]{display:none}
.adslot{margin:22px 0 4px;padding-top:12px;border-top:1px solid var(--line)}
.adlabel{margin:0 0 6px;font-size:11px;color:var(--gray);letter-spacing:.02em}
.adbox{min-height:90px}
.adbox ins.adsbygoogle[data-ad-status="unfilled"]{display:none!important}
.adhouse{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--line);border-radius:14px;background:#faf7f2;text-decoration:none;color:var(--ink)}
.adhouse img{width:56px;height:56px;border-radius:12px;flex:none}
.adhouse b{display:block;font-size:14px;line-height:1.35} .adhouse small{display:block;margin-top:2px;font-size:12.5px;color:var(--muted)}
.panel-open .fixedcta,.adlist-in .fixedcta{display:none}
.inapp #fixedcta,.inapp #pApp{display:none!important}   /* 우리 앱 안(웹뷰 이름표 WagzakRunApp)에서는 '앱 받기' 를 숨긴다 — 앱팀 요청 09-12·09-18 */
.letterbtn{position:relative}   /* 답장 점(.newsdot) 자리 */
.pletter{margin:16px 0 4px;text-align:center;font-size:13px;line-height:1.5}
.pletter a,.emptyletter a,.cr-letter{color:var(--muted);text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}
.emptyletter{margin:14px 0 0;font-size:14px}
.cr-letterwrap{margin:16px 0 0;text-align:center;font-size:13px}.cr-letterwrap[hidden]{display:none}
.inapp #pLetterWrap,.inapp .emptyletter,.inapp #crLetter{display:none!important}   /* 앱 안에서는 웹 편지 입구를 모두 숨긴다(앱은 설정 '질문해요') */
.inapp #letterBtn{display:none!important}   /* 앱 안에서는 편지 봉투도 숨긴다 — 앱에는 설정 '질문해요'(uid · 앱 판 · 기기를 붙여 연다)가 있다. 여기서 누르면 빈 값으로 '웹 편지'처럼 들어간다(W-59 · 검토 2번) */
.adbox{width:100%}   /* 부모 폭을 명시해야 반응형 광고가 크기를 잰다(adsense/answer/9183362) */
.adlist{max-width:760px;margin:4px auto 28px}   /* '더 보기' 단추 줄(아래 여백 44px) + 구분선 아래 — 단추와 붙지 않게 */   /* 한 화면에 광고 하나(W-19) — 패널이 열려 있는 동안 바닥 '앱 받기' 띠를 내린다 */
@media print{.adslot,.pdone{display:none}}
/* 받기 대기 안내 창 (오너 2026-09-11) — 안내가 먼저, 광고는 맨 아래 한 칸. 창이 열린 동안 바닥 '앱 받기' 띠를 내린다(한 화면 광고 하나) */
.dlw{position:fixed;inset:0;z-index:70;background:rgba(40,30,20,.45);display:flex;align-items:center;justify-content:center;padding:16px}
.dlw[hidden]{display:none}
.dlwin{position:relative;background:var(--paper);border-radius:20px;box-shadow:0 12px 40px rgba(0,0,0,.25);width:min(440px,100%);max-height:100%;overflow:auto;padding:20px 20px 14px;outline:0}
.dlwin .pclose{position:absolute;top:14px;inset-inline-end:14px}
.dlwin h2{margin:0;padding-inline-end:44px;font-size:19px;line-height:1.35;color:var(--mint-ink)}
.dlwsub{margin:2px 0 12px;padding-inline-end:44px;color:var(--muted);font-size:14px}
.dlwwhat{margin:0;font-weight:700;font-size:14px}
.dlwp{margin:6px 0 12px;padding:10px 12px;border-radius:12px;background:var(--hi);border:1px solid var(--line);font-size:14px;line-height:1.45}
.dlwsteps{margin:0;padding-inline-start:20px;line-height:1.7;font-size:14px}
.dlw .adslot{margin-top:16px}
.dlw-open .fixedcta{display:none}
.dlw-open{overflow:hidden}   /* 창 뒤 목록이 굴러가 목록 끝 광고가 딸려 오지 않게 */
.dlw-open .adlist{visibility:hidden}   /* 창이 열린 동안 목록 끝 광고를 감춘다 — 한 화면 광고 하나(창 광고). 닫으면 그대로 돌아온다 */
.dlwp a{color:var(--mint-ink);font-weight:700;word-break:break-all}
@media (max-width:640px){.hero{grid-template-columns:1fr}
.hero>img{display:none}                    /* 뿌리 그림만 숨긴다. 예전 `.hero img` 는 세 걸음 아이콘까지 지웠다(오너 2026-09-06) */
.hero h1{font-size:24px}
.steps{gap:10px 18px}.step img{width:44px;height:44px}
header .wrap{gap:8px;padding:0 12px}
.brand img.word{display:block}   /* RUN 글자와 링크를 모바일에서도 남긴다(오너 2026-09-06) · 높이는 크롬 --logo-h */
.btn{padding:7px 10px;font-size:13px}.wrap{padding:0 12px}}
/* 헤더 단추가 셋(편지 · 종 · 언어, W-59)이 되면 320 ~ 374 폰에서 한 줄이 45px 넘친다(서버02 실측 2026-10-05: 320 폭에 365).
   좁은 폰에서만 로고 22px(위 .logo 줄은 이 헤더 그림에 class 가 없어 안 걸린다) · 단추 폭 34 · 틈을 줄여 51px 를 번다. 390 이상은 그대로 */
@media (max-width:389px){header .wrap{gap:6px}.brand{gap:6px}.head-acts{gap:2px}.head-acts .langbtn{width:34px}}   /* 로고 22px 는 크롬 --logo-h(389 이하) */

.cr-entry{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:8px 16px;border:0;border-radius:999px;background:var(--gold);color:var(--ink);font:inherit;font-size:15px;font-weight:800;line-height:1.25;cursor:pointer;white-space:normal;overflow-wrap:anywhere;text-align:center;box-shadow:0 2px 8px rgba(176,128,20,.28);max-width:100%}
.cr-entry:hover{background:#ffc94a}
.cr-entry:focus-visible{outline:3px solid var(--mint-ink);outline-offset:2px}
.cr-entry svg{width:20px;height:20px;flex:none}
@media(max-width:560px){.cr-entry{padding:8px 13px;font-size:14px}}
/* 코스 동안 거르개(갈래 · 주제 · 결과 줄 · 찾기 · 보기 · 앱에서 되는 것 먼저)와 머리띠는 숨기고, 나가면 그대로(값은 건드리지 않는다) */
.cr-incourse .heroband,.cr-incourse .typerow,.cr-incourse #bar,.cr-incourse #topics,.cr-incourse #tfoldBody,.cr-incourse #resline,.cr-incourse .morewrap,.cr-incourse #adList,.cr-incourse #wrsticky{display:none!important}
/* 코스 띠 — 목록 끝까지 붙어 따라온다(B7). 띠를 담은 흰 껍데기가 아래 16px 를 가려, 밑으로 지나가는 광고가 띠 단추와 24px 넘게 떨어진다(N4) */
.cr-headwrap{position:sticky;top:var(--wr-head-h,var(--head-h));z-index:18;background:var(--white);padding:8px 0 16px}
html.wr-nohead .cr-headwrap{top:0}
.cr-head{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding:12px 16px;background:var(--mint-ink);color:#fff;border-radius:16px;box-shadow:0 4px 14px rgba(15,107,85,.25)}
.cr-head.flash{animation:crflash .9s ease 1}@keyframes crflash{0%{box-shadow:0 0 0 0 rgba(246,183,60,.9)}100%{box-shadow:0 0 0 14px rgba(246,183,60,0)}}
.cr-head .cr-ico{display:inline-flex;flex:none}.cr-head .cr-ico svg{width:30px;height:30px}
.cr-ht{display:flex;flex-direction:column;min-width:0;flex:1 1 12em}
.cr-ht b{font-size:17px;line-height:1.3;overflow-wrap:anywhere}
.cr-ht small{opacity:.92;font-size:13px;overflow-wrap:anywhere}
.cr-acts{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.cr-hbtn{min-height:44px;padding:8px 14px;border-radius:12px;border:0;background:#fff;color:var(--mint-ink);font:inherit;font-size:14px;font-weight:800;line-height:1.3;cursor:pointer;white-space:normal;overflow-wrap:anywhere;text-align:center}
.cr-hbtn.ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.75)}
.cr-hlink{min-height:44px;padding:0 6px;border:0;background:none;color:#fff;font:inherit;font-size:14px;font-weight:700;text-decoration:underline;cursor:pointer;white-space:normal;overflow-wrap:anywhere}
.cr-x{width:44px;height:44px;flex:none;border-radius:999px;border:1.5px solid rgba(255,255,255,.75);background:transparent;color:#fff;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0}
.cr-x svg{width:18px;height:18px}
/* 코스 카드 번호 · 곧 와요 · 대기 · 종이 아닌 칸(AR 친구 · 진짜 지폐) · 더 해 보기 — 카드 꼴(cardHTML)을 그대로 쓰고 표시만 더한다(R2/B2 같은 꼴) */
.card.cr-num{position:relative}.card.cr-num .ctop{padding-inline-end:52px}
.cr-step{position:absolute;top:8px;inset-inline-end:8px;z-index:3;min-width:34px;height:34px;padding:0 6px;border-radius:999px;background:var(--mint-ink);color:#fff;font-weight:900;font-size:16px;line-height:1;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 3px #fff,0 2px 6px rgba(0,0,0,.25);unicode-bidi:isolate}
.row .cr-step{position:static;margin-inline-start:2px;box-shadow:none;min-width:26px;height:26px;font-size:13px}
.card.picked.cr-num::after{display:none}
.cr-note{flex:1 1 100%;font-size:12.5px;font-weight:700;word-break:keep-all;overflow-wrap:anywhere}
.card.cr-soon{border:2px dashed #e0b23c;background:#fffaf0}.card.cr-soon .cr-note{color:#7a5000}
.card.cr-admin,.card.cr-wait{border:2px dashed #9a5ca8;background:#f8f2fb}.card.cr-admin .cr-note,.card.cr-wait .cr-note{color:#6d3f7a}.card.cr-wait{cursor:default}
.card.cr-more{border:2px dashed var(--line)}.card.cr-more .cr-note{color:var(--muted)}
.card.cr-next{border:2px dashed var(--mint-ink);background:var(--mint-soft);cursor:default}.card.cr-next:hover{transform:none}
.card.cr-next .thumb{background:transparent}.card.cr-next .cr-note{color:var(--mint-ink)}
.card.cr-next.cr-friend{cursor:pointer}
.card.cr-next.money{border-color:#8a5a12;background:#fff7e6}.card.cr-next.money .cr-note{color:#7a4a10}
.card.cr-next.needpaper{border-color:#9a5ca8;background:#f8f2fb}
.cr-foot{display:none;flex-wrap:wrap;gap:8px;margin:14px 0 0}
.cr-sent{height:1px;display:none}.cr-incourse .cr-sent{display:block}
#adCourse{max-width:760px;margin:32px auto 28px}
body:not(.cr-incourse) #adCourse{display:none!important}
.cr-sheet-open #adCourse,.panel-open #adCourse,.dlw-open #adCourse{visibility:hidden}
.adcourse-in .fixedcta{display:none}
/* 목록 끝 광고가 화면에 든 동안 — 붙는 머리(헤더 · 첫 화면 조종 줄) 아래 20px 를 흰 칸으로 가려, 밑으로 지나가는 광고가 머리 단추와 24px 넘게 떨어지게(N4 — 머리 단추는 아래 끝에서 6px) */
.adlist-in header::after,.adlist-in #wrsticky::after{content:'';position:absolute;left:0;right:0;top:calc(100% + 1px);height:20px;background:var(--white)}
.cr-incourse header::after{display:none}
.cr-ended{margin:0 0 14px;padding:12px 14px;border-radius:14px;background:#fff6dd;border:1px solid #f0dca6;font-size:14px;color:#5a3a06}
.cr-sim{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
/* 바닥에서 올라오는 창(PC 폭 760 · 높이 86% — 오너 원안) */
.cr-scrim{position:fixed;inset:0;background:rgba(30,20,10,.38);z-index:42;opacity:0;pointer-events:none;transition:opacity .2s}
.cr-scrim.on{opacity:1;pointer-events:auto}
.cr-sheet{position:fixed;left:50%;top:14vh;bottom:0;width:min(760px,100%);display:flex;flex-direction:column;z-index:43;background:#fff;border-radius:22px 22px 0 0;box-shadow:0 8px 28px rgba(60,40,20,.16);transform:translate(-50%,105%);visibility:hidden;transition:transform .25s ease,visibility 0s .25s}
.cr-sheet.on{transform:translate(-50%,0);visibility:visible;transition:transform .25s ease}
.cr-grab{width:44px;height:5px;border-radius:9px;background:#d9cdbf;margin:10px auto 6px;flex:none}
.cr-shead{display:flex;align-items:flex-start;gap:12px;padding:0 20px}
.cr-shead>div{min-width:0;flex:1}
.cr-shead h2{margin:0;font-size:21px;line-height:1.3;color:var(--brown);overflow-wrap:anywhere;outline:0}
.cr-shead p{margin:2px 0 0;color:var(--muted);font-size:13.5px;overflow-wrap:anywhere}
.cr-sx{flex:none;width:44px;height:44px;margin-bottom:28px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--ink);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0}
.cr-sbody{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:8px 20px 12px}
.cr-sfoot{border-top:1px solid var(--line);padding:24px 20px 16px;background:#fff}
.cr-sheet .adslot{margin:32px 0 28px}
.cr-sheet-open{overflow:hidden}
.cr-sheet-open .fixedcta{display:none}
.cr-sheet-open .adlist{visibility:hidden}
.cr-subh{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;margin:16px 2px 8px;font-size:13.5px;font-weight:800;color:var(--brown)}
.cr-subh small{color:var(--gray);font-weight:600}
.cr-clist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.cr-cc{display:flex;flex-direction:column;gap:4px;width:100%;height:100%;padding:12px 14px;border:1px solid var(--line);border-radius:16px;background:#fff;color:var(--ink);font:inherit;text-align:start;cursor:pointer}
.cr-cc:hover{border-color:var(--brown);background:#fffaf2}
.cr-cc b{font-size:16px;line-height:1.3;overflow-wrap:anywhere}
.cr-cc .cr-meta{font-size:12.5px;font-weight:700;color:var(--gray)}
.cr-cc .cr-d{font-size:13px;line-height:1.4;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cr-cc.locked{cursor:default;opacity:.82;background:#faf8f5}.cr-cc.locked:hover{border-color:var(--line);background:#faf8f5}
.cr-cc.hiddenc,.cr-cc.hiddenc:hover{border:2px dashed #9a5ca8;background:#f8f2fb}
.cr-thumbs{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px;align-items:center}
.cr-thumbs span{position:relative;width:60px;height:45px;border-radius:8px;border:1px solid var(--line);background:#faf7f2;display:flex;align-items:center;justify-content:center;overflow:hidden}
.cr-thumbs img{max-width:94%;max-height:94%}
.cr-thumbs i{position:absolute;top:2px;inset-inline-start:3px;min-width:12px;height:15px;padding:0 4px;border-radius:6px;background:var(--mint-ink);color:#fff;font-style:normal;font-size:10.5px;font-weight:900;line-height:15px;text-align:center}
.cr-thumbs i.s{background:#ffd45e}.cr-thumbs i.a{background:#9a5ca8}
.cr-moren{font-size:12px;font-weight:700;color:var(--gray)}
.cr-tags{display:flex;flex-wrap:wrap;gap:6px}
.cr-tag{font-size:11.5px;font-weight:800;border-radius:6px;padding:1px 7px;background:#f4ede4;color:var(--muted)}
.cr-tag.auto{background:#e3f0ff;color:#1d4f91}.cr-tag.mine{background:var(--mint-soft);color:var(--mint-ink)}.cr-tag.new{background:#ffe1de;color:#a12d22}
.cr-tag.lock{background:#eee;color:#555}.cr-tag.money{background:#fff0d6;color:#7a4a10}.cr-tag.must{background:#efe3f5;color:#6d3f7a}
.cr-dropnote{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:6px 2px 0;font-size:12.5px;font-weight:700;color:#a12d22}
.cr-ack{min-height:44px;min-width:44px;padding:0 12px;border:1.5px solid currentColor;border-radius:10px;background:#fff;color:inherit;font:inherit;cursor:pointer}
.cr-adminbar{margin:0 0 10px;padding:8px 12px;border-radius:10px;background:#f8f2fb;border:1px solid #d9c2e3;color:#6d3f7a;font-size:13px;font-weight:700}
.cr-minego{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:12px 16px;border:2px dashed var(--mint-ink);border-radius:16px;background:var(--mint-soft);color:var(--mint-ink);font:inherit;font-weight:800;text-align:start;cursor:pointer}
.cr-minego svg{width:26px;height:26px;flex:none}
.cr-minego span{display:flex;flex-direction:column;min-width:0;overflow-wrap:anywhere}.cr-minego small{font-weight:600;color:var(--muted)}
/* 내 놀이 만들기 — 바닥에 붙는 차례 줄(광고 없음 · 위 여백 24px — 뒤로 지나가는 목록 끝 광고와 단추 사이) */
.cr-tray{position:fixed;left:0;right:0;bottom:0;z-index:36;background:#fff;border-top:3px solid var(--mint-ink);box-shadow:0 -6px 20px rgba(0,0,0,.12);padding:24px 16px calc(12px + env(safe-area-inset-bottom,0px));transform:translateY(110%);visibility:hidden;transition:transform .2s,visibility 0s .2s}
.cr-tray.on{transform:none;visibility:visible;transition:transform .2s}
.cr-th{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;max-width:1120px;margin:0 auto}
.cr-th b{color:var(--mint-ink);font-size:16px;white-space:nowrap}
.cr-strip{display:flex;gap:6px;overflow-x:auto;flex:1 1 10em;min-width:0;list-style:none;margin:0;padding:0}
.cr-strip li{position:relative;flex:none;width:58px;height:44px;border-radius:8px;border:1px solid var(--line);background:#faf7f2;display:flex;align-items:center;justify-content:center;overflow:hidden}
.cr-strip img{max-width:94%;max-height:94%}
.cr-strip i{position:absolute;top:1px;inset-inline-start:2px;padding:0 4px;border-radius:6px;background:var(--mint-ink);color:#fff;font-style:normal;font-size:10.5px;font-weight:900}
.cr-strip .cr-empty{width:auto;border:0;background:none;color:var(--gray);font-size:13px;padding:0 4px}
.cr-tacts{display:flex;flex-wrap:wrap;gap:8px}
.cr-tbtn{min-height:44px;padding:8px 16px;border-radius:12px;border:0;background:var(--mint-ink);color:#fff;font:inherit;font-size:14px;font-weight:800;line-height:1.3;cursor:pointer;white-space:normal;overflow-wrap:anywhere;text-align:center}
.cr-tbtn:disabled{opacity:.45;cursor:default}
.cr-tbtn.ghost{background:#fff;color:var(--mint-ink);border:1.5px solid var(--mint-ink)}
.cr-tbtn.plain{background:none;color:var(--muted);text-decoration:underline}
.cr-tbtn .cr-sh{display:none}
.cr-sfrow{display:flex;flex-wrap:wrap;gap:8px}.cr-sfrow>.cr-tbtn{flex:1 1 7em;min-width:0}.cr-sfrow>.cr-tbtn.main{flex:2 1 11em}
.cr-thint{max-width:1120px;margin:4px auto 0;font-size:12.5px;color:var(--gray)}
.cr-building .fixedcta,.cr-building .wr-bar{display:none}
/* 차례 고치기 — 세로 목록, 위 · 아래 단추가 주 방법(끌어 옮기기는 PC 덧) */
.cr-nmrow{display:flex;gap:8px;align-items:center;margin:0 0 12px}
.cr-nmrow input{flex:1;min-width:0;height:44px;border:1px solid var(--line);border-radius:10px;padding:0 12px;font:inherit}
.cr-rlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.cr-rlist li{display:grid;grid-template-columns:auto 60px 1fr auto;align-items:center;gap:8px;padding:6px 8px;border:1px solid var(--line);border-radius:12px;background:#fffdf9}
.cr-rlist .n{min-width:28px;height:28px;padding:0 4px;border-radius:999px;background:var(--mint-ink);color:#fff;font-size:14px;font-weight:900;display:flex;align-items:center;justify-content:center}
.cr-rlist img{width:60px;height:44px;object-fit:contain;background:#faf7f2;border-radius:6px}
.cr-rlist .nm{min-width:0;font-size:14px;font-weight:700;overflow-wrap:anywhere}
.cr-rlist .mv{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px}
.cr-rlist .mv button{width:44px;height:44px;border-radius:10px;border:1px solid var(--line);background:#fff;color:var(--muted);font-weight:900;cursor:pointer}
.cr-rlist .mv button:disabled{opacity:.35;cursor:default}
/* 받기 — 고르기 = 라디오(색만으로 구분하지 않게 동그라미) · 파일 이름은 왼쪽에서 오른쪽(번호 · 주소 bidi 격리) */
.cr-order1{margin:0 0 12px;font-size:14px;font-weight:700;color:var(--ink);overflow-wrap:anywhere}
.cr-dlopt{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;width:100%;min-height:56px;margin-bottom:8px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:#fff;color:var(--ink);font:inherit;text-align:start;cursor:pointer}
.cr-dlopt::before{content:'';width:18px;height:18px;flex:none;align-self:center;border-radius:999px;border:2px solid var(--gray);box-sizing:border-box}
.cr-dlopt[aria-checked="true"]{border:2px solid var(--mint-ink);background:var(--mint-soft)}.cr-dlopt[aria-checked="true"]::before{border:6px solid var(--mint-ink)}
.cr-dlopt b{font-size:15.5px}.cr-dlopt small{margin-inline-start:auto;font-weight:700;color:var(--gray);overflow-wrap:anywhere}
.cr-dlopt .sub{flex-basis:100%;padding-inline-start:28px;font-size:13px;color:var(--muted)}
.cr-rec{padding:1px 6px;border-radius:6px;background:var(--mint-ink);color:#fff;font-size:11.5px;font-weight:800}
.cr-files{list-style:none;margin:8px 0 0;padding:10px 12px;border-radius:12px;background:#faf6f0;font-size:12.5px;line-height:1.75;color:var(--muted);overflow-wrap:anywhere}
.cr-files .fn{font-family:ui-monospace,Consolas,monospace;unicode-bidi:isolate}.cr-files .mk{color:var(--ink);font-weight:700}
.cr-warn{margin:8px 0 0;padding:8px 10px;border-radius:10px;background:#fff4dd;color:#7a5000;font-size:12.5px}
.cr-url{width:100%;height:48px;padding:0 12px;border:1px solid var(--line);border-radius:10px;font:inherit;direction:ltr;text-align:left;unicode-bidi:isolate}
/* 상세 창 — 코스 화면에서 연 종이면 '코스 2/5' · 앞 · 뒤(코스 차례) */
.pcourse{display:flex;align-items:center;gap:8px;margin:0 0 12px;padding:6px 8px;border-radius:12px;background:var(--mint-soft);color:var(--mint-ink);font-size:13.5px;font-weight:800}
.pcourse span{flex:1;text-align:center}
.pcourse button{min-width:44px;min-height:44px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--mint-ink);font:inherit;font-size:20px;line-height:1;cursor:pointer}
.pcourse button:disabled{opacity:.4;cursor:default}
/* 알림은 바닥 앱 받기 띠 위에(조작을 가리지 않게 — F10). 차례 줄이 뜨면 그 위로(화면이 bottom 을 다시 잡는다) */
.toast{bottom:calc(84px + env(safe-area-inset-bottom,0px));max-width:min(560px,92vw);border-radius:16px;text-align:center}
.cr-entry[hidden],.cr-headwrap[hidden],.cr-foot[hidden],.cr-ended[hidden],#adCourse[hidden],.pcourse[hidden],#shAd[hidden]{display:none!important}
/* 바닥 칸(공통 푸터) — 긴 낱말(독일어)을 글자 200% 로 키우면 두 칸 격자가 화면 밖으로 밀려 페이지 전체가 줄었다(창 · 띠 단추가 화면 밖 — 3단계 손 시험이 잡음). 칸이 줄어들고 낱말을 접게 */
.fcols>*{min-width:0}.fcols a,.fcols h4{overflow-wrap:anywhere}
@media(max-width:640px){
  .cr-head{padding:10px 12px;gap:8px;border-radius:14px}.cr-head .cr-ico,.cr-opt{display:none}
  .cr-ht b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}   /* 폰은 이름 한 줄(전체 이름은 title) — 붙는 띠가 글자 200% 에서도 화면을 덜 가리게(시안 8판과 같음) */
  .cr-acts{order:3;width:100%}.cr-x{order:2}.cr-acts #cDl{flex:1}
  .cr-incourse .cr-foot:not([hidden]){display:flex}.cr-foot .cr-tbtn{flex:1 1 8em}
  .cr-sheet{top:12vh}.cr-sbody{padding:6px 14px 10px}.cr-shead{padding:0 14px}.cr-sfoot{padding:24px 14px 14px}
  .cr-clist{grid-template-columns:1fr}.cr-thumbs span{width:54px;height:40px}
  .cr-th b{font-size:15px}.cr-strip{order:3;flex-basis:100%}.cr-tacts{margin-inline-start:auto}.cr-tbtn .cr-lg{display:none}.cr-tbtn .cr-sh{display:inline}
  .cr-rlist li{grid-template-columns:auto 52px 1fr;grid-template-areas:"n img nm" "mv mv mv"}
  .cr-rlist .n{grid-area:n}.cr-rlist img{grid-area:img;width:52px}.cr-rlist .nm{grid-area:nm}.cr-rlist .mv{grid-area:mv}
}
/* 낮은 화면(가로 폰 — 오너 '우리 폰은 가로모드다') — 글자 200% 에서 창 머리 · 바닥이 높이를 다 먹어 몸통이 20 ~ 25px 로 눌리고
   바닥 단추(#mineGo 등)가 화면 밖으로 밀렸다(코덱스 13차 N13, 844×390). 낮은 화면에서는 창이 화면 높이를 다 쓰고
   머리 · 몸통 · 바닥이 한 줄기로 흘러 **창 전체가 스크롤**된다 — 코스 이름을 읽고 고를 수 있고 모든 단추에 닿는다 */
@media(max-height:560px){
  .cr-sheet{top:0;display:block;overflow-y:auto;overscroll-behavior:contain;border-radius:0}
  .cr-grab{display:none}
  .cr-shead{padding-top:10px}
  .cr-sx{margin-bottom:8px}
  .cr-sbody{overflow:visible;min-height:0}
  .cr-sfoot{padding-top:14px}
}
.fl-noletter #letterBtn,.fl-noletter .emptyletter,.fl-noletter #pLetterWrap,.fl-noletter #crLetter{display:none!important}.fl-nocourse #courseBtn{display:none!important}
.hero:has(.wr-use-list){grid-template-columns:minmax(0,1fr)}
.hero:has(.wr-use-list)>img{display:none}
.hero .wr-use-list{display:grid;grid-template-columns:64px minmax(0,1fr) auto;align-items:center;gap:18px;margin:18px 0 14px;padding:14px 22px;background:#fffdf7;border:1px solid #cddfd3;border-radius:20px;color:#254f3c;max-width:100%;line-height:1.4}
.hero .wr-use-list-character{width:64px;height:80px;object-fit:contain;filter:none;cursor:pointer}
.wr-use-list-copy{min-width:0}.wr-use-list strong{display:block;font-size:18px;word-break:keep-all}
.wr-use-list small{display:block;margin-top:5px;font-size:12px;color:#52634b;word-break:keep-all}
.wr-use-list a{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-height:48px;padding:12px 20px;background:#116950;color:#fff;font-size:15px;font-weight:700;border-radius:99px;text-decoration:none;white-space:nowrap}
.wr-use-list a:focus-visible{outline:3px solid #bb8115;outline-offset:4px}
.wr-use-list a{white-space:normal;max-width:24em;text-align:center;overflow-wrap:anywhere}.wr-use-list strong,.wr-use-list small{overflow-wrap:anywhere}
.wr-use-list .wr-use-label-mobile{display:none}
@media(max-width:640px){.hero .wr-use-list{grid-template-columns:48px minmax(0,1fr) auto;gap:9px;padding:12px;margin:16px 0 12px;border-radius:16px}.hero .wr-use-list-character{width:48px;height:62px}.wr-use-list strong{font-size:14px}.wr-use-list small{font-size:10px;line-height:1.5}.wr-use-list a{min-height:44px;padding:10px 13px;font-size:13px}.wr-use-list .wr-use-label-pc{display:none}.wr-use-list .wr-use-label-mobile{display:inline}}
@media(max-width:360px){.hero .wr-use-list{grid-template-columns:42px minmax(0,1fr) auto;gap:6px;padding:10px}.hero .wr-use-list-character{width:42px;height:58px}.wr-use-list strong{font-size:12px}.wr-use-list small{font-size:10px}.wr-use-list a{padding:10px;font-size:12px}}
@media(max-width:640px){.wr-use-list a{max-width:8em}.wr-use-list-copy{text-align:start}}
#wrPin{position:fixed;inset:0;z-index:10001;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center}#wrPin form{background:#fff;border-radius:16px;padding:18px;display:grid;gap:10px;min-width:240px;box-shadow:0 10px 30px rgba(0,0,0,.3)}#wrPin input{font-size:22px;letter-spacing:6px;text-align:center;padding:8px;border:1px solid #ccc;border-radius:10px}#wrPin button{padding:9px;border-radius:10px;border:0;background:#0f766e;color:#fff;font-weight:700;cursor:pointer}#wrPin button[data-x]{background:#e5e7eb;color:#111}#wrPin p{margin:0;min-height:1em;color:#b91c1c;font-size:13px}.hero h1,.hero>img{touch-action:manipulation}