.home-page { --paper:#fff; --sheet:#fff; --card:#fff; --ink:#151515; --muted:#6b6b70; --line:#e5e5e8; --red:#1671e9; --red-dark:#0756bc; background:#fff; }

/* 홈 — 여섯 묶음을 72px 사진 줄로, 글 다섯 편과 처리 위치 상자를 아래에 (2026-09-06). 색·글꼴은 9/5 D 시안 그대로. */
.home-page .container { width:min(1360px,calc(100% - 80px)); }
.home-page .page-main { padding-top:24px; }
.home-intro { margin-bottom:18px; }
.home-intro h1 { font-size:clamp(30px,3.6vw,44px); font-weight:750; letter-spacing:-.065em; line-height:1.2; margin-bottom:8px; }
.home-intro>p:last-child { color:var(--muted); font-size:15px; margin:0; }
.mobile-break { display:none; }
.gallery-toolbar { display:flex; align-items:center; gap:30px; margin-bottom:16px; }
.gallery-filters { display:flex; gap:30px; flex:1; border-bottom:1px solid var(--line); }
.gallery-filters button { border:0; border-bottom:2px solid transparent; background:none; color:#68686d; padding:9px 4px 11px; cursor:pointer; white-space:nowrap; }
.gallery-filters button[aria-pressed="true"] { color:#126ae1; border-bottom-color:#126ae1; }
.gallery-search { display:flex; align-items:center; gap:10px; border:1px solid #d8d8dd; border-radius:7px; padding:5px 13px; width:270px; }
.gallery-search>span:first-child { font-size:24px; line-height:1; }
.gallery-search input { width:100%; min-width:0; border:0; background:transparent; outline:none; font-size:14px; padding:4px 0; }
.gallery-search:focus-within { outline:2px solid #126ae1; outline-offset:2px; }
.home-page a:focus-visible,.home-page button:focus-visible { outline:2px solid #126ae1; outline-offset:4px; }
.home-gallery-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.gallery-card { display:grid; grid-template-columns:72px minmax(0,1fr); gap:12px; align-items:center; min-width:0; border:1px solid var(--line); border-radius:12px; background:#fff; padding:10px 12px 10px 10px; transition:box-shadow .2s,border-color .2s; }
.gallery-card:focus-within,.gallery-card:hover { border-color:#b8c5d5; box-shadow:0 7px 24px #182e4810; }
.gallery-preview { display:block; width:72px; height:56px; border-radius:8px; overflow:hidden; background:#e9eef0; text-decoration:none; }
.thumb { display:block; position:relative; width:100%; height:100%; overflow:hidden; }
.thumb img { width:100%; height:100%; object-fit:cover; }
.sticker-face::after { content:""; position:absolute; left:14%; top:2%; width:72%; height:80%; background:url("../samples/home/bear.svg") center/100% 100% no-repeat; }
.checker { background-color:#fff; background-image:conic-gradient(#e2e2e2 25%,transparent 0 50%,#e2e2e2 0 75%,transparent 0); background-size:12px 12px; }
.photo-sheet { background:#c0d4e0; padding:6px 10px; }
.photo-sheet img { border:2px solid #fff; box-shadow:0 2px 5px #29425130; transform:rotate(-5deg); }
.thumb-doc { display:grid; align-content:center; gap:5px; padding:10px 12px; background:#fffefb; border:1px solid #e6e2da; }
.thumb-doc i { display:block; height:3px; border-radius:2px; background:#c9c5bd; }
.thumb-doc i:first-child { width:60%; background:#1671e9; }
.thumb-doc i:last-child { width:80%; }
.gallery-card-body { min-width:0; }
.gallery-card h2 { margin:0; font-size:15px; letter-spacing:-.03em; line-height:1.4; }
.gallery-card h2>a { text-decoration:none; }
.gallery-card h2>a:hover { color:#126ae1; }
.gallery-card-body>p { font-size:12.5px; color:#68686d; margin:2px 0 0; }
.gallery-tool-links { display:flex; flex-wrap:wrap; gap:2px 10px; margin-top:3px; }
.gallery-tool-links a { font-size:12px; color:#126ae1; text-decoration:none; }
.gallery-tool-links a:hover { text-decoration:underline; }
.gallery-footnote { margin:14px 0 0; text-align:center; color:#85858b; font-size:11px; }
.gallery-empty { text-align:center; padding:50px 15px; color:#606067; }
.gallery-empty button { background:#151515; color:#fff; padding:10px 18px; border:0; border-radius:6px; cursor:pointer; }
.home-posts { margin-top:34px; }
.home-posts h2 { display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin:0 0 6px; font-size:17px; letter-spacing:-.03em; }
.home-posts h2 a { font-size:12.5px; font-weight:500; color:var(--muted); text-decoration:none; white-space:nowrap; }
.home-posts h2 a:hover { color:#126ae1; text-decoration:underline; }
.post-list { list-style:none; margin:0; padding:0; }
.post-list li { padding:10px 0; border-bottom:1px solid var(--line); }
.post-list a { font-size:15px; font-weight:650; text-decoration:none; }
.post-list a:hover { color:#126ae1; text-decoration:underline; text-underline-offset:3px; }
.post-list span { display:block; margin-top:2px; font-size:12.5px; color:var(--muted); }
.home-trust { margin-top:28px; padding:16px 18px; border-radius:12px; background:#eaf1ff; }
.home-trust h2 { margin:0 0 6px; font-size:15px; letter-spacing:-.02em; }
.home-trust p { margin:0; font-size:13.5px; line-height:1.75; color:#3e4550; }
.home-trust a { color:#155fce; text-underline-offset:3px; }
.home-page .site-footer { border-top:1px solid var(--line); background:#fafafa; }
.home-page [hidden] { display:none !important; }
@media(max-width:1100px) { .home-gallery-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:1050px) { .home-page .container { width:calc(100% - 48px); } }
@media(max-width:700px) { .home-gallery-grid { grid-template-columns:minmax(0,1fr); gap:8px; } }
@media(max-width:620px) { .home-page .container { width:calc(100% - 36px); } .home-page .page-main { padding-top:20px; } .home-intro h1 { font-size:28px; } .mobile-break { display:block; } .home-intro>p:last-child { font-size:13px; } .gallery-toolbar { flex-direction:column-reverse; align-items:stretch; gap:10px; margin-bottom:12px; } .gallery-search { width:100%; } .gallery-filters { gap:0; justify-content:space-between; } .gallery-filters button { font-size:14px; } .home-posts h2 { font-size:16px; } .post-list a { font-size:14px; } }
@media(prefers-reduced-motion:reduce) { .gallery-card { transition:none; } }