/* 색은 전부 토큰(위 LIGHT·DARK_T)이다 — 여기 색을 직접 적지 않는다. 글자 크기·모서리도 아래 단계만 쓴다 (2026-11-05 R4-3: 16가지 → 9단계, 14가지 → 3단계 + 알약. 큰 숫자 40px·404 의 56px 만 따로). */ :root{--bg:#ffffff;--fg:#1d1714;--mut:#685b52;--line:#ebe2da;--card:#ffffff;--chip:#f8f2ec;--accent:#c2410c;--on-accent:#ffffff;--new:#1f5c99;--on-new:#ffffff;--alc:#8a1b1b;--on-alc:#ffffff;--scrim:rgba(0,0,0,.42);--on-scrim:#ffffff;--shadow:rgba(0,0,0,.14);--video:#000000;--photo:#ffffff;--up:#c0392b;--down:#2e6fd1;color-scheme:light} :root{--t-xs:12px;--t-s:13px;--t-m:14px;--t-b:15px;--t-l:16px;--t-xl:18px;--t-2xl:20px;--t-3xl:22px;--t-4xl:28px; --r-s:3px;--r-m:8px;--r-l:12px;--r-pill:999px} /* 다크는 두 길로 켜진다 — 시스템 설정(@media, 사람이 고른 게 없을 때)과 막대의 테마 버튼 (:root[data-theme], THEME_BOOT 가 첫 페인트 전에 단다). 값은 DARK 한 벌을 둘이 같이 쓴다. */ @media(prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#14110f;--fg:#f5ede6;--mut:#b3a59a;--line:#352c26;--card:#1e1916;--chip:#2a231e;--accent:#fb8a4a;--on-accent:#14110f;--new:#8cc4f2;--on-new:#14110f;--alc:#8a1b1b;--on-alc:#ffffff;--scrim:rgba(0,0,0,.5);--on-scrim:#ffffff;--shadow:rgba(0,0,0,.5);--video:#000000;--photo:#ffffff;--up:#e2533f;--down:#5b94e8;color-scheme:dark}} :root[data-theme=dark]{--bg:#14110f;--fg:#f5ede6;--mut:#b3a59a;--line:#352c26;--card:#1e1916;--chip:#2a231e;--accent:#fb8a4a;--on-accent:#14110f;--new:#8cc4f2;--on-new:#14110f;--alc:#8a1b1b;--on-alc:#ffffff;--scrim:rgba(0,0,0,.5);--on-scrim:#ffffff;--shadow:rgba(0,0,0,.5);--video:#000000;--photo:#ffffff;--up:#e2533f;--down:#5b94e8;color-scheme:dark} *{box-sizing:border-box;-webkit-tap-highlight-color:transparent} html{-webkit-text-size-adjust:100%} body{margin:0;background:var(--bg);color:var(--fg); font:16px/1.55 -apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo",Pretendard,sans-serif} a{color:inherit} /* 메타 칸(mt()) — 가운데 점 대신 얇은 세로줄로 가른다 */ .mt+.mt::before{content:"";display:inline-block;width:1px;height:.75em;margin:0 .5em;background:currentColor;opacity:.35;vertical-align:-.05em} .w{max-width:1120px;margin:0 auto;padding:0 16px; padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))} /* 사이트 막대(nav()). 글자+밑줄이다 — 홈의 분류 탭(둥근 칩, sticky)과 모양을 갈라야 '다른 페이지로 간다' 와 '이 목록을 거른다' 가 안 헷갈린다. sticky 가 아닌 것도 그래서다 — 둘 다 붙으면 375px 화면 위 100px 넘게를 먹는다. 좁으면 한 줄로 옆으로 민다(스크롤 막대는 숨김). */ /* .sh = 막대. 로고(.sn0) · 탭(.sn, 옆으로 밀림) · 아이콘(.sx: 찜·검색·테마)이 한 줄이다. 480px 이하는 두 줄 — 1줄 로고 + 아이콘, 2줄 탭 전용(DECISIONS MR-14). 한 줄에 다 두면 375px 에서 탭이 두세 개밖에 안 보이고, 찜(♡ N)이 켜지면 그마저 밀린다. 대가는 위쪽 44px 한 줄(막대는 sticky 아님). */ .sh{display:flex;align-items:center;margin:0 -16px;padding-left:16px;border-bottom:1px solid var(--line)} .sn0{flex:none;display:inline-flex;align-items:center;gap:7px;min-height:44px;margin-right:8px; color:var(--fg);text-decoration:none} .sn{flex:1;min-width:0;display:flex;align-items:center;gap:2px;overflow-x:auto; -webkit-overflow-scrolling:touch;scrollbar-width:none;white-space:nowrap} .sn::-webkit-scrollbar{display:none} .sn a{flex:none;display:inline-flex;align-items:center;min-height:44px;padding:2px 10px 0;font-size:var(--t-m); color:var(--mut);text-decoration:none;border-bottom:2px solid transparent} /* 가로 스크롤 상자 안이라 바깥 외곽선은 잘린다(검수 ⚪-5) — 안쪽으로 그린다. */ .sn a:focus-visible{outline-offset:-3px} .sn a[aria-current="page"]{color:var(--fg);font-weight:700;border-bottom-color:var(--accent)} .sn a.ssn{color:var(--accent);font-weight:700} /* 심볼(icon.svg)과 워드마크(wordmark.svg 마스크). 글자는 그대로 두어 화면읽기·검색이 '신메뉴' 로 읽는다. */ .lg{flex:none;width:22px;height:22px;border-radius:var(--r-s)} .wm{display:inline-block;height:17px;aspect-ratio:3.5640/1.0940;background:var(--fg);color:transparent;overflow:hidden; white-space:nowrap;vertical-align:middle;-webkit-mask:url(/wordmark.svg?v=a3) center/contain no-repeat; mask:url(/wordmark.svg?v=a3) center/contain no-repeat} h1 .wm{height:28px} @media(max-width:480px){.sh{flex-wrap:wrap}.sx{margin-left:auto} .sn{order:3;flex:0 0 calc(100% + 16px);margin-left:-16px;padding-left:6px;border-top:1px solid var(--line)} /* 좁은 화면은 탭 좌우 여백만 줄인다(글자 크기·높이 44px 는 그대로). 그래도 넘치면 가로로 민다(아래). */ .sn a{padding:2px 8px 0}} /* 탭이 막대보다 길면 가로 스크롤 + 넘친 쪽 끝을 흐리게(site.js 가 .fl·.fr 을 켠다). 탭 수와 상관없이 버틴다. */ .sn.fr{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent); mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)} .sn.fl{-webkit-mask-image:linear-gradient(90deg,transparent,#000 28px);mask-image:linear-gradient(90deg,transparent,#000 28px)} .sn.fl.fr{-webkit-mask-image:linear-gradient(90deg,transparent,#000 28px,#000 calc(100% - 28px),transparent); mask-image:linear-gradient(90deg,transparent,#000 28px,#000 calc(100% - 28px),transparent)} .sx{flex:none;display:flex;padding-right:6px} /* 481px 이상(2026-11-06 운영자 '탭이 많아서 잘려'): 탭은 로고·아이콘 아래 자기 줄 전체를 쓰고, 그래도 넘치면 다음 줄로 감는다(가로 스크롤·끝 흐림 없음). 좁은 폰은 위 480px 규칙대로 한 줄 가로 스크롤. */ @media(min-width:481px){.sh{flex-wrap:wrap}.sx{margin-left:auto} .sn{order:3;flex:0 0 100%;flex-wrap:wrap;overflow:visible;white-space:normal;margin-left:-10px;border-top:1px solid var(--line)} .sn.fl,.sn.fr{-webkit-mask-image:none;mask-image:none}} .sx a,.sx button{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px; padding:0;border:0;background:none;color:var(--mut);cursor:pointer;border-radius:var(--r-m)} .sx a:hover,.sx button:hover{color:var(--fg)} .sx svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .sx [hidden]{display:none} .sx .fvn{width:auto;min-width:44px;gap:3px;padding:0 6px;font-size:var(--t-s);font-weight:700;text-decoration:none} /* 테마 버튼 그림은 '누르면 바뀔 쪽' 이다 — 밝을 때 달, 어두울 때 해. */ .tg .i-s{display:none} :root[data-theme=dark] .tg .i-s{display:block}:root[data-theme=dark] .tg .i-m{display:none} @media(prefers-color-scheme:dark){:root:not([data-theme=light]) .tg .i-s{display:block} :root:not([data-theme=light]) .tg .i-m{display:none}} /* 맨 위로(site.js 가 만든다). 화면 1.5배 넘게 내려가면 오른쪽 아래에 뜬다. 홈 둘째 줄부터는 카드 위에 겹치지만 늘 같은 자리라 가리는 건 카드 귀퉁이뿐이고, 푸터 끝은 아래 여백(88px)이 받는다. */ .top{position:fixed;z-index:20;right:max(16px,calc(env(safe-area-inset-right) + 12px)); bottom:max(16px,calc(env(safe-area-inset-bottom) + 12px));width:44px;height:44px;border-radius:50%; border:1px solid var(--line);background:var(--card);color:var(--fg);box-shadow:0 4px 14px var(--shadow); display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer; opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .2s,transform .2s,visibility .2s} .top.on{opacity:1;visibility:visible;transform:none} .top svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round} @media(prefers-reduced-motion:reduce){.top{transition:none}} /* ── 디자인 공통 규칙(2026-10-30 디자이너 검수 AUDIT 0절) ── 글자 12·14·16/18·22/28 네 단, 여백 8·12·16·24·40, 카드 1종(사진 1:1 흰 타일 + 브랜드 12 + 이름 14/700 두 줄), 칩 36·버튼 44, 섹션 머리 1종(h2 18/20), 액센트는 누를 것·숫자 강조에만. */ header{padding:24px 0 12px} h1{margin:0;font-size:var(--t-3xl);font-weight:800;letter-spacing:-.02em} @media(min-width:768px){h1{font-size:var(--t-4xl)}} .sub{color:var(--mut);margin:4px 0 0;font-size:var(--t-xs)} .lead{margin:8px 0 0;font-size:var(--t-m);font-weight:600;color:var(--fg)} footer{border-top:1px solid var(--line);margin-top:40px;padding:16px 0 88px;color:var(--mut);font-size:var(--t-xs);line-height:1.7} footer a{color:var(--mut)} /* 사진 카드 격자 — 열 수는 사이트 전체 하나: 375 2 · 768 3 · 1024 5 · 1280+ 6(운영자 '줄이 꽉 차게'). '더 보기' 단위는 30(2·3·5·6 의 공배수)이라 어느 폭에서도 마지막 줄 말고는 꽉 찬다. */ .g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 12px;padding:16px 0 40px} @media(min-width:768px){.g{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 16px}} @media(min-width:1024px){.g{grid-template-columns:repeat(5,minmax(0,1fr));gap:32px 20px}} @media(min-width:1280px){.g{grid-template-columns:repeat(6,minmax(0,1fr))}} .c{position:relative;display:flex;flex-direction:column;text-decoration:none;color:inherit;min-width:0} /* 화면 밖 카드는 그리지 않는다(홈 카드 1,000여 장). 자리만 잡아 두는 높이(contain-intrinsic-size)는 폭별 홈 줄 높이 실측 평균이다(2026-10-29: 375px 353 · 768px 414 · 1280px 438) — 너무 다르면 스크롤하며 그려질 때 스크롤 막대가 튄다. auto 라 한 번 그린 카드는 실제 높이를 기억한다. */ /* 카드 감싸개(.cw). 카드가 통째로 라 그 안에 찜 버튼을 넣을 수 없다(링크 안 대화형 요소 금지). 감싸개가 격자 칸이 되고 카드(.c)가 칸을 채우며, 찜 버튼(.fv, site.js 가 단다)은 그 위에 겹친다. */ .cw{position:relative;display:flex;min-width:0} .cw>.c{flex:1;min-width:0} .cw[hidden]{display:none} /* 찜 버튼: 보이는 원은 32px 흰 반투명, 누르는 자리는 44px(검수 P2-10). 사진 오른쪽 위. */ .fv{position:absolute;top:0;right:0;width:44px;height:44px;border:0;padding:0;background:none;color:#1d1d1f; display:flex;align-items:center;justify-content:center;cursor:pointer} .fv::before{content:"";position:absolute;width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.85); box-shadow:0 1px 3px rgba(0,0,0,.18)} .fv svg,.fvn svg{position:relative;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round} .fvn svg{width:20px;height:20px} .fv[aria-pressed="true"]{color:var(--on-accent)} .fv[aria-pressed="true"]::before{background:var(--accent)} .fv[aria-pressed="true"] svg{fill:currentColor} .g .c{content-visibility:auto;contain-intrinsic-size:auto 240px} @media(min-width:768px){.g .c{contain-intrinsic-size:auto 300px}} /* height:auto 가 반드시 있어야 한다. 의 presentational hint 가 height:400px 로 들어와 aspect-ratio 를 이긴다. 전에 홈 CSS 에만 적어둬서 하위 647페이지 4,748장이 세로 400px 로 늘어나 있었다. 여기가 정본이다. */ /* 사진 타일: 1:1, contain + 흰 바탕(포장 사진이 잘리지 않게), 모서리 12. 다크에선 살짝 낮춘다(검수 0-8). */ .c img,.ph{width:100%;height:auto;aspect-ratio:1;object-fit:contain;box-sizing:border-box;padding:0; background:var(--chip);border-radius:var(--r-l);display:block} /* 상품 이미지: 흰 여백을 줄여 카드 안에서 덜 떠 보이게 확대하고, 사진 타일 밖으로는 자르기 */ .c .ci{display:block;width:100%;aspect-ratio:1;overflow:hidden;border-radius:var(--r-l);background:var(--chip)} .c .ci img{display:block;width:100%;height:100%;aspect-ratio:auto;box-sizing:border-box;padding:0;object-fit:cover;transform:scale(1.4);border-radius:0} .c .ci .ph{width:100%;height:100%;aspect-ratio:auto;padding:0;border-radius:0} :root[data-theme=dark] .c img{filter:brightness(.92)} @media(prefers-color-scheme:dark){:root:not([data-theme=light]) .c img{filter:brightness(.92)}} /* 사진 없는 상품: 브랜드 첫 글자 타일(검수 0-9). */ .ph{background:var(--chip);display:flex;align-items:center;justify-content:center;font-size:var(--t-4xl);font-weight:700; color:var(--mut)} .b{padding:8px 2px 0;display:flex;flex-direction:column;gap:2px;flex:1;min-width:0} /* 카드 배지(19·▶ 조회수·새로)는 사진 왼쪽 위에 얹는다 — 사진 아래는 브랜드·이름 두 줄만. */ .c .m{position:absolute;left:6px;top:6px;right:44px;display:flex;gap:4px;align-items:center;flex-wrap:wrap} .c .m:empty{display:none} .c .m .lb2{background:var(--scrim);color:var(--on-scrim)} /* 카드 '조회 N'(site.js 가 붙인다) — 사진 위라 배지처럼 어두운 바탕을 깐다(맨 글자는 밝은 사진에서 안 읽혔다). */ .c .m .vw{font-size:var(--t-xs);line-height:1.3;font-weight:600;padding:1px 6px;border-radius:var(--r-s);background:var(--scrim);color:var(--on-scrim)} /* 글자는 375px 에서도 12px 밑으로 안 내린다(배지·브랜드·날짜가 10~11px 였다). 배지는 글자를 키운 만큼 위아래 여백을 줄여 줄 높이를 거의 그대로 둔다. */ .lb{font-size:var(--t-xs);line-height:1.3;font-weight:700;padding:1px 5px;border-radius:var(--r-s);background:var(--accent);color:var(--on-accent)} .lb2{background:var(--chip);color:var(--mut)} .br{font-size:var(--t-xs);color:var(--mut)} .c .br{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .c .cn{display:block;margin:0;font-size:var(--t-m);font-weight:700;line-height:1.35;letter-spacing:-.01em;word-break:keep-all; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} time{font-size:var(--t-xs);color:var(--mut)} /* 격자 칸이 긴 글자(nowrap 제목)에 밀려 넓어지지 않게 — 격자 안 항목은 최소 너비 0(2026-10-31 신메뉴 소식 칸 깨짐) */ main li,main .cw,main .c{min-width:0} /* 영상 라이트박스(site.js) */ .vlb{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.86);display:flex;align-items:center;justify-content:center;padding:16px} .vli{position:relative;width:min(1100px,90vw);color:#fff} .vlf{position:relative;width:100%;aspect-ratio:16/9;background:#000;border-radius:var(--r-l);overflow:hidden} .vlf.sh{height:90vh;width:auto;aspect-ratio:9/16;max-width:100%;margin:0 auto} .vlf iframe{position:absolute;inset:0;width:100%;height:100%;border:0} .vlm{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin-top:10px;font-size:var(--t-m)} .vlm b{flex-basis:100%;font-size:var(--t-l)}.vlc{color:#ccc;font-size:var(--t-xs)} .vly{color:#fff;font-weight:700;margin-left:auto;min-height:44px;display:inline-flex;align-items:center} .vlx{position:absolute;right:0;top:-52px;width:44px;height:44px;border:0;border-radius:50%;background:rgba(255,255,255,.15); color:#fff;font-size:var(--t-4xl);cursor:pointer} .vlp,.vln{position:absolute;top:calc(50% - 40px);width:44px;height:44px;border:0;border-radius:50%;background:rgba(255,255,255,.15); color:#fff;font-size:var(--t-4xl);cursor:pointer} .vlp{left:-56px}.vln{right:-56px}.vlp[hidden],.vln[hidden]{display:none} @media(max-width:767px){.vlb{padding:0}.vli{width:100vw}.vlf{border-radius:0}.vlf.sh{height:80vh} .vlm{padding:0 16px}.vlx{right:8px}.vlp{left:4px}.vln{right:4px}} .empty{grid-column:1/-1;text-align:center;color:var(--mut);padding:64px 0;font-size:var(--t-m);line-height:1.8} :focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-s)} /* 본문으로 건너뛰기(skip_link). 키보드로 처음 Tab 하면 왼쪽 위에 뜬다 — 막대 탭 6개·아이콘 3개를 건너뛴다. */ .skip{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .skip:focus{position:fixed;left:16px;top:8px;width:auto;height:auto;z-index:30; background:var(--accent);color:var(--on-accent);padding:8px 12px;border-radius:var(--r-m);text-decoration:none} .bc{font-size:var(--t-xs);color:var(--mut);padding:12px 0 0;word-break:keep-all} @media(max-width:767px){.bc1{display:none}} /* 혼자 서 있는 링크(빵부스러기·'브랜드 신메뉴 전체 보기'·구독 등)는 손가락 높이 24px 이상 (WCAG 2.5.8). 글 속 링크는 예외라 문단 안 링크는 그대로 둔다. */ .bc a{text-decoration:none;display:inline-block;padding:4px 0} .bl a,.out a,.mp a,.rss a,.wkn a{display:inline-block;padding:2px 0} .bc i{font-style:normal;margin:0 5px} .hero{margin:14px 0 0;border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden;background:var(--chip)} @media(min-width:600px){.hero{max-width:420px}} .hero img,.hero .ph{width:100%;height:auto;aspect-ratio:1;object-fit:cover;display:block} .tt{margin:18px 0 0;font-size:var(--t-3xl);line-height:1.3;letter-spacing:-.02em;word-break:keep-all} .bl{margin:8px 0 0;font-size:var(--t-m)} .bl a{color:var(--accent);font-weight:600;text-decoration:none} .dd{margin:12px 0 0;font-size:var(--t-b);line-height:1.7;word-break:keep-all} dl.f{margin:20px 0 0;padding:16px 0 0;border-top:1px solid var(--line); display:grid;grid-template-columns:76px 1fr;gap:9px 12px;font-size:var(--t-m)} dl.f dt{margin:0;color:var(--mut)} dl.f dd{margin:0;word-break:keep-all} dl.f .est{font-size:var(--t-s);color:var(--mut)} .out{margin:18px 0 0;font-size:var(--t-b);word-break:keep-all} .out a{color:var(--accent);font-weight:700;text-decoration:none} .yt{margin:9px 0 0;font-size:var(--t-s);line-height:1.6;word-break:keep-all} .yt a{color:var(--mut);text-decoration:none} .yt a:hover{text-decoration:underline} .yt2{margin-top:2px;font-size:var(--t-xs);color:var(--mut)} /* 가까운 매장 찾기(_map_links). 바깥 링크라 .out 과 같은 색, 한 단계 작게. */ p.mp{margin:12px 0 0;font-size:var(--t-m);word-break:keep-all} .mp a{color:var(--accent);font-weight:600;text-decoration:none} /* 유튜브 카드. 375px 에서 minmax(220px) 는 한 줄 한 장이라 네 장이 1,061px 로 세로를 다 먹었다(실측) — 좁은 화면은 두 장씩 놓는다. 영상 제목·채널명엔 띄어쓰기 없는 영문·주소가 흔해서 끊어 줘야 한다. 안 그러면 페이지가 옆으로 밀린다 (긴 주소 하나로 375px 화면 폭이 797px 이 됐다). */ .vs{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;margin:8px 0 6px} @media(max-width:599px){.vs{grid-template-columns:1fr;gap:16px}} .v{display:block;min-width:0;text-decoration:none;color:inherit} .v img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r-l);background:var(--line)} .vt{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:6px;font-size:var(--t-s);line-height:1.4;overflow-wrap:anywhere} .vm{display:block;margin-top:2px;font-size:var(--t-xs);color:var(--mut);overflow-wrap:anywhere} .v .vm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .vss{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))} @media(max-width:599px){.vss{grid-template-columns:1fr 1fr}} .v.sh img{aspect-ratio:9/16} .v.on iframe{display:block;width:100%;aspect-ratio:16/9;border:0;border-radius:var(--r-l);background:var(--video)} .v.sh.on iframe{aspect-ratio:9/16} .bl2{list-style:none;margin:6px 0;padding:0} .bl2 li{padding:8px 0;border-bottom:1px solid var(--line);font-size:var(--t-m);line-height:1.45;overflow-wrap:anywhere} .bl2 a{color:inherit;text-decoration:none;display:inline-block;padding:4px 0} .bl2 a:hover{text-decoration:underline} .sp{font-weight:600;color:var(--mut)} .bl2 .sp{display:inline-block;margin-right:6px;padding:1px 8px;border-radius:var(--r-pill);background:var(--chip);font-size:var(--t-xs)} /* 섹션 머리 1종(검수 0-4): 18/20px, 위 40·아래 12. 제목 옆 회색 설명(small)은 싣지 않는다. */ h2.sec{margin:40px 0 12px;font-size:var(--t-xl);font-weight:700;letter-spacing:-.01em} @media(min-width:768px){h2.sec{font-size:var(--t-2xl)}} h2.sec small{display:none} /* 화제의 신상(목록 머리). 아래 전체 목록과 붙어 보이지 않게 바닥 여백만 줄인다. */ .g.hot{padding-bottom:4px} .hot-h{margin:22px 0 0;font-size:var(--t-b)} .hot-h small{font-weight:400;font-size:var(--t-xs);color:var(--mut);margin-left:6px} p.more{margin:6px 0 0;font-size:var(--t-s);color:var(--mut)} /* 브랜드 공식 SNS. .more 바로 밑이라 같은 크기로 두고 색만 링크색이다. */ .sns{margin:6px 0 0;font-size:var(--t-s);word-break:keep-all} /* 공유·구독·주간(2026-10-28). 상세 1,000여 장에 다 붙으니 짧게. 색은 공통 변수만. */ .shr{margin:12px 0 0;font-size:var(--t-s);color:var(--mut)} .shr button{font:inherit;font-size:var(--t-m);min-height:40px;padding:0 16px;margin-right:8px; border-radius:var(--r-pill);border:1px solid var(--line);background:var(--chip);color:var(--fg)} .rss{margin:6px 0 0;font-size:var(--t-s)}.rss a,.wkn a{color:var(--accent)} .cpw{margin:8px 0 0;font-size:var(--t-s);color:var(--mut)} .cpw button{font:inherit;font-size:var(--t-s);min-height:36px;padding:0 14px;margin-right:8px;border-radius:var(--r-pill); border:1px solid var(--line);background:var(--chip);color:var(--fg);cursor:pointer} .cpw textarea{display:block;width:100%;min-height:160px;margin-top:8px;font:inherit;font-size:var(--t-s); background:var(--card);color:var(--fg);border:1px solid var(--line);border-radius:var(--r-m);padding:8px} h3.sec3{margin:18px 0 0;font-size:var(--t-m);color:var(--mut);font-weight:700} .rv0{margin:10px 0 0;font-size:var(--t-m);line-height:1.6;word-break:keep-all} /* 우리 기록(상세)·데이터 요약(목록). 상품명·브랜드명에 띄어쓰기 없는 영문이 흔해서 끊어 준다. */ .rec{margin:8px 0 0;padding-left:18px;font-size:var(--t-m);line-height:1.65;word-break:keep-all;overflow-wrap:anywhere} .rec li{margin:3px 0} .rec a,.sum a{color:var(--accent)} .sum{margin:6px 0 0;font-size:var(--t-s);line-height:1.6;word-break:keep-all;overflow-wrap:anywhere} /* 흰 프레임과 안쪽 여백을 없애 투명 제품 이미지가 페이지 바탕과 이어지게 한다. */ .hero{background:transparent;border:0;border-radius:var(--r-l)} .hero img{object-fit:contain;padding:0;box-sizing:border-box;background:transparent} :root[data-theme=dark] .hero img{filter:brightness(.92)} @media(prefers-color-scheme:dark){:root:not([data-theme=light]) .hero img{filter:brightness(.92)}} @media(min-width:768px){.dtop{display:grid;grid-template-columns:minmax(0,48%) minmax(0,1fr);gap:32px;align-items:start} .dtop .hero{max-width:560px;width:100%}.dinfo .tt{margin-top:14px;font-size:var(--t-4xl)}} @media(max-width:767px){.hero{max-width:360px}} /* 리뷰 영상 데스크톱 4열(최소 260), 커뮤니티 글 2열 카드 */ @media(min-width:768px){.cml{display:grid;grid-template-columns:1fr 1fr;gap:12px} .cml li{border:1px solid var(--line);border-radius:var(--r-l);padding:10px 14px}} .tt{margin:16px 0 0;font-size:var(--t-3xl)} .bl{margin:4px 0 0;font-size:var(--t-b)} .dm{margin:10px 0 0} .dm .lb{font-size:var(--t-s);padding:3px 8px;border-radius:var(--r-m)} /* 행동 버튼 줄: 같은 폭 칸 한 줄(검수 P1-16 — 375 에서 두 줄로 접히지 않게), 높이 52 */ .act{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:8px;margin:16px 0 0} .act button,.act .ab{display:flex;align-items:center;justify-content:center;min-height:52px;margin:0;padding:0 6px;font:inherit; font-size:var(--t-m);font-weight:600;border-radius:var(--r-l);border:1px solid var(--line);background:var(--chip);color:var(--fg); text-decoration:none;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .act .ab{background:var(--accent);border-color:var(--accent);color:var(--on-accent)} .act button[hidden]{display:none} .act span{display:none} .act span:not(:empty){display:block;grid-column:1/-1;grid-row:2;font-size:var(--t-xs);color:var(--mut)} @media(max-width:400px){.act button,.act .ab{font-size:var(--t-xs)}} .rsum{margin:12px 0 0;font-size:var(--t-m)} .rsum a{display:inline-block;padding:4px 0;color:var(--accent);font-weight:600;text-decoration:none} .dd{margin:18px 0 0} .fd{display:flex;gap:8px;overflow-x:auto;margin:8px -16px 0;padding:0 16px 4px;scrollbar-width:none} .fd::-webkit-scrollbar{display:none} @media(max-width:599px){.fd{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent); mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}} .fd a{flex:none;display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border-radius:var(--r-pill); border:1px solid var(--line);background:var(--chip);color:var(--fg);font-size:var(--t-m);text-decoration:none} @media(min-width:600px){.fd{flex-wrap:wrap;margin:8px 0 0;padding:0}} details.rl{margin:14px 0 0;border:1px solid var(--line);border-radius:var(--r-l);padding:0 14px} details.rl summary{cursor:pointer;min-height:44px;display:flex;align-items:center;flex-wrap:wrap;gap:0 6px; font-size:var(--t-m);font-weight:600} details.rl summary small{font-weight:400;font-size:var(--t-xs);color:var(--mut)} details.fx{margin:22px 0 0;border-top:1px solid var(--line)} details.fx summary{cursor:pointer;min-height:48px;display:flex;align-items:center;font-size:var(--t-b);font-weight:700} details.fx dl.f{margin:0 0 8px;padding:0;border:0} details.fx .rec{margin:0 0 8px} .rcv[hidden]{display:none} details.fx summary,details.rl summary{list-style:none} details.fx summary::-webkit-details-marker,details.rl summary::-webkit-details-marker{display:none} details.fx summary::after,details.rl summary::after{content:"";margin-left:auto;flex:none;width:8px;height:8px; border-right:2px solid var(--mut);border-bottom:2px solid var(--mut);transform:rotate(45deg) translate(-2px,-2px)} details[open].fx summary::after,details[open].rl summary::after{transform:rotate(-135deg)} .pw3{margin:12px 0 0;font-size:var(--t-m)}.pw3 ul{list-style:none;margin:4px 0;padding:0}.pw3 li{padding:2px 0}.pw3 a{color:var(--accent)} .nmb{margin:10px 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px} .nmbtn{min-height:44px;padding:0 18px;border-radius:var(--r-pill);border:0;background:var(--accent);color:var(--on-accent); font:inherit;font-weight:700;cursor:pointer} #nmmsg{font-size:var(--t-s);color:var(--mut)} #nmap{height:280px;margin:12px 0 0;border-radius:var(--r-l);overflow:hidden;background:var(--chip)} .nml{list-style:none;margin:8px 0 0;padding:0}.nml li{display:flex;flex-wrap:wrap;gap:2px 8px;padding:8px 0;border-bottom:1px solid var(--line)} .nml b{color:var(--accent)}.nml small{flex-basis:100%;color:var(--mut);font-size:var(--t-xs)} .nmk{display:block;width:24px;height:24px;line-height:24px;border-radius:50%;background:#1e7a3a;color:#fff;text-align:center; font:700 12px/24px sans-serif;box-shadow:0 1px 3px rgba(0,0,0,.3)} .nme{display:block;width:14px;height:14px;border-radius:50%;background:#2e6fd1;border:3px solid #fff;box-shadow:0 1px 3px rgba(0,0,0,.4)} .shp svg{display:block;width:100%;height:90px;margin:8px 0 4px;background:var(--chip);border-radius:var(--r-m)} .shp .spl{fill:none;stroke:var(--accent);stroke-width:2.5;vector-effect:non-scaling-stroke} .shp .spm{stroke:var(--mut);stroke-dasharray:4 4;vector-effect:non-scaling-stroke} .shp .spt{fill:var(--mut);font-size:11px} .shp .shw{margin:6px 0 0;font-size:var(--t-m)}.shp .shw b{color:var(--accent)} .srq{display:flex;gap:8px;margin:16px 0 8px}.srq input{flex:1;min-height:48px;padding:0 16px;font:inherit;font-size:var(--t-l); border-radius:var(--r-pill);border:1px solid var(--line);background:var(--chip);color:var(--fg)} #srm{font-size:var(--t-s);color:var(--mut);min-height:1.4em} .srl{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:4px 20px} .srl a{display:grid;grid-template-columns:56px minmax(0,1fr);gap:12px;align-items:center;padding:8px 0;color:inherit;text-decoration:none; border-bottom:1px solid var(--line)} .srl img,.srl .ph{width:56px;height:56px;border-radius:var(--r-m);object-fit:cover;background:var(--photo);display:grid;place-items:center; font-weight:700;color:var(--mut)} .srl small{display:block;color:var(--mut);font-size:var(--t-xs)}.srl b{font-weight:600} .srl .k{display:inline-block;margin-left:6px;font-size:var(--t-xs);font-weight:700;color:var(--accent)} .doc{max-width:720px;padding:4px 0 48px;font-size:var(--t-b);line-height:1.75;word-break:keep-all} .doc h2{margin:36px 0 6px;font-size:var(--t-xl);letter-spacing:-.01em} .doc h3{margin:22px 0 2px;font-size:var(--t-l)} .doc p,.doc ul{margin:6px 0} .doc ul{padding-left:20px} .doc a{color:var(--accent)} .doc .when{margin-top:30px;font-size:var(--t-s);color:var(--mut)} .doc .src{font-size:var(--t-m);overflow-wrap:anywhere} .phd,.doc.post{max-width:680px;margin-left:auto;margin-right:auto} .phd h1{font-size:var(--t-3xl);line-height:1.35;word-break:keep-all;letter-spacing:-.02em} @media(min-width:768px){.phd h1{font-size:var(--t-4xl)}} .phd .sub{margin-top:10px;font-size:var(--t-s)} .ptoc{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0} .ptoc a{font-size:var(--t-s);padding:6px 12px;border-radius:var(--r-pill);background:var(--chip);color:var(--fg);text-decoration:none} .doc.post{font-size:var(--t-l);line-height:1.85;padding-bottom:64px} @media(min-width:768px){.doc.post{font-size:var(--t-xl)}} .doc.post article>p:first-child{font-size:1.08em;color:var(--mut);margin:20px 0 8px} .doc.post p{margin:.55em 0} .doc.post h2{margin:64px 0 6px;padding-top:22px;border-top:3px solid var(--fg);font-size:var(--t-2xl);line-height:1.4; scroll-margin-top:72px;word-break:keep-all} @media(min-width:768px){.doc.post h2{font-size:var(--t-3xl)}} .doc.post h2+p{color:var(--mut)} .doc.post h3{margin:44px 0 12px;padding-top:28px;border-top:1px solid var(--line);font-size:var(--t-xl);line-height:1.45; word-break:keep-all} .doc.post h2+h3,.doc.post h2+p+h3{border-top:0;padding-top:4px} .doc.post .pimg{margin:0 0 14px} .doc.post .pimg img{display:block;width:100%;max-height:520px;object-fit:contain;border-radius:var(--r-l);background:var(--photo)} .doc.post em{display:block;margin-top:40px;font-size:var(--t-s);font-style:normal;color:var(--mut)} .rf{display:grid;gap:14px;max-width:640px;margin:16px 0}.rf label{display:grid;gap:6px;font-weight:600;font-size:var(--t-m)} .rf input,.rf select,.rf textarea{font:inherit;font-size:var(--t-l);padding:10px 12px;border-radius:var(--r-l);border:1px solid var(--line); background:var(--bg);color:var(--fg)}.rf textarea{min-height:140px}.rf small{font-weight:400;color:var(--mut)} .rf button{font:inherit;font-weight:700;min-height:44px;border-radius:var(--r-pill);border:0;background:var(--accent);color:var(--on-accent);cursor:pointer} .rf button:disabled{opacity:.6}#rmsg{font-weight:600;min-height:1.5em} .doc .cml a{display:inline-flex;align-items:center;min-height:48px;padding:0 24px;border-radius:var(--r-pill);background:var(--accent); color:var(--on-accent);font-weight:700;font-size:var(--t-l);text-decoration:none} .bt{display:flex;gap:6px;margin:12px 0 0}.bt a{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--chip);color:var(--fg);font-size:var(--t-m);text-decoration:none}.bt [aria-current=page]{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:700} .pgr{list-style:none;margin:16px 0 40px;padding:0;display:grid;grid-template-columns:1fr;gap:28px 20px} @media(min-width:768px){.pgr{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(min-width:1280px){.pgr{grid-template-columns:repeat(3,minmax(0,1fr))}} .pcd{display:block;color:inherit;text-decoration:none;border-radius:var(--r-l);transition:box-shadow .2s,transform .2s} .pcd:hover{box-shadow:0 8px 24px var(--shadow);transform:translateY(-2px)} .pst{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:repeat(3,1fr);gap:3px;aspect-ratio:3/2;border-radius:var(--r-l); overflow:hidden;background:var(--chip)} .pst img,.pst span{display:block;width:100%;height:100%;min-height:0;box-sizing:border-box;padding:5%;object-fit:contain; background:var(--photo);transition:transform .3s} .pst>:first-child{grid-row:1/-1} .pst span{background:var(--chip)} .pcd:hover .pst img{transform:scale(1.04)} .pcd b{display:block;margin-top:10px;font-size:var(--t-xl);font-weight:800} .pdl{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:4px;font-size:var(--t-m)} .up{color:var(--up);font-weight:700}.dn{color:var(--down);font-weight:700} .pbc{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px} .pbc span{font-size:var(--t-xs);padding:3px 10px;border-radius:var(--r-pill);background:var(--chip);color:var(--mut)} @media(prefers-reduced-motion:reduce){.pcd,.pcd:hover,.pst img,.pcd:hover .pst img{transition:none;transform:none}} /* 이번 주(달) 히어로: 큰 숫자 + 분류 비율 막대 + 사진 2줄 */ .phr{margin:16px 0 0;padding:20px;border-radius:var(--r-l);background:var(--chip)} .phr .big{font-size:40px;font-weight:800;line-height:1.1} .phr .big small{font-size:var(--t-l);font-weight:600;color:var(--mut);margin-left:6px} .kbar{display:flex;height:12px;border-radius:var(--r-pill);overflow:hidden;margin:14px 0 6px;background:var(--line)} .kbar i{display:block;height:100%} .kleg{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:var(--t-xs);color:var(--mut)} .kleg i{display:inline-block;width:10px;height:10px;border-radius:var(--r-s);margin-right:4px;vertical-align:-1px} .phr .mr{margin-left:0;margin-right:0} .phr .hmo2{display:inline-flex;align-items:center;min-height:44px;margin-top:6px;font-size:var(--t-m);font-weight:700;color:var(--accent);text-decoration:none} .gf{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0}.gf[hidden]{display:none} .gf button{appearance:none;-webkit-appearance:none;border:1px solid var(--line);background:var(--chip);color:var(--fg); font:inherit;font-size:var(--t-m);padding:0 14px;border-radius:var(--r-pill);cursor:pointer;min-height:36px} .gf button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)} .gmo{text-align:center;margin:0 0 24px}.gmore{font:inherit;font-size:var(--t-m);min-height:44px;padding:0 22px;border-radius:var(--r-pill); border:1px solid var(--line);background:var(--chip);color:var(--fg);cursor:pointer}.gmore[hidden]{display:none} .lx{margin:24px 0 0;padding:16px 0 0;border-top:1px solid var(--line);font-size:var(--t-m)} .lx .cpw,.lx .rss,.lx .sns,.lx .mp,.lx .more,.lx .sum,.lx .kx{margin:8px 0 0} .kx{line-height:2} .kxn{margin:40px 0 0}.kxn h2{margin:0;font-size:var(--t-l)} .flwp{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:10px 0 0;font-size:var(--t-s);color:var(--mut)}.flwp span{display:none}.flw:not([hidden])+span{display:inline}.flw{min-height:40px;padding:0 16px;border-radius:var(--r-pill);font:inherit;font-size:var(--t-m);font-weight:600;border:1px solid var(--accent);background:var(--accent);color:var(--on-accent);cursor:pointer}.flw[aria-pressed=true]{background:var(--chip);color:var(--fg);border-color:var(--line)} .bcr{display:flex;gap:12px;overflow-x:auto;margin:16px -16px 0;padding:0 16px 4px;scrollbar-width:none} .bcr::-webkit-scrollbar{display:none} .bch{flex:none;width:84px;display:flex;flex-direction:column;align-items:center;gap:4px;color:inherit;text-decoration:none} .bch img,.bch .ph{width:72px;height:72px;border-radius:50%;object-fit:contain;background:var(--photo);border:1px solid var(--line); display:flex;align-items:center;justify-content:center;font-size:var(--t-l);font-weight:700;color:var(--mut)} .bch .ph{background:var(--chip)} .bch b{font-size:var(--t-xs);font-weight:600;max-width:84px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .bx{list-style:none;margin:8px 0 0;padding:0;display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:0 20px;max-width:960px} .bx li{min-width:0;padding:7px 0;border-bottom:1px solid var(--line);font-size:var(--t-m);line-height:1.45; overflow-wrap:anywhere;word-break:keep-all} .bx a{color:var(--accent);font-weight:600;text-decoration:none;display:inline-block;padding:4px 0} .bx .n{margin-left:6px;font-size:var(--t-xs);color:var(--mut)} h3.bs{margin:20px 0 0;font-size:var(--t-m)} h3.bs a,h2.sec a{color:inherit;text-decoration:none} h3.bs small{font-weight:400;font-size:var(--t-xs);color:var(--mut);margin-left:4px} .idx{padding:0 0 48px} .bxd{margin:40px 0 0}.bxd summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-size:var(--t-l);font-weight:700} .bt{display:flex;gap:6px;margin:14px 0 0} .bt a,.bt span{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border-radius:var(--r-pill); border:1px solid var(--line);background:var(--chip);color:var(--fg);font-size:var(--t-m);text-decoration:none} .bt [aria-current="page"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:700} .bt span{color:var(--mut)} .am{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:0 20px} .am a{display:grid;grid-template-columns:56px minmax(0,1fr);gap:10px;align-items:center;padding:8px 0; border-bottom:1px solid var(--line);color:inherit;text-decoration:none;min-height:56px} .am img,.am .ph{width:56px;height:56px;border-radius:var(--r-m);object-fit:cover;background:var(--chip);display:block} .am b{font-size:var(--t-m);font-weight:600;line-height:1.35;word-break:keep-all} .am .lb{margin-left:6px;vertical-align:1px} .amn{margin:12px 0 0;font-size:var(--t-m);color:var(--mut)} .amc{margin:8px 0 0;font-size:var(--t-m)}.amc a{color:var(--accent)} .hv{list-style:none;margin:12px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 12px} @media(min-width:768px){.hv{grid-template-columns:repeat(4,minmax(0,1fr))}} .hv a{display:block;color:inherit;text-decoration:none;min-width:0} .hv img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r-l);background:var(--chip)} .hv b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:6px;font-size:var(--t-s);line-height:1.4} .hv small{display:block;margin-top:2px;font-size:var(--t-xs);color:var(--mut)} .hbr{list-style:none;margin:12px 0 0;padding:0;max-width:720px} .hbr li{display:grid;grid-template-columns:7em 1fr auto;gap:10px;align-items:center;padding:5px 0} .hbr a{color:inherit;text-decoration:none;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .hbr i{display:block;height:10px;border-radius:5px;background:var(--accent)} .hbr small{font-size:var(--t-xs);color:var(--mut)} .hf{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0 4px} .hf[hidden]{display:none} .hf button{appearance:none;-webkit-appearance:none;border:1px solid var(--line);background:var(--chip); color:var(--fg);font:inherit;font-size:var(--t-m);line-height:1;padding:0 12px;border-radius:var(--r-pill);cursor:pointer;min-height:40px} .hf button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)} .hs2{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 0}.hs2[hidden]{display:none} .hs2 button{appearance:none;-webkit-appearance:none;border:1px solid var(--line);background:none;color:var(--fg); font:inherit;font-size:var(--t-s);padding:0 12px;border-radius:var(--r-pill);cursor:pointer;min-height:36px} .hs2 button[aria-pressed="true"]{background:var(--fg);border-color:var(--fg);color:var(--bg)} .mo2{text-align:center;margin:-40px 0 48px}.hmore{font:inherit;font-size:var(--t-m);min-height:44px;padding:0 22px; border-radius:var(--r-pill);border:1px solid var(--line);background:var(--chip);color:var(--fg);cursor:pointer} .hmore[hidden]{display:none} .lb19{background:var(--alc);color:var(--on-alc)} .rg{list-style:none;margin:12px 0 48px;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 12px} .rg li[hidden]{display:none} .rg li.r1{grid-column:1/-1} .rc{display:block;color:inherit;text-decoration:none;min-width:0} .rp{position:relative;display:block;aspect-ratio:1;overflow:hidden;border-radius:var(--r-l);background:var(--photo)} .rp img,.rp .ph{display:block;width:100%;height:100%;aspect-ratio:auto;box-sizing:border-box;padding:0;object-fit:cover; transform:scale(1.22);border-radius:0} .rp .ph{background:var(--chip);display:flex;align-items:center;justify-content:center;font-size:var(--t-4xl);font-weight:700;color:var(--mut)} :root[data-theme=dark] .rp img{filter:brightness(.92)} @media(prefers-color-scheme:dark){:root:not([data-theme=light]) .rp img{filter:brightness(.92)}} .rg li.r1 .rp{aspect-ratio:4/3} .rn{position:absolute;left:8px;top:8px;min-width:28px;height:28px;padding:0 7px;border-radius:var(--r-pill);display:inline-flex; align-items:center;justify-content:center;font-size:var(--t-m);font-weight:800;background:var(--scrim);color:var(--on-scrim)} .r1 .rn,.r2 .rn,.r3 .rn{min-width:36px;height:36px;font-size:var(--t-l);background:var(--accent);color:var(--on-accent)} .rz{position:absolute;left:8px;bottom:8px;padding:3px 8px;border-radius:var(--r-m);font-size:var(--t-s);font-weight:700; background:var(--scrim);color:var(--on-scrim)} .rc b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:8px;font-size:var(--t-m); line-height:1.35;word-break:keep-all} .rb{display:block;margin-top:2px;font-size:var(--t-xs);color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .rg .ps{display:block;font-size:var(--t-xs);color:var(--mut)}.rg .ps:empty{display:none} /* 열 수는 사이트 공통(768 3 · 1024 5 · 1280 6). 1~3위는 768+ 에서 한 줄에 셋 큰 카드. */ @media(min-width:768px){.rg{grid-template-columns:repeat(3,minmax(0,1fr))}.rg li,.rg li.r1{grid-column:auto} .rg li.r1 .rp{aspect-ratio:1}} @media(min-width:1024px){.rg{grid-template-columns:repeat(15,minmax(0,1fr))}.rg li{grid-column:span 3} .rg li.r1,.rg li.r2,.rg li.r3{grid-column:span 5}} @media(min-width:1024px) and (max-width:1279px){.wkt .rg li:nth-child(9){display:none}} @media(min-width:1280px){.rg{grid-template-columns:repeat(12,minmax(0,1fr))}.rg li{grid-column:span 2} .rg li.r1,.rg li.r2,.rg li.r3{grid-column:span 4}} .kwm{margin:8px 0 0;font-size:var(--t-s);color:var(--mut)}.kwm a{color:var(--accent)} .rz.up{background:var(--accent);color:var(--on-accent)} .rp .phk,.mc .phk{display:flex;width:100%;height:100%;box-sizing:border-box;padding:12px;align-items:center; justify-content:center;text-align:center;background:var(--chip);color:var(--fg);font-size:var(--t-l);font-weight:800; line-height:1.3;word-break:keep-all;overflow-wrap:anywhere;transform:none} .rk{list-style:none;margin:8px 0 0;padding:0} .rk li{border-bottom:1px solid var(--line)} .rk a{display:flex;align-items:center;gap:12px;min-height:56px;padding:6px 0;color:inherit;text-decoration:none} .rk b{flex:1;min-width:0;font-size:var(--t-b);overflow-wrap:anywhere} .rk small{flex:none;font-size:var(--t-s);font-weight:700;color:var(--accent)} .rk svg{flex:none;width:72px;height:24px} .sl{fill:none;stroke:var(--accent);stroke-width:2;stroke-linejoin:round;stroke-linecap:round} .sla{fill:var(--accent);opacity:.12} .kc{margin:16px 0 0;padding:12px;border:1px solid var(--line);border-radius:var(--r-l);background:var(--card)} .kc svg{display:block;width:100%;height:auto} .kc .ax{display:flex;justify-content:space-between;margin-top:4px;font-size:var(--t-xs);color:var(--mut)} .kbtn{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;margin:16px 0 0;border-radius:var(--r-pill); background:var(--accent);color:var(--on-accent);font-weight:700;text-decoration:none} .nodata{margin:24px 0 48px;padding:64px 0;text-align:center;line-height:1.8;font-size:var(--t-b);color:var(--mut)} .soon h2{margin:32px 0 12px;font-size:var(--t-xl)} .sg{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 12px} @media(min-width:768px){.sg{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 16px}} @media(min-width:1024px){.sg{grid-template-columns:repeat(4,minmax(0,1fr))}} .sg a{display:block;color:inherit;text-decoration:none;min-width:0} .sg .sp{position:relative;display:block;aspect-ratio:4/3;border-radius:var(--r-l);overflow:hidden;background:var(--chip)} .sg .sp img{display:block;width:100%;height:100%;object-fit:cover} .sg .sp .ph{display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:var(--t-4xl);font-weight:800; color:var(--mut)} .sg .sp .dd{position:absolute;left:8px;top:8px;padding:4px 10px;border-radius:var(--r-pill);background:var(--accent); color:var(--on-accent);font-size:var(--t-m);font-weight:800} .sg .sp .dd.far{background:var(--scrim);color:var(--on-scrim)} .sg .br{display:block;margin-top:8px;font-size:var(--t-xs);color:var(--mut)} .sg strong{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:var(--t-m); line-height:1.4;word-break:keep-all} .sg small{display:block;margin-top:2px;font-size:var(--t-xs);color:var(--mut)} .cal{list-style:none;margin:12px 0 0;padding:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px} .cal .cw{text-align:center;font-size:var(--t-xs);color:var(--mut);padding:2px 0} .cal .cd{min-height:64px;padding:4px;border-radius:var(--r-s);background:var(--chip);font-size:var(--t-xs);overflow:hidden} .cal .cd b{display:block;font-weight:700}.cal .pa{opacity:.45}.cal .td{outline:2px solid var(--accent)} .cal .cn,.cal .cf,.cal .cr{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;margin-top:3px;padding:2px 5px;border-radius:4px; overflow:hidden;word-break:keep-all;overflow-wrap:anywhere;text-decoration:none;font-size:12px;line-height:1.35;font-weight:600} .cal .cn{background:var(--accent);color:var(--on-accent)}.cal .cf{background:var(--line);color:var(--fg)} .cal .cr{background:var(--card);color:var(--fg);border:1px solid var(--line)} .cal i{display:block;font-style:normal;font-weight:400;font-size:10px;opacity:.8} .cal .cm{display:block;margin-top:2px;font-size:11px;color:var(--accent);text-decoration:none} @media(max-width:600px){.cal i{display:none}.cal .cn,.cal .cf,.cal .cr{font-size:10px;padding:1px 3px}} @media(min-width:768px){.cal .cd{min-height:84px;padding:6px}} /* 자동 유행 단어(web/fad.auto_block) — 사람이 고른 유행과 갈라 보이게 점선 칩 */ .aw-h{margin:22px 0 0;font-size:var(--t-b)} .aw-h small{font-weight:400;font-size:var(--t-xs);color:var(--mut)} .aw{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px} .aw li{border:1px dashed var(--mut);border-radius:var(--r-pill);padding:6px 12px;font-size:var(--t-m);display:flex; gap:6px;align-items:baseline;flex-wrap:wrap} .aw a{color:var(--fg);font-weight:700} .aw span{font-size:var(--t-xs);color:var(--mut)} .trd{padding:4px 0 48px} .trd .sum{max-width:720px} .trn{margin:6px 0 0;font-size:var(--t-xs);color:var(--mut);line-height:1.6;word-break:keep-all} .trt{width:100%;max-width:720px;border-collapse:collapse;table-layout:fixed;margin:10px 0 0;font-size:var(--t-s)} .trt caption{text-align:left;font-size:var(--t-xs);color:var(--mut);padding:0 0 6px} .trt th,.trt td{padding:6px 4px;border-bottom:1px solid var(--line);text-align:right;vertical-align:bottom;font-weight:400} .trt thead th{font-size:var(--t-xs);color:var(--mut)} .trt th:first-child{text-align:left;width:28%;word-break:keep-all} .trt th[scope=row] a{color:var(--accent);text-decoration:none} .trt small{font-size:var(--t-xs)} /* '(진행 중)'. 기본 small(13px의 5/6)이면 11px 밑이다 */ .trb{display:block;height:6px;margin-top:4px;border-radius:var(--r-s);background:var(--accent);min-width:2px} .trb.cv{background:var(--mut)} .trb.pv{background:var(--mut);opacity:.7} /* 이전 구간 막대 — 배경 대비 3:1 이상(라이트 3.2·다크 4.4) */ .trl{list-style:none;margin:10px 0 0;padding:0;max-width:720px} .trl li{display:grid;grid-template-columns:minmax(0,8.5em) minmax(0,1fr) auto;gap:4px 10px; align-items:center;padding:7px 0;border-bottom:1px solid var(--line);font-size:var(--t-m)} .trl .k{overflow-wrap:anywhere;word-break:keep-all} .trl .k a{color:inherit;text-decoration:none;display:inline-block;padding:4px 0} .trl .n{font-size:var(--t-s);color:var(--mut);white-space:nowrap;text-align:right} .trl .n b{color:var(--fg);font-weight:600} .trl .bars .trb{margin:0} .trl .bars .trb+.trb{margin-top:3px} .trl .x{grid-column:1/-1;font-size:var(--t-xs);color:var(--mut);line-height:1.6;overflow-wrap:anywhere;word-break:keep-all} .trl .x a{color:var(--accent);text-decoration:none} .trl .x{display:flex;flex-wrap:wrap;gap:6px} .trl .x img{display:block;width:48px;height:48px;border-radius:var(--r-m);object-fit:cover;background:var(--chip)} .trc{display:grid;gap:0 32px} @media(min-width:760px){.trc{grid-template-columns:1fr 1fr}} .trc h3{margin:18px 0 0;font-size:var(--t-m)} .trlg{display:inline-block;width:10px;height:6px;border-radius:var(--r-s);margin:0 3px 0 8px;vertical-align:middle;background:var(--accent)} .trlg.pv{background:var(--mut);opacity:.7} .kwcl{position:relative;width:100%;height:260px;margin:8px 0 0} @media(min-width:768px){.kwcl{height:340px}} .kwcl span{white-space:nowrap} .kwc[hidden],.kwh h3[hidden]{display:none} .kwh h3{margin:18px 0 6px;font-size:var(--t-m);color:var(--mut)} .kwd{margin:4px 0 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:6px 24px} .kwd div{padding:8px 0;border-bottom:1px solid var(--line)}.kwd dt{font-weight:700} .kwd dd{margin:2px 0 0;font-size:var(--t-s);color:var(--mut)}.kwd a{color:var(--accent)} .skd svg{display:block;width:100%;height:160px;margin:8px 0 4px;background:var(--chip);border-radius:var(--r-m)} .skd polyline{fill:none;stroke-width:2.5;vector-effect:non-scaling-stroke} .skl{display:flex;flex-wrap:wrap;gap:6px 14px;margin:6px 0 0;font-size:var(--t-s)} .skl i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:5px;vertical-align:middle} .kwc{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;margin:10px 0 0;line-height:1.2} .kwc a{color:var(--fg);text-decoration:none;font-weight:800;letter-spacing:-.02em;word-break:keep-all} .kwc a small{margin-left:4px;font-size:var(--t-xs);font-weight:600;color:var(--mut);letter-spacing:0} .kwc .k1{font-size:var(--t-4xl);color:var(--accent)}.kwc .k2{font-size:var(--t-2xl)}.kwc .k3{font-size:var(--t-l)} .kwc a.up small{color:var(--up)} @media(min-width:768px){.kwc .k1{font-size:40px}.kwc .k2{font-size:var(--t-3xl)}} .stg{display:grid;grid-template-columns:minmax(0,1fr);gap:0 40px} @media(min-width:1024px){.stg{grid-template-columns:repeat(2,minmax(0,1fr))}} .sts{min-width:0} .ins{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:16px 0 0} @media(min-width:768px){.ins{grid-template-columns:repeat(3,minmax(0,1fr))}} .ins div{padding:14px;border-radius:var(--r-l);background:var(--chip)} .ins b{display:block;font-size:var(--t-2xl);font-weight:800;letter-spacing:-.02em;word-break:keep-all} .ins span{font-size:var(--t-s);color:var(--mut)} .stx{margin:36px 0 0} .stx .ctl{display:flex;flex-wrap:wrap;gap:8px 12px;margin:10px 0 0} .stx label{font-size:var(--t-s);color:var(--mut);display:flex;flex-direction:column;gap:4px} .stx select{font:inherit;font-size:var(--t-m);min-height:40px;padding:0 10px;border-radius:var(--r-m);border:1px solid var(--line); background:var(--bg);color:var(--fg)} .stx .sum{margin:14px 0 0} .stxl{list-style:none;margin:12px 0 0;padding:0} .stxl li{display:grid;grid-template-columns:minmax(0,7.5em) 1fr auto;gap:10px;align-items:center;padding:5px 0;font-size:var(--t-m)} .stxl .k{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .stxl .k a{color:inherit} .stxl i{display:block;height:12px;border-radius:var(--r-pill);background:var(--accent)} .stxl .n{font-variant-numeric:tabular-nums;color:var(--mut);font-size:var(--t-s)} .vst{display:flex;gap:6px;margin:14px 0 0;flex-wrap:wrap} .vsm{min-width:0}.vsb{margin:28px 0 0;min-width:0}.vsb[hidden]{display:none} .vsb h2{display:flex;align-items:baseline;gap:8px;margin:0 0 10px;font-size:var(--t-l)} .vsb h2 small{font-size:var(--t-xs);font-weight:400;color:var(--mut)} .vsb h2 a{color:inherit;text-decoration:none} .vsr{display:grid;grid-auto-flow:column;grid-auto-columns:132px;gap:12px;overflow-x:auto;padding-bottom:6px; scroll-snap-type:x proximity} @media(min-width:768px){.vsr{grid-auto-columns:148px}} .vsr>.mc{width:auto;scroll-snap-align:start}.vsr .mc b{display:block;margin-top:6px;font-size:var(--t-s);line-height:1.35;word-break:keep-all}.vsr>a[hidden]{display:none} .vsr .vsp{display:block;margin-top:2px;font-size:var(--t-s);font-weight:700;color:var(--accent)} #vsn{margin:12px 0 0;font-size:var(--t-s);color:var(--mut)} .fi{max-width:720px;margin:6px 0 0;font-size:var(--t-b);line-height:1.75;word-break:keep-all} .fi p{margin:6px 0} .fi a{color:var(--accent)} details.fxi{margin:24px 0 0;border-top:1px solid var(--line)}details.fxi summary{cursor:pointer;min-height:48px;display:flex;align-items:center;font-size:var(--t-l);font-weight:700} .hyc{display:flex;gap:8px;overflow-x:auto;margin:12px -16px 0;padding:0 16px 4px;scrollbar-width:none} .hyc::-webkit-scrollbar{display:none} .hyc a{flex:none;display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border-radius:var(--r-pill); background:var(--chip);color:var(--fg);font-size:var(--t-m);text-decoration:none;border:1px solid var(--line)} .hy .ktl{scroll-margin-top:16px} .hlt{color:#3a3a3a!important;font-size:var(--t-xl)!important;font-weight:800;padding:10%!important;text-align:center; word-break:keep-all;line-height:1.3} .st{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin:14px 0 0} .st div{padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-l);background:var(--card)} .st b{display:block;font-size:var(--t-2xl)} .st span{font-size:var(--t-s);color:var(--mut)} .sb{display:block;width:100%;height:140px;margin:12px 0 0} .sb rect{fill:var(--accent)} .tb{width:100%;border-collapse:collapse;margin:8px 0 0;font-size:var(--t-m)} .tb th,.tb td{padding:6px 4px;border-bottom:1px solid var(--line);text-align:left;overflow-wrap:anywhere} .tb td.n,.tb th.n{text-align:right;white-space:nowrap} /* 머리: 건수·기준 시각 한 줄(13px) + 검색창. 큰 제목은 두지 않는다(HOME-v2 1-2). */ header.h0{padding:14px 0 2px} header.h0 h1{margin:0;font-size:var(--t-s);font-weight:400;color:var(--mut);line-height:1.5} header.h0 h1 b{color:var(--fg);font-weight:700} .hq{display:flex;gap:8px;margin:10px 0 0} .hq input{flex:1;min-width:0;font:inherit;font-size:var(--t-b);padding:10px 14px;border-radius:var(--r-pill); border:1px solid var(--line);background:var(--chip);color:var(--fg);min-height:44px;-webkit-appearance:none;appearance:none} .hq input::placeholder{color:var(--mut)} .hq input:focus{outline:none;border-color:var(--accent)} .hq button{flex:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--chip); color:var(--fg);display:inline-flex;align-items:center;justify-content:center;cursor:pointer} .hq svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round} /* 가로 띠 섹션 */ /* 섹션 머리 1종(검수 0-4): h2 18/20 + 오른쪽 '더 보기 →' 14px(누르는 높이 44). 섹션 사이 40. */ .bd{margin:40px 0 0} .bd h2{display:flex;align-items:center;gap:8px;margin:0;font-size:var(--t-xl);font-weight:700} @media(min-width:768px){.bd h2{font-size:var(--t-2xl)}} .bd h2 a{margin-left:auto;display:inline-flex;align-items:center;min-height:44px;font-size:var(--t-m);font-weight:600; color:var(--accent);text-decoration:none} .mc .bz{position:absolute;left:6px;bottom:6px;font-size:var(--t-xs);font-weight:700;padding:2px 6px;border-radius:var(--r-m); background:var(--scrim);color:var(--on-scrim)} /* 유튜브 반응 줄의 순위 배지(/hot/ 순위 카드와 같은 모양, 1~3위 강조) */ .mc .rn{position:absolute;left:6px;top:6px;min-width:26px;height:26px;padding:0 6px;border-radius:var(--r-pill);display:inline-flex; align-items:center;justify-content:center;font-size:var(--t-s);font-weight:800;background:var(--scrim);color:var(--on-scrim)} .mc .rn.r3{background:var(--accent);color:var(--on-accent)} /* 지금 뜨는 검색어 줄(web/rising.home_row): 우리 신상 사진이 없는 말은 글자 타일 */ .mc .phk{display:flex;width:100%;height:100%;box-sizing:border-box;padding:10px;align-items:center;justify-content:center; text-align:center;background:var(--chip);color:var(--fg);font-size:var(--t-l);font-weight:800;line-height:1.3;word-break:keep-all; overflow-wrap:anywhere} /* 이번 주 카드 한 장 */ .wk1{display:flex;align-items:center;gap:10px;margin:10px 0 0;padding:12px 14px;min-height:60px; border:1px solid var(--line);border-radius:var(--r-l);background:var(--card);color:inherit;text-decoration:none} .wk1 span{display:flex;flex-direction:column;gap:2px;min-width:0} .wk1 b{font-size:var(--t-b)} .wk1 small{font-size:var(--t-s);color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .wk1 i{margin-left:auto;font-style:normal;color:var(--mut)} .wkg{display:grid;gap:8px;margin-top:10px}.wkg .wk1{margin:0} .wk2 b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:keep-all;line-height:1.35} @media(min-width:560px){.wkg{grid-template-columns:1fr 1fr}} @media(min-width:900px){.wkg{grid-template-columns:repeat(3,1fr)}} .hm{margin-bottom:8px} /* 최근 본 신상(site.js 가 이 기기 기록으로 그린다) */ .rcv[hidden]{display:none} .rvw{display:flex;gap:10px;overflow-x:auto;margin:10px -16px 0;padding:0 16px 6px;scrollbar-width:none} .rvw::-webkit-scrollbar{display:none} .rvi{flex:none;width:148px;text-decoration:none;color:inherit;font-size:var(--t-m);font-weight:700;line-height:1.35} .rvi img,.rvi .ph{width:148px;height:148px;box-sizing:border-box;padding:0;border-radius:var(--r-l);object-fit:contain;background:var(--chip);display:block} .rvi span:last-child{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:8px} .fbl{margin:12px 0 0;font-size:var(--t-m)} .fbl[hidden]{display:none} .fbl a{display:inline-block;padding:6px 0;color:var(--accent);font-weight:600;text-decoration:none} .tg2{margin:26px 0 0} .tg2 h3{margin:0;font-size:var(--t-l);display:flex;align-items:baseline;gap:8px;flex-wrap:wrap} .tg2 h3 a{color:inherit;text-decoration:none} .tg2 h3 small{font-weight:400;font-size:var(--t-xs);color:var(--mut)} .tg2 .t1{margin:4px 0 0;font-size:var(--t-s);color:var(--mut);line-height:1.55;word-break:keep-all;max-width:720px} /* 사진 줄(레일) — 카드 1종과 같은 타일(1:1 흰 바탕 contain, 모서리 12) + 브랜드 12 · 이름 14/700 두 줄. 폭 148 로 통일(검수 P2-2). 1024px 이상에선 가로 스크롤 대신 6칸 격자(검수 0-1). */ .mr{display:flex;gap:12px;overflow-x:auto;margin:12px -16px 0;padding:0 16px 4px;scrollbar-width:none; -webkit-overflow-scrolling:touch} .mr::-webkit-scrollbar{display:none} .mc{flex:none;width:148px;text-decoration:none;color:inherit;min-width:0} .mp{position:relative;display:block} .mc .mp{position:relative;display:block;aspect-ratio:1;overflow:hidden;border-radius:var(--r-l);background:var(--chip)} .mc img{display:block;width:100%;height:100%;aspect-ratio:auto;box-sizing:border-box;padding:0;border-radius:0;object-fit:cover;transform:scale(1.4);background:transparent} .mc .ph{display:flex;width:100%;height:100%;aspect-ratio:auto;box-sizing:border-box;padding:0;border-radius:0;object-fit:contain; background:var(--chip);align-items:center;justify-content:center;font-size:var(--t-4xl);font-weight:700;color:var(--mut)} :root[data-theme=dark] .mc img{filter:brightness(.92)} @media(prefers-color-scheme:dark){:root:not([data-theme=light]) .mc img{filter:brightness(.92)}} .mc .br{display:block;margin-top:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .mc b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:var(--t-m); font-weight:700;line-height:1.35;word-break:keep-all} /* 768+ 는 가로 스크롤 대신 격자(열 수 3·5·6). 보이는 장수는 rail_cls() 가 단 클래스로 '꽉 찬 줄' 만큼만 (RAIL_FIT_CSS). 한 줄도 못 채우는 폭에서는 .sNN 으로 가로 스크롤 한 줄을 그대로 둔다. */ @media(min-width:768px){.mr:not(.s3){display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 16px;margin:12px 0 0; padding:0;overflow:visible}.mr:not(.s3) .mc{width:auto}} @media(min-width:1024px){.mr:not(.s5){display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:32px 20px;margin:12px 0 0; padding:0;overflow:visible}.mr:not(.s5) .mc{width:auto}.mr.s5{display:flex}} @media(min-width:1280px){.mr:not(.s6){display:grid;grid-template-columns:repeat(6,minmax(0,1fr))}.mr:not(.s6) .mc{width:auto} .mr.s6{display:flex;overflow-x:auto}.mr.s6 .mc{width:148px}} .mall{display:inline-block;margin-top:6px;padding:4px 0;font-size:var(--t-s);font-weight:600;color:var(--accent); text-decoration:none} .mnone{margin:8px 0 0;font-size:var(--t-s);color:var(--mut)} @media(min-width:900px){.mr{margin:10px 0 0;padding:0 0 4px}} @media(min-width:768px) and (max-width:1023px){.mr.f3x1>*:nth-child(n+4){display:none}.mr.f3x2>*:nth-child(n+7){display:none}.mr.f3x3>*:nth-child(n+10){display:none}} @media(min-width:1024px) and (max-width:1279px){.mr.f5x1>*:nth-child(n+6){display:none}.mr.f5x2>*:nth-child(n+11){display:none}.mr.f5x3>*:nth-child(n+16){display:none}} @media(min-width:1280px){.mr.f6x1>*:nth-child(n+7){display:none}.mr.f6x2>*:nth-child(n+13){display:none}.mr.f6x3>*:nth-child(n+19){display:none}}.doc .mr{display:flex!important;overflow-x:auto;margin:12px 0 0;padding:0 0 4px}.doc .mr>*{display:block!important}.doc .mc{width:148px!important} ul.bgr{list-style:none;margin:12px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 12px} @media(min-width:768px){ul.bgr{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 16px}} @media(min-width:1024px){ul.bgr{grid-template-columns:repeat(5,minmax(0,1fr));gap:32px 20px}} @media(min-width:1280px){ul.bgr{grid-template-columns:repeat(6,minmax(0,1fr))}} .bgr li[hidden]{display:none} .nwf .nwbr{flex-basis:100%;height:0} .btl{display:block;color:inherit;text-decoration:none;min-width:0} .bcol{display:grid;grid-template-columns:1fr 1fr;gap:4px;aspect-ratio:1;border-radius:var(--r-l);overflow:hidden;background:var(--chip)} .bcol img,.bcol span{display:block;width:100%;height:100%;box-sizing:border-box;padding:6%;object-fit:contain;background:var(--photo);min-height:0} .bcol.n1 img{grid-column:1/-1;grid-row:1/-1} .bcol span{background:var(--chip)} .bcol .ltr{grid-column:1/-1;grid-row:1/-1;display:flex;align-items:center;justify-content:center;font-size:40px;font-weight:700;color:var(--mut)} :root[data-theme=dark] .bcol img{filter:brightness(.92)} @media(prefers-color-scheme:dark){:root:not([data-theme=light]) .bcol img{filter:brightness(.92)}} .btl b{display:block;margin-top:8px;font-size:var(--t-m);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .btl small{display:block;font-size:var(--t-xs);color:var(--mut)} .btl small em{font-style:normal;color:var(--accent);font-weight:700} .pcg.sm{grid-template-columns:repeat(2,minmax(0,1fr))}@media(min-width:768px){.pcg.sm{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(min-width:1024px){.pcg.sm{grid-template-columns:repeat(6,minmax(0,1fr))}} .prs .hd{display:flex} .pcg{list-style:none;margin:12px 0 0;padding:0;display:grid;grid-template-columns:1fr;gap:24px} @media(min-width:768px){.pcg{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(min-width:1024px){.pcg{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px 20px}} .pcc{display:block;color:inherit;text-decoration:none} .pcv{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:3px;aspect-ratio:16/9;border-radius:var(--r-l); overflow:hidden;background:var(--chip)} .pcv img{display:block;width:100%;height:100%;min-height:0;box-sizing:border-box;padding:4%;object-fit:contain;background:var(--photo)} .pcv.n1 img{grid-column:1/-1;grid-row:1/-1} .pcv .ltr{grid-column:1/-1;grid-row:1/-1;display:flex;align-items:center;justify-content:center;padding:0 16px; font-size:var(--t-xl);font-weight:800;color:var(--mut);text-align:center;word-break:keep-all} .pcc b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:8px;font-size:var(--t-l); font-weight:700;line-height:1.4;word-break:keep-all} .pcc small{font-size:var(--t-xs);color:var(--mut)} .ktg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 12px;margin:12px 0 0} @media(min-width:768px){.ktg{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 16px}} @media(min-width:1024px){.ktg{grid-template-columns:repeat(5,minmax(0,1fr));gap:32px 20px}} @media(min-width:1280px){.ktg{grid-template-columns:repeat(6,minmax(0,1fr))}} .ktl{display:block;color:inherit;text-decoration:none;min-width:0} .kp{position:relative;display:block} .kp img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;background:var(--chip);border-radius:var(--r-l)} .kp .ph{display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:1;background:var(--chip); border-radius:var(--r-l);font-size:var(--t-4xl);font-weight:700;color:var(--mut)} :root[data-theme=dark] .kp img{filter:brightness(.92)} @media(prefers-color-scheme:dark){:root:not([data-theme=light]) .kp img{filter:brightness(.92)}} .kb{position:absolute;left:6px;top:6px;font-size:var(--t-xs);font-weight:700;padding:2px 8px;border-radius:var(--r-m); background:var(--accent);color:var(--on-accent)} .ktl b{display:block;margin-top:8px;font-size:var(--t-m);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ktl small{font-size:var(--t-xs);color:var(--mut)} .ntls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:16px 0 0} @media(min-width:768px){.ntls{grid-template-columns:repeat(4,minmax(0,1fr))}} .ntl{padding:12px 14px;border-radius:var(--r-l);background:var(--chip)} .ntl b{display:block;font-size:var(--t-3xl);font-weight:800;color:var(--accent)} .ntl span{font-size:var(--t-xs);color:var(--mut)} h2.hd{display:flex;align-items:center;gap:8px} h2.sec .hmo{margin-left:auto;display:inline-flex;align-items:center;min-height:44px;font-size:var(--t-m);font-weight:600;color:var(--accent);text-decoration:none} .ifo{display:inline-flex;align-items:center;justify-content:center;min-width:24px;min-height:24px;color:var(--mut);text-decoration:none} .whn{margin:12px 0 0;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;font-size:var(--t-m)}.whn b{font-size:40px;font-weight:800;line-height:1}.whn .pdl{display:inline-flex;margin:0}.wch{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0}.wch span{font-size:var(--t-xs);padding:4px 10px;border-radius:var(--r-pill);background:var(--chip);color:var(--mut)}.wch b{color:var(--fg)}.wkt .rg{margin-bottom:8px} .nwg{list-style:none;margin:12px 0 0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:22px 20px;align-items:start} /* 칸은 minmax(0,1fr) — 1fr 만 쓰면 한 줄로 자르는 긴 제목(nowrap)이 칸을 밀어 칸 너비가 들쭉날쭉해진다(2026-10-31 '더 보기 누르니 깨진다') */ .nwg>li{min-width:0} @media(min-width:768px){.nwg{grid-template-columns:repeat(2,minmax(0,1fr))}.nwg li.wide{grid-column:1/-1}} .nwg li[hidden]{display:none} .nwc{display:block;color:inherit;text-decoration:none} .nwc img,.nph{display:block;width:100%;height:auto;border-radius:var(--r-l);background:var(--chip)} .nph{aspect-ratio:16/9;display:flex!important;align-items:center;justify-content:center;font-size:var(--t-4xl);font-weight:700;color:var(--mut)} .nwt{display:flex;align-items:baseline;gap:6px;margin-top:8px;min-width:0} .nwt b{font-size:var(--t-b);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0} .nwm{display:flex;align-items:center;gap:6px;margin-top:2px;font-size:var(--t-s);color:var(--mut)} .nwm .br{color:var(--fg);font-weight:600} .ns{font-size:var(--t-xs);font-weight:700;padding:1px 6px;border-radius:var(--r-m);background:var(--chip);color:var(--mut)} .ns.on{background:var(--accent);color:var(--on-accent)} .nwf{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0 0}.nwf[hidden]{display:none} .nwf button{appearance:none;-webkit-appearance:none;border:1px solid var(--line);background:var(--chip);color:var(--fg); font:inherit;font-size:var(--t-m);padding:0 12px;border-radius:var(--r-pill);cursor:pointer;min-height:40px} .nwf button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)} /* 작은 판(읽을거리 등 다른 장에 끼울 때, 2026-10-31 운영자 '크기 줄인 거지?') — 고정 틀에 원비율 contain, 큰 그림은 /news/ 에서만 */ .nwg.sm{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px}.nwg.sm li.wide{grid-column:auto} .nwg.sm .nwc img,.nwg.sm .nph{height:140px;width:100%;object-fit:cover;aspect-ratio:auto} .nwg.sm .nwt b{font-size:var(--t-m)}@media(min-width:768px){.nwg.sm{grid-template-columns:repeat(4,minmax(0,1fr))}.nwg.sm .nwc img,.nwg.sm .nph{height:180px}} /* 목록 판(/news/, 2026-10-31 운영자) — 한 장이 화면을 다 먹지 않게 고정 틀 contain 여러 열. 큰 그림은 각 소식 장(/news//)에서. */ .nwg.md{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.nwg.md li.wide{grid-column:auto} .nwg.md .nwc img,.nwg.md .nph{height:180px;width:100%;object-fit:cover;aspect-ratio:auto}.nwg.md .nwc img.crop-top{object-position:top center}.nwg.md .nwt b{font-size:var(--t-m)} @media(min-width:768px){.nwg.md{grid-template-columns:repeat(3,minmax(0,1fr))}.nwg.md .nwc img,.nwg.md .nph{height:260px}} @media(min-width:1200px){.nwg.md{grid-template-columns:repeat(4,minmax(0,1fr))}} .nmo{text-align:center;margin:20px 0 48px}.nmore{font:inherit;font-size:var(--t-m);min-height:44px;padding:0 22px; border-radius:var(--r-pill);border:1px solid var(--line);background:var(--chip);color:var(--fg);cursor:pointer}.nmore[hidden]{display:none} .prs{margin:8px 0 28px}.prs ul{list-style:none;margin:8px 0 0;padding:0} .prs li{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;padding:9px 0;border-bottom:1px solid var(--line); font-size:var(--t-m);line-height:1.5} .prs .br{font-size:var(--t-xs);font-weight:700;color:var(--accent)} .prs a{flex:1 1 60%;min-width:0;color:var(--fg);text-decoration:none;overflow-wrap:anywhere} .prs time{font-size:var(--t-xs);color:var(--mut)} .prs li.pp{align-items:center}.prs li img{flex:none;width:56px;height:56px;border-radius:var(--r-s);object-fit:cover;background:var(--photo)} @media(min-width:768px){.ndt{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:32px;align-items:start} .ndt .tt{margin-top:14px}} .nhero img,.nhero .nph{display:block;width:100%;max-width:960px;height:auto;border-radius:var(--r-l);background:var(--chip);margin:14px 0 0} .nhero img.crop-top{height:min(72vh,720px);object-fit:cover;object-position:top center} .nsum{margin:12px 0 0;padding:10px 14px;border-left:3px solid var(--accent);background:var(--chip);border-radius:0 10px 10px 0; font-size:var(--t-b);line-height:1.7;word-break:keep-all} .nsum cite{display:block;margin-top:4px;font-size:var(--t-xs);font-style:normal;color:var(--mut)} .nout{display:inline-flex;align-items:center;min-height:44px;margin:14px 0 0;padding:0 18px;border-radius:var(--r-pill); background:var(--accent);color:var(--on-accent);font-weight:700;text-decoration:none} .nw3{margin:12px 0 0;font-size:var(--t-m)}.nw3 ul{list-style:none;margin:4px 0;padding:0}.nw3 li{padding:2px 0}.nw3 a{color:var(--accent)}.nhr{display:flex;gap:12px;overflow-x:auto;margin:10px -16px 0;padding:0 16px 6px;scrollbar-width:none;scroll-snap-type:x mandatory;scroll-padding:0 16px;align-items:flex-start}.nhr::-webkit-scrollbar{display:none}.nhc{flex:none;width:200px;scroll-snap-align:start;color:inherit;text-decoration:none}.nhc img,.nhc .nph{display:block;width:100%;height:140px;object-fit:cover;border-radius:var(--r-l);background:var(--chip)}.nhc img.crop-top{object-fit:cover;object-position:top center}.nhc .nwt b{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;font-size:var(--t-m)}@media(min-width:900px){.nhr{margin:10px 0 0;padding:0 0 6px}.nhc{width:260px}.nhc img,.nhc .nph{height:180px}} /* 홈 전용. 공통 토큰·카드·그리드는 web/theme.py CSS 가 정의한다. */ /* 머리: 제목 + 건수 한 줄 + 검색창 */ header.hh{padding:20px 0 4px} header.hh h1{font-size:var(--t-3xl);line-height:1.35} /* 정렬·보기 버튼 줄 */ .lh{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin:14px 0 0} .tools{display:flex;gap:8px;margin-top:14px} #q{flex:1;min-width:0;font:inherit;font-size:var(--t-b);padding:10px 14px;border-radius:var(--r-pill); border:1px solid var(--line);background:var(--chip);color:var(--fg);min-height:42px; -webkit-appearance:none;appearance:none} #q::placeholder{color:var(--mut)} #q:focus{outline:none;border-color:var(--accent)} /* 검색 추천. 입력칸 바로 아래 겹쳐 띄운다 — 자리를 차지하면 카드가 밀린다. */ .qwrap{position:relative;flex:1;min-width:0;display:flex} #sug{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:8;margin:0; padding:4px;list-style:none;background:var(--bg);border:1px solid var(--line); border-radius:var(--r-l);box-shadow:0 6px 24px var(--shadow);max-height:46vh;overflow:auto} #sug li{padding:9px 12px;border-radius:var(--r-m);font-size:var(--t-b);cursor:pointer; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #sug li[aria-selected="true"],#sug li:hover{background:var(--chip)} #sug .k{float:right;margin-left:10px;font-size:var(--t-xs);color:var(--mut)} #sort{flex:none} .cnt{margin:10px 0 0;font-size:var(--t-xs);color:var(--mut);min-height:16px} /* 분류 탭. 맨 위 사이트 막대(theme .sn)도