/* 견본 페이지 공통 (2026-11-02) — 블로그 스킨 견본(노션 갤러리) 기준
   흰 바탕 · 글자 굵기 2가지(400·600) · 강조색은 [카톡 상담] 하나 · 이모지 없음 · 얇은 테두리 · 그림자 없음 */
:root{--bg:#FFFFFF;--fg:#1F1F1E;--sub:#6B6A66;--line:#E7E6E2;--hover:#F4F4F2;--on:#ECECE9;--soft:#F6F6F4;--ac:#FFC928}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:Pretendard,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;font-weight:400;-webkit-font-smoothing:antialiased;word-break:keep-all;line-height:1.5}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
b,strong{font-weight:600}
.wrap{max-width:1240px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}

/* 위 메뉴 */
.top{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.96);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:8px;font-weight:600;font-size:16px;margin-right:12px;white-space:nowrap}
.brand i{width:24px;height:24px;border-radius:6px;background:var(--fg);color:var(--ac);display:grid;place-items:center;font-style:normal;font-size:13px;font-weight:600}
.tabs{display:flex;gap:2px}
.tabs.sub{padding-top:16px;overflow-x:auto;scrollbar-width:none}
.tabs.sub::-webkit-scrollbar{display:none}
.tabs a{padding:6px 10px;border-radius:6px;font-size:15px;color:var(--sub);white-space:nowrap}
.tabs a:hover{background:var(--hover);color:var(--fg)}
.tabs a.on{background:var(--on);color:var(--fg);font-weight:600}
.sp{flex:1}
.kbtn{display:inline-flex;align-items:center;background:var(--ac);color:#1F1F1E;font-weight:600;font-size:15px;padding:8px 14px;border-radius:8px;border:0;white-space:nowrap}

/* 제목 */
.hd{padding:36px 0 8px}
.hd h1{font-size:30px;font-weight:600;letter-spacing:-.02em;line-height:1.3;margin:0}
.hd p{color:var(--sub);font-size:15px;margin:8px 0 0;line-height:1.6}

/* 거르기 탭 한 줄 (블로그 스킨처럼) */
.bar{display:flex;align-items:center;gap:8px;padding:14px 0 12px;border-bottom:1px solid var(--line)}
.ft{display:flex;gap:2px;flex:1;min-width:0;overflow:hidden;white-space:nowrap}
.ft button,.more>button,.fbtn{border:0;background:transparent;border-radius:6px;padding:6px 10px;font-size:15px;color:var(--sub);white-space:nowrap}
.ft button:hover,.more>button:hover,.fbtn:hover{background:var(--hover);color:var(--fg)}
.ft button.on{background:var(--on);color:var(--fg);font-weight:600}
.more{position:relative;flex:none}
.more>button.on{color:var(--fg);font-weight:600}
.menu{position:absolute;right:0;top:calc(100% + 6px);z-index:25;background:#fff;border:1px solid var(--line);border-radius:8px;padding:6px;min-width:180px;max-height:60vh;overflow:auto;box-shadow:0 8px 24px rgba(0,0,0,.08)}
.menu button{display:block;width:100%;text-align:left;border:0;background:transparent;border-radius:6px;padding:7px 10px;font-size:15px;color:var(--fg)}
.menu button:hover{background:var(--hover)}
.menu button.on{background:var(--on);font-weight:600}
.menu .lb{font-size:13px;color:var(--sub);padding:8px 10px 4px}
.fbtn{flex:none}
.fbtn.on{color:var(--fg);font-weight:600}
.cnt{color:var(--sub);font-size:14px;margin:14px 0 0}

/* 카드 */
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;padding:12px 0 64px}
.card{display:block;background:#fff;border:1px solid var(--line);border-radius:8px;overflow:hidden;cursor:pointer;text-align:left;padding:0;width:100%}
.card:hover{background:var(--soft)}
.card:hover .th{opacity:.94}
.card .th{aspect-ratio:16/9;background:var(--soft);position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.card .th img,.card .th video{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.card .th.tall img,.card .th.tall video{object-fit:contain;object-position:center}
.card .du{position:absolute;right:8px;bottom:8px;background:rgba(0,0,0,.6);color:#fff;font-size:12px;padding:2px 7px;border-radius:4px}
.card .nm{display:flex;align-items:baseline;gap:6px;padding:11px 12px 12px;font-size:15px;min-width:0}
.card .nm span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.card .nm small{flex:none;color:var(--sub);font-size:14px}
.empty{grid-column:1/-1;padding:60px 0;text-align:center;color:var(--sub)}

.foot{border-top:1px solid var(--line);padding:22px 0 56px;color:var(--sub);font-size:14px}
.foot a{text-decoration:underline}

@media(max-width:1080px){.grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){
  .tabs:not(.sub){display:none}
  .tabs.sub a{font-size:14px;padding:6px 9px}
  .hd{padding:24px 0 4px}.hd h1{font-size:24px}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .card .nm{padding:9px 10px 10px;font-size:14px}.card .nm small{font-size:13px}
  .ft{overflow-x:auto;scrollbar-width:none}.ft::-webkit-scrollbar{display:none}
}
@media(max-width:440px){.grid{grid-template-columns:1fr}}
@media(max-width:760px){.ft{-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent)}}