/* 돌감자공작소 가이드 — 3차 개편(2026-10-02): 흰 바탕 매거진(요즘IT 구조 참고) + 돌감자 브랜드 포인트
   바탕은 흰색. 브랜드 색(#904222 브라운·#FCECDD 아이보리)은 배지·버튼·강조에만 쓴다. */
:root{
  --ink:#16120F; --body:#33302D; --gray:#6E6862; --muted:#A39D97;
  --line:#ECEAE7; --line2:#E2DEDA; --bg2:#F7F6F4;
  --brand:#904222; --brand-d:#6E3118; --ivory:#FCECDD; --ivory2:#FDF6EE; --sage:#A1A290;
  --serif:"Cormorant Garamond",Georgia,serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:#fff;color:var(--body);font-family:"Pretendard",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;line-height:1.75;-webkit-font-smoothing:antialiased;word-break:keep-all;overflow-wrap:break-word}
a{color:var(--brand)}
img{max-width:100%;display:block}
em{font-style:normal}
.g-draft{background:var(--brand);color:#fff;text-align:center;font-size:13px;font-weight:600;padding:7px 16px}

/* 상단 */
.g-top{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.97);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.g-top-in{max-width:1200px;margin:0 auto;display:flex;align-items:center;gap:18px;padding:10px 24px}
.g-brand{display:flex;align-items:center;gap:8px;text-decoration:none;flex:none}
.g-mark{width:30px;height:30px}
.g-logo{height:32px;width:auto}
.g-search{flex:1;max-width:340px;margin-left:auto}
.g-search input{width:100%;border:0;background:var(--bg2);border-radius:999px;padding:9px 16px;font:inherit;font-size:14px;color:var(--ink)}
.g-search input:focus{outline:2px solid var(--ivory)}
.g-quote{flex:none;background:var(--brand);color:#fff;text-decoration:none;font-weight:700;font-size:14px;padding:8px 16px;border-radius:999px}
.g-quote:hover{background:var(--brand-d)}
.g-chips{max-width:1200px;margin:0 auto;display:flex;align-items:center;gap:20px;padding:0 24px;overflow-x:auto;scrollbar-width:none}
.g-chips::-webkit-scrollbar{display:none}
.g-chips a{flex:none;padding:9px 0 11px;font-size:14.5px;color:var(--gray);text-decoration:none;border-bottom:2px solid transparent;white-space:nowrap}
.g-chips a:hover{color:var(--ink)}
.g-chips a.on{color:var(--ink);font-weight:700;border-bottom-color:var(--brand)}
.g-chips-sep{flex:none;width:1px;height:14px;background:var(--line2)}
.g-chips .g-chip-home{margin-left:auto;color:var(--muted);font-size:13px}

/* 레이아웃 */
.g-page{max-width:1200px;margin:0 auto;padding:32px 24px 80px}
.g-page-post{display:grid;grid-template-columns:56px minmax(0,1fr) 300px;gap:40px}
.g-main{min-width:0}
.g-page-post .g-main{max-width:740px}

/* 목록: 오늘의 가이드 + 랭킹 */
.g-list-h{margin:0 0 22px}
.g-list-h h1{font-size:clamp(22px,3vw,28px);margin-bottom:4px}
.g-list-h p{color:var(--gray);font-size:15px}
.g-topic{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(0,1fr);gap:28px;margin-bottom:48px}
.g-topic-main{position:relative;display:block;border-radius:16px;overflow:hidden;aspect-ratio:16/10;background:#222;text-decoration:none}
.g-topic-main img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.g-topic-main:hover img{transform:scale(1.03)}
.g-topic-main::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 35%,rgba(0,0,0,.72) 100%)}
.g-topic-badge{position:absolute;z-index:1;left:20px;top:18px;background:var(--brand);color:#fff;font-size:12.5px;font-weight:700;padding:5px 12px;border-radius:999px}
.g-topic-txt{position:absolute;z-index:1;left:24px;right:24px;bottom:22px}
.g-topic-t{display:block;color:#fff;font-size:clamp(20px,2.6vw,28px);font-weight:800;line-height:1.36;letter-spacing:-.02em}
.g-topic-c{display:block;color:rgba(255,255,255,.8);font-size:13px;margin-top:6px}
.g-rank{border:1px solid var(--line);border-radius:16px;padding:18px 18px 8px}
.g-rank[hidden]{display:block}
.g-rank-h{font-size:16px;font-weight:800;color:var(--ink);margin-bottom:6px}
.g-rank ol{list-style:none;counter-reset:r}
.g-rank li{counter-increment:r;border-top:1px solid var(--line)}
.g-rank li:first-child{border-top:0}
.g-rank a{display:grid;grid-template-columns:22px 1fr 56px;grid-template-rows:auto auto;column-gap:10px;padding:11px 0;text-decoration:none;align-items:center}
.g-rank a::before{content:counter(r);grid-row:1/3;font-weight:800;font-size:16px;color:var(--brand);align-self:start}
.g-rank-t{grid-column:2;font-size:14.5px;font-weight:700;color:var(--ink);line-height:1.42;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.g-rank-m{grid-column:2;font-size:12px;color:var(--muted);margin-top:2px}
.g-rank img{grid-column:3;grid-row:1/3;width:56px;height:56px;border-radius:8px;object-fit:cover;background:var(--bg2)}
.g-rank a:hover .g-rank-t{color:var(--brand)}

/* 카테고리 섹션 + 촘촘한 카드 */
.g-catsec{margin-top:44px}
.g-catsec-h{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:6px}
.g-catsec-h h2{font-size:20px;font-weight:800;color:var(--ink)}
.g-catsec-h a{font-size:13px;color:var(--gray);text-decoration:none}
.g-grid{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 28px}
.g-card{border-bottom:1px solid var(--line)}
.g-card a{display:grid;grid-template-columns:minmax(0,1fr) 84px;gap:14px;align-items:center;padding:16px 0;text-decoration:none;color:inherit}
.g-card-t{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:15.5px;color:var(--ink);font-weight:700;line-height:1.45}
.g-card a:hover .g-card-t{color:var(--brand)}
.g-card-m{display:block;font-size:12.5px;color:var(--muted);margin-top:6px}
.g-card-v{color:var(--brand)}
.g-card-v:not(:empty)::before{content:" · "}
.g-card-img{display:block;width:84px;height:84px;border-radius:10px;overflow:hidden;background:var(--bg2)}
.g-card-img img{width:100%;height:100%;object-fit:cover}

/* 상담 띠 */
.g-band{display:flex;align-items:center;gap:16px;margin:44px 0 0;padding:18px 22px;border-radius:14px;background:var(--ivory2);border:1px solid #F1DFCE}
.g-band img{width:44px;height:44px;flex:none}
.g-band p{flex:1;min-width:0}
.g-band b{display:block;color:var(--ink);font-size:16px}
.g-band span{display:block;color:var(--gray);font-size:13.5px}
.g-band a{flex:none;font-weight:700;font-size:14px;padding:9px 16px;border-radius:999px;text-decoration:none}
.g-band-k{background:#FEE500;color:#191600}
.g-band-q{background:var(--brand);color:#fff}

/* 글 페이지 */
.g-crumb{font-size:13px;color:var(--muted);margin-bottom:14px}
.g-crumb a{color:var(--muted);text-decoration:none}
.g-cat{display:inline-block;font-size:12.5px;color:var(--brand);font-weight:700;background:var(--ivory);padding:3px 10px;border-radius:6px;margin-bottom:10px}
h1{font-size:clamp(25px,3.6vw,34px);line-height:1.38;font-weight:800;letter-spacing:-.03em;color:var(--ink);margin-bottom:14px}
.g-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;font-size:13px;color:var(--muted);padding-bottom:18px;border-bottom:1px solid var(--line);margin-bottom:22px}
.g-by{display:flex;align-items:center;gap:6px;color:var(--body);font-weight:600}
.g-by img{width:22px;height:22px;border-radius:50%;background:var(--ivory);padding:2px}
.g-meta-r{margin-left:auto;display:flex;gap:12px}
.g-views{color:var(--brand);font-weight:600}
.g-views:empty{display:none}
.g-note{background:var(--ivory2);border-radius:10px;padding:16px 18px;margin-bottom:24px}
.g-note span{display:inline-block;background:#F9E3C9;color:var(--brand-d);font-size:12px;font-weight:800;padding:2px 8px;border-radius:4px;margin-bottom:6px}
.g-note p{font-size:15.5px;color:var(--ink);line-height:1.7}
.g-hero{margin:0 0 28px;border-radius:14px;overflow:hidden;aspect-ratio:16/9;background:var(--bg2)}
.g-hero img{width:100%;height:100%;object-fit:cover}
.g-toc{border:1px solid var(--line);border-radius:12px;padding:16px 20px;margin-bottom:32px}
.g-toc p{font-size:13px;font-weight:800;color:var(--ink);margin-bottom:4px}
.g-toc ol{padding-left:20px}
.g-toc li{font-size:14.5px;margin:3px 0}
.g-toc li::marker{color:var(--muted)}
.g-toc a{color:var(--gray);text-decoration:none}
.g-toc a:hover{color:var(--brand)}

/* 왼쪽 액션 바 */
.g-rail{position:sticky;top:150px;align-self:start;display:flex;flex-direction:column;gap:10px;padding-top:120px}
.g-rail-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;width:48px;height:48px;border-radius:50%;border:1px solid var(--line2);background:#fff;color:var(--gray);font:inherit;font-size:16px;cursor:pointer;text-decoration:none}
.g-rail-btn:hover{border-color:var(--brand);color:var(--brand)}
.g-rail-btn img{width:20px;height:20px}
.g-rail-btn .g-like-n{font-size:10.5px;line-height:1;color:var(--gray)}
.g-rail-btn.on{background:var(--brand);border-color:var(--brand)}
.g-rail-btn.on img{filter:brightness(0) invert(1)}
.g-rail-btn.on .g-like-n{color:#fff}
.g-rail-btn.done{border-color:var(--brand);color:var(--brand)}
.g-rail-q{font-size:12px;font-weight:800;color:var(--brand);border-color:#EBCDB8}

/* 본문 */
.g-body{font-size:17px;color:var(--body);line-height:1.85}
.g-body h2{font-size:23px;line-height:1.45;color:var(--ink);font-weight:800;letter-spacing:-.02em;margin:52px 0 12px;scroll-margin-top:130px}
.g-body h3{font-size:18.5px;color:var(--ink);font-weight:700;margin:28px 0 8px}
.g-body p{margin:14px 0}
.g-body ul,.g-body ol{margin:14px 0;padding-left:22px}
.g-body li{margin:6px 0}
.g-body li::marker{color:var(--brand)}
.g-body strong{color:var(--ink);font-weight:700;background:linear-gradient(transparent 60%,var(--ivory) 60%)}
.g-body a{text-decoration:underline;text-underline-offset:3px}
.g-body blockquote{border-left:3px solid var(--brand);background:var(--bg2);padding:12px 16px;border-radius:0 8px 8px 0;margin:18px 0}
.g-table{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:22px 0 6px;border:1px solid var(--line);border-radius:12px}
.g-body table{width:100%;min-width:520px;border-collapse:collapse;font-size:14.5px;line-height:1.65}
.g-body th,.g-body td{border-bottom:1px solid var(--line);padding:11px 14px;text-align:left;vertical-align:top}
.g-body tr:last-child td{border-bottom:0}
.g-body th{background:var(--bg2);color:var(--ink);font-weight:700;white-space:nowrap}
.g-body .g-cap{font-size:12.5px;color:var(--muted);margin:6px 2px 26px;line-height:1.6}

/* 서비스 박스 */
.g-prod{margin:40px 0;padding:18px;border:1px solid var(--line);border-radius:14px}
.g-prod-h{font-size:15px;font-weight:800;color:var(--ink)}
.g-prod-h::before{content:"AD";display:inline-block;font-size:10.5px;font-weight:800;color:var(--brand);border:1px solid #EBCDB8;border-radius:4px;padding:0 5px;margin-right:6px;vertical-align:2px}
.g-prod-note{font-size:12px;color:var(--muted);margin:2px 0 12px}
.g-prod-list{display:grid;gap:10px}
.g-prod-card{display:grid;grid-template-columns:140px 1fr;gap:14px;align-items:center;padding:10px;border-radius:10px;background:var(--bg2)}
.g-prod-img{display:block;aspect-ratio:16/10;border-radius:8px;overflow:hidden;background:var(--line)}
.g-prod-img img{width:100%;height:100%;object-fit:cover}
.g-prod-name{font-size:15.5px;font-weight:800;color:var(--ink);margin:0}
.g-prod-desc{font-size:13.5px;color:var(--gray);line-height:1.55;margin:3px 0 8px}
.g-prod-btns{display:flex;flex-wrap:wrap;gap:6px}
.g-prod-btns a{font-size:13px;font-weight:700;padding:7px 12px;border-radius:8px;text-decoration:none;border:1px solid var(--line2);background:#fff;color:var(--body)}
.g-prod-btns a.pri{background:var(--brand);border-color:var(--brand);color:#fff}

.g-memo{margin:36px 0;padding:18px 20px;border-radius:12px;background:var(--ivory2);display:grid;grid-template-columns:auto 1fr;gap:4px 12px}
.g-memo::before{content:"";grid-row:1/3;width:36px;height:36px;border-radius:50%;background:#fff url(/favicon.png) center/24px no-repeat}
.g-memo-h{font-size:13px;font-weight:800;color:var(--brand)}
.g-memo p{font-size:15.5px;color:var(--body)}

.g-video{margin:36px 0}
.g-video-box{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#000}
.g-video-box iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.g-video figcaption{font-size:13px;color:var(--muted);margin-top:8px}

.g-faq h2,.g-src h2,.g-related h2{font-size:20px;color:var(--ink);font-weight:800;margin:46px 0 10px}
.g-qa{border-top:1px solid var(--line);padding:14px 0}
.g-qa:last-child{border-bottom:1px solid var(--line)}
.g-qa summary{cursor:pointer;font-size:16px;font-weight:700;color:var(--ink);list-style:none;position:relative;padding:0 30px 0 24px}
.g-qa summary::before{content:"Q";position:absolute;left:0;color:var(--brand);font-weight:800}
.g-qa summary::-webkit-details-marker{display:none}
.g-qa summary::after{content:"+";position:absolute;right:4px;top:-2px;font-size:20px;color:var(--muted)}
.g-qa[open] summary::after{content:"–"}
.g-qa p{font-size:15.5px;color:var(--body);margin:8px 0 0 24px}
.g-src ul{padding-left:20px;font-size:13.5px;color:var(--gray)}
.g-src li{margin:4px 0}
.g-src a{color:var(--gray)}
.g-legal{margin-top:22px;font-size:12.5px;color:var(--muted)}

/* 좋아요(글 끝) */
.g-like{display:flex;flex-direction:column;align-items:center;gap:8px;margin:44px 0 6px;text-align:center}
.g-like .g-like-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 22px;border-radius:999px;border:1px solid var(--line2);background:#fff;color:var(--body);font:inherit;font-size:15px;font-weight:700;cursor:pointer}
.g-like .g-like-btn img{width:22px;height:22px}
.g-like .g-like-btn:hover{border-color:var(--brand);color:var(--brand)}
.g-like .g-like-btn.on{background:var(--brand);border-color:var(--brand);color:#fff}
.g-like .g-like-btn.on img{filter:brightness(0) invert(1)}
.g-like-n:empty{display:none}
.g-like p{font-size:12.5px;color:var(--muted)}

.g-cta{margin:40px 0 8px;padding:26px 24px;border-radius:14px;background:var(--ink);color:#EEE7E0}
.g-cta-h{font-size:20px;font-weight:800;margin-bottom:4px;color:#fff}
.g-cta p{font-size:15px}
.g-cta-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.g-btn{display:inline-block;background:var(--brand);color:#fff;font-weight:800;font-size:15px;padding:12px 20px;border-radius:999px;text-decoration:none}
.g-btn-ghost{background:#FEE500;color:#191600}
.g-related .g-grid{grid-template-columns:repeat(2,minmax(0,1fr))}

/* 사이드바 */
.g-side{position:sticky;top:130px;align-self:start;display:grid;gap:24px}
.g-ad{position:relative;border-radius:16px;padding:22px 20px 18px;background:var(--ivory2);border:1px solid #F1DFCE;overflow:hidden}
.g-ad-potato{position:absolute;right:-10px;top:-10px;width:84px;height:auto;opacity:.18}
.g-ad-k{font-size:12px;color:var(--brand);font-weight:700}
.g-ad-t{font-size:18.5px;font-weight:800;color:var(--ink);line-height:1.42;margin:6px 0}
.g-ad-d{font-size:13.5px;color:var(--gray);line-height:1.6;margin-bottom:14px}
.g-ad-btn,.g-ad-btn2{display:block;text-align:center;font-weight:800;font-size:15px;padding:11px;border-radius:12px;text-decoration:none;margin-top:8px}
.g-ad-btn{background:#FEE500;color:#191600}
.g-ad-btn2{background:var(--brand);color:#fff}
.g-ad-tel{display:block;text-align:center;font-size:13.5px;color:var(--gray);margin-top:10px;text-decoration:none}
.g-side-h{font-size:16px;font-weight:800;color:var(--ink);margin-bottom:4px}
.g-side-h em{display:none}
.g-picks ol{list-style:none;counter-reset:pick}
.g-picks li{counter-increment:pick;position:relative;padding:11px 0 11px 26px;border-top:1px solid var(--line)}
.g-picks li::before{content:counter(pick);position:absolute;left:2px;top:10px;font-weight:800;color:var(--brand);font-size:15px}
.g-picks a{display:block;font-size:14.5px;font-weight:700;color:var(--ink);text-decoration:none;line-height:1.45}
.g-picks a:hover{color:var(--brand)}
.g-picks span{font-size:12px;color:var(--muted)}

/* 하단 */
.g-foot{background:var(--bg2);border-top:1px solid var(--line);color:var(--gray);padding:38px 24px 32px;text-align:center;font-size:12.5px;line-height:1.95}
.g-foot-slogan{font-size:19px;font-weight:800;color:var(--ink);letter-spacing:-.02em}
.g-foot-en{font-family:var(--serif);font-style:italic;font-size:16px;color:var(--brand);margin:0 0 14px}
.g-foot b{color:var(--ink)}
.g-foot a{color:var(--gray);text-decoration:none}

@media (max-width:1100px){
  .g-page-post{grid-template-columns:minmax(0,1fr) 280px}
  .g-rail{display:none}
}
@media (max-width:980px){
  .g-page-post{grid-template-columns:minmax(0,1fr)}
  .g-page-post .g-main{max-width:none}
  .g-side{position:static}
  .g-topic{grid-template-columns:minmax(0,1fr)}
  .g-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:620px){
  .g-top-in{gap:10px;padding:10px 16px;flex-wrap:wrap}
  .g-logo{height:28px}
  .g-mark{width:26px;height:26px}
  .g-quote{margin-left:auto;padding:7px 14px;font-size:13px}
  .g-search{order:3;flex-basis:100%;max-width:none;margin-left:0}
  .g-chips{padding:0 16px;gap:16px}
  .g-chips .g-chip-home{display:none}
  .g-page{padding:20px 16px 60px}
  .g-topic-main{aspect-ratio:4/3}
  .g-grid,.g-related .g-grid{grid-template-columns:minmax(0,1fr)}
  .g-card a{grid-template-columns:minmax(0,1fr) 76px}
  .g-card-img{width:76px;height:76px}
  .g-band{flex-wrap:wrap}
  .g-band p{flex-basis:calc(100% - 60px)}
  .g-band a{flex:1;text-align:center}
  .g-body{font-size:16.5px}
  .g-meta-r{margin-left:0}
  .g-prod-card{grid-template-columns:96px 1fr;gap:10px}
}