/* 별빛서고 제목에만 쓰는 명조 — 쓰는 글자만 그때그때 받아 온다(구글 폰트가 글자 묶음별로 나눠 준다) */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@600;800&display=swap');
/* 얼굴 — 제제프렌즈 쪽과 같은 결로. 흰 카드, 부드러운 그림자, 굵은 제목.
★ 2026-09-28 머그 컬러로 바꿈(대표님이 카페에서 찍어 온 주황 머그 + 파란 손잡이).
주황 = 만드는 것(버튼·진행·로고), 파랑 = 이어지는 것(링크·밑줄). 바탕은 색이 있는지 없는지 모를 정도로만.
변수 이름(moss·brown·jeje)은 옛 이름 그대로 둔다 — 여러 파일이 불러 쓰고 있어서. 값만 바뀌었다.
다크모드는 없앴다 — 폰이 어두운 모드여도 밝은 화면. 별빛서고(.sg)만 늘 밤(맨 아래 :root:has(.sg)). */
:root{color-scheme:light;--bg:#f7f6f4;--card:#fff;--ink:#1f1b18;--soft:#76706a;--line:#e6e3df;
--moss:#e8521e;--moss-d:#cf4413;--moss-bg:#fdf1eb;--moss-line:#ece9e5;--wall:#e6e3df;
--brown:#5b7fe3;--brown-bg:#eef2fc;--jeje:#5b7fe3;--jeje-bg:#eef2fc;
--sh:0 1px 2px rgba(31,35,32,.04),0 10px 30px -20px rgba(31,35,32,.25);
--r:16px;--serif:'Noto Serif KR','Nanum Myeongjo','AppleMyungjo',serif}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);line-height:1.7;word-break:keep-all;
font-family:-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Pretendard','Noto Sans KR',sans-serif;
-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%}
.wrap{max-width:880px;margin:0 auto;padding:0 20px}
a{color:inherit}
img{max-width:100%}
header{position:sticky;top:0;z-index:5;background:var(--card);border-bottom:1px solid var(--line)}
header .wrap{display:flex;align-items:center;justify-content:space-between;height:62px;gap:14px}
.logo{display:flex;align-items:center;gap:9px;font-size:17px;font-weight:800;letter-spacing:-.02em;
text-decoration:none}
.logo svg{flex:0 0 auto;display:block}
nav{display:flex;gap:18px;font-size:13.5px;overflow-x:auto;scrollbar-width:none}
nav::-webkit-scrollbar{display:none}
nav a{text-decoration:none;color:var(--soft);white-space:nowrap;font-weight:500;transition:.15s}
nav a:hover{color:var(--jeje)}
/* 첫 판 — 왼쪽에 말, 오른쪽에 사진 */
.hero{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center;padding:56px 0 44px}
.hero .eyebrow{font-size:12.5px;color:var(--moss);font-weight:700;letter-spacing:.02em;
margin-bottom:12px}
.hero h1{margin:0;font-size:32px;line-height:1.38;letter-spacing:-.03em;font-weight:800;
white-space:pre-line}
.hero .lead{margin:16px 0 0;font-size:14.5px;color:var(--soft);line-height:1.85}
.hero .lead a{color:var(--ink);text-decoration:none;border-bottom:2px solid var(--jeje)}
.hero .who{margin-top:18px;font-size:14px;font-weight:700}
.hero .shotbox img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;object-position:50% 82%;
border-radius:20px;box-shadow:var(--sh)}
.hero .shotbox .ph{aspect-ratio:4/3;border-radius:20px;background:var(--wall);display:flex;
align-items:center;justify-content:center;color:var(--soft);font-size:13px}
.btns{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap}
.btns a{font-size:13.5px;font-weight:700;padding:11px 20px;border-radius:10px;text-decoration:none;
background:var(--moss);color:#fff;transition:.15s}
.btns a.line{background:var(--card);color:var(--ink);border:1px solid var(--line)}
.btns a.line:hover{border-color:var(--jeje);color:var(--jeje);filter:none}
.btns a:hover{filter:brightness(1.07)}
@media (max-width:720px){
.hero{grid-template-columns:1fr;gap:24px;padding:36px 0 32px}
.hero h1{font-size:26px}
.hero .shotbox{order:-1}
}
/* 칸 제목 — 굵게 왼쪽, 더 보기는 오른쪽 */
.htop{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 16px}
h2{margin:0;font-size:18px;font-weight:800;letter-spacing:-.02em}
h2 small{font-weight:500;color:var(--soft);font-size:12.5px;margin-left:8px;letter-spacing:0}
.htop .more{font-size:12.5px;color:var(--jeje);text-decoration:none;white-space:nowrap}
.htop .more:hover{text-decoration:underline;text-underline-offset:3px}
section{margin-bottom:44px}
/* 전광판 — 흰 띠 안에 숫자 셋 */
.board{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);
padding:22px 8px 18px}
.cells{display:grid;grid-template-columns:repeat(4,1fr)}
.cell{text-align:center;padding:4px 12px;border-right:1px solid var(--line)}
.cell:last-child{border-right:0}
a.cell.go{display:block;text-decoration:none;color:inherit;border-radius:10px;transition:background .15s}
a.cell.go:hover{background:var(--jeje-bg)}
a.cell.go .l{color:var(--jeje)}
a.cell.go .l[style]{color:var(--soft)} /* 「2026년 9월부터」 같은 날짜 줄은 회색 */
.cell .n{font-size:28px;font-weight:800;letter-spacing:-.03em;line-height:1.2;color:var(--ink)}
.cell .n em{font-style:normal;font-size:14px;font-weight:700;color:var(--soft);margin-left:2px}
.cell .l{font-size:12px;color:var(--soft);margin-top:5px}
.bar{height:5px;border-radius:3px;background:var(--moss-line);margin:10px auto 0;max-width:180px;
overflow:hidden}
.bar i{display:block;height:100%;background:var(--moss)}
.asof{font-size:11px;color:var(--soft);text-align:right;margin-top:14px;padding-right:12px}
@media (max-width:560px){
.cells{grid-template-columns:1fr 1fr}
.cell{border-right:0;border-bottom:1px solid var(--line);padding:12px}
.cell:nth-child(2){border-right:0}
.cell.wide{grid-column:1/-1;border-bottom:0}
.cell.wide + .cell.wide{border-top:1px solid var(--line)}
}
/* 목록 — 제목 왼쪽, 날짜 오른쪽 */
.rows{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);
padding:4px 20px}
.row{display:flex;align-items:baseline;gap:14px;padding:15px 0;border-bottom:1px solid var(--line);
text-decoration:none}
.row:last-child{border-bottom:0}
.row .t{flex:1;font-size:15px;font-weight:600;line-height:1.6}
.row:hover .t{color:var(--jeje);text-decoration:underline;text-underline-offset:3px}
.row .d{font-size:12px;color:var(--soft);white-space:nowrap}
.rows .empty{padding:18px 0}
/* 만든 것 */
.mades{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media (max-width:560px){.mades{grid-template-columns:1fr}}
.made{display:block;background:var(--card);border:1px solid var(--line);border-radius:14px;
padding:16px 18px;text-decoration:none;box-shadow:var(--sh);transition:.15s}
.made:hover{transform:translateY(-2px);border-color:var(--jeje)}
.made .n{font-size:15px;font-weight:700}
.made .o{font-size:12.5px;color:var(--soft);margin-top:5px;line-height:1.7}
/* 송곳서책 (클래스 이름 shelf 는 그대로) */
.shelf{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:560px){.shelf{grid-template-columns:repeat(2,1fr);gap:12px}}
.book{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px;
display:flex;flex-direction:column;gap:9px;box-shadow:var(--sh);transition:.15s}
.book:hover{transform:translateY(-2px)}
.cover{position:relative;aspect-ratio:3/4;border-radius:9px;display:flex;align-items:flex-end;
padding:12px;font-weight:700;font-size:14px;line-height:1.45;color:#fff;overflow:hidden;
background:linear-gradient(155deg,var(--moss),var(--moss-d))}
.cover::before{content:'';position:absolute;left:7px;top:0;bottom:0;width:1px;background:rgba(255,255,255,.25)}
.cover.pre{background:linear-gradient(155deg,var(--brown),#3f5fc0)}
.cover.writing{background:linear-gradient(155deg,var(--wall),#d6d1ca);color:var(--soft)}
.cover.away{background:linear-gradient(155deg,var(--jeje),#3f5fc0)}
.tag{font-size:11px;padding:3px 9px;border-radius:99px;background:var(--moss-bg);color:var(--moss);
align-self:flex-start;font-weight:600}
.tag.pre{background:var(--brown-bg);color:var(--brown)}
.tag.away{background:none;border:1px solid var(--jeje);color:var(--jeje)}
.book .t{font-size:14px;font-weight:700}
.book .s{font-size:12px;color:var(--soft);line-height:1.7}
.book .bar{background:var(--moss-line);max-width:none;margin-top:2px}
.book .bar i{background:var(--moss)}
.btn{display:block;text-align:center;font-size:12.5px;font-weight:700;padding:9px;border-radius:9px;
text-decoration:none;background:var(--moss);color:#fff;transition:.15s}
.btn:hover{filter:brightness(1.07)}
.book .btn{background:var(--moss)}
.btn.line{background:var(--card);border:1px solid var(--line);color:var(--ink)}
.btn.line:hover{border-color:var(--jeje);color:var(--jeje)}
.gate{font-size:13px;color:var(--soft);background:var(--card);border:1px solid var(--line);
border-left:3px solid var(--moss);border-radius:12px;padding:15px 17px;line-height:1.8}
/* 글 한 편 */
.body{font-size:16.5px;line-height:1.95}
.body img,.pics img{width:100%;border-radius:14px;margin-top:16px;display:block}
.empty{font-size:14px;color:var(--soft);padding:16px 0;line-height:1.8}
.paper{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);
padding:28px 26px}
@media (max-width:560px){.paper{padding:22px 18px}}
/* 연대기 — 세로줄 위에 해마다 점 하나 */
.chron{list-style:none;margin:0;padding:0 0 0 4px;position:relative}
.chron::before{content:'';position:absolute;left:4px;top:8px;bottom:8px;width:2px;background:var(--moss-line)}
.chron li{position:relative;display:flex;gap:16px;padding:0 0 18px 22px;line-height:1.7}
.chron li:last-child{padding-bottom:0}
.chron li::before{content:'';position:absolute;left:0;top:8px;width:10px;height:10px;border-radius:50%;
background:var(--card);border:2px solid var(--moss)}
.chron li:last-child::before{background:var(--moss)}
.chron .y{flex:0 0 76px;font-weight:800;color:var(--moss);letter-spacing:-.01em}
.chron .w{flex:1;font-size:15px}
.chron .w a{color:var(--ink);text-decoration:none;border-bottom:2px solid var(--jeje)}
.chron .cp{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.chron .cp a{display:block;width:120px;border:0;border-radius:10px;overflow:hidden;box-shadow:var(--sh);cursor:zoom-in}
.chron .cp img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.chron.brick .y{flex:0 0 96px;font-size:14px}
.chron .bt{font-weight:800;font-size:16px;letter-spacing:-.02em}
.chron .bw{color:var(--soft);font-size:13.5px;margin-left:6px}
.chron .bn{display:block;margin-top:2px;color:var(--soft);font-size:14.5px}
.chron .sb{display:inline-block;margin-top:6px;font-size:12.5px;font-weight:700;color:var(--brown);
background:var(--brown-bg);border:1px solid transparent;border-radius:99px;padding:2px 10px}
.chron .w a.sb{border-bottom:1px solid transparent;color:var(--brown)}
@media (max-width:560px){.chron li{flex-direction:column;gap:2px}.chron .y{flex:none}}
/* 사진 한두 장 — 누르면 라이트박스 */
.shots{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}
.shots.one{grid-template-columns:1fr}
.shots a{display:block;border-radius:14px;overflow:hidden;box-shadow:var(--sh);cursor:zoom-in}
.shots img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .2s}
.shots a:hover img{transform:scale(1.02)}
.lb{position:fixed;inset:0;z-index:50;background:rgba(10,12,10,.88);display:flex;align-items:center;
justify-content:center;padding:20px;cursor:zoom-out}
.lb[hidden]{display:none}
.lb img{max-width:100%;max-height:100%;border-radius:10px;box-shadow:0 10px 40px rgba(0,0,0,.5)}
.lb button{position:absolute;top:14px;right:16px;width:40px;height:40px;border:0;border-radius:50%;
background:rgba(255,255,255,.14);color:#fff;font-size:24px;line-height:40px;cursor:pointer}
/* 기록 한 편 — 제목 없이, 날짜와 글. 작은 글씨 */
.post{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px 20px;margin-bottom:12px}
.post time{font-size:12px;font-weight:700;color:var(--soft);letter-spacing:.01em}
.post time a{color:inherit;text-decoration:none}
.post time a:hover{color:var(--jeje)}
.post .txt{font-size:14.5px;line-height:1.9;margin-top:8px}
.post .shots{margin-top:12px}
.post .shots img{aspect-ratio:3/2}
/* 띠 — 대문의 기록 칸만 옅은 바탕을 화면 끝까지 깐다(가로 넘침 없이). 머그 컬러에선 거의 무채색 */
.band{position:relative;background:#f0eeeb;box-shadow:0 0 0 100vmax #f0eeeb;
clip-path:inset(0 -100vmax);padding:40px 0 34px;margin-bottom:44px}
.band .post{border-color:transparent;box-shadow:var(--sh)}
.band .htop .more{color:var(--jeje)}
footer{border-top:1px solid var(--line);padding:30px 0 56px;font-size:12.5px;color:var(--soft);
background:var(--card);margin-top:20px}
footer .links{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:16px}
footer .links a{text-decoration:none;color:var(--ink);font-weight:600}
footer .links a:hover{color:var(--jeje)}
/* ════════ 별빛서고 (seogo.php) — 2026-09-21 ════════
동굴 안 깊은 곳의 서고. 낱말 이름만 명조로 — 서고의 무게는 거기서 난다.
★ 9/28 머그 컬러: 금빛(brown) → 주황, 보라(jeje) → 옅은 파랑. 「더 파볼 것」·삽은 파랑(파고들어 이어지는 길).
밤하늘 그림의 별(.tw)은 그대로 금빛 — 배경이라서. */
.sg{padding:26px 0 10px}
.sg-hero{position:relative;margin-bottom:22px}
.sg-art{display:block;width:100%;height:auto;border-radius:0 0 22px 22px}
.sg-title{text-align:center;margin-top:-6px}
.sg-title h1{margin:0;font-family:var(--serif);font-weight:800;font-size:40px;letter-spacing:.06em;line-height:1.3}
.sg-intro{margin:10px auto 0;max-width:520px;font-size:14.5px;color:var(--soft);line-height:1.9}
.sg-meta{margin-top:10px;font-size:12.5px;color:var(--brown);letter-spacing:.02em}
.sg-meta b{font-weight:800;font-size:14px}
/* 칸 알약 줄 — 9/28 여백을 줄여 한 줄에. 넘치면 가운데서 양쪽이 잘리지 않고 왼쪽부터 밀린다(safe center) */
.sg-rooms{position:sticky;top:62px;z-index:4;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;
padding:12px 0;margin-bottom:10px;background:var(--bg);justify-content:safe center}
.sg-rooms::-webkit-scrollbar{display:none}
.sg-rooms a{flex:0 0 auto;font-size:13.5px;font-weight:600;padding:7px 12px;border-radius:99px;text-decoration:none;
color:var(--ink);background:var(--card);border:1px solid var(--line);transition:.15s}
.sg-rooms a i{font-style:normal;font-size:11.5px;color:var(--soft);margin-left:3px;font-weight:600}
.sg-rooms a:hover{border-color:var(--brown)}
.sg-rooms a.on{background:var(--brown);border-color:var(--brown);color:var(--card)}
.sg-rooms a.on i{color:var(--card);opacity:.75}
@media (max-width:720px){.sg-rooms{justify-content:flex-start;top:62px}}
.sg-about{text-align:center;font-size:14px;color:var(--soft);margin:4px 0 16px}
.sg-tools{display:flex;flex-direction:column;align-items:center;gap:12px;margin:8px 0 22px}
.sg-tools input{width:100%;max-width:360px;font:inherit;font-size:14px;padding:10px 16px;border-radius:99px;
border:1px solid var(--line);background:var(--card);color:var(--ink)}
.sg-tools input:focus{outline:none;border-color:var(--brown);box-shadow:0 0 0 3px var(--brown-bg)}
.sg-cho{display:flex;flex-wrap:wrap;justify-content:center;gap:4px}
.sg-cho a{min-width:30px;text-align:center;font-size:12.5px;font-weight:700;color:var(--soft);text-decoration:none;
padding:3px 6px;border-radius:7px}
.sg-cho a:hover{background:var(--brown-bg);color:var(--brown)}
.sg-group{margin-bottom:30px;scroll-margin-top:130px}
.sg-gh{display:flex;align-items:center;gap:12px;font-family:var(--serif);font-size:20px;font-weight:800;
color:var(--brown);margin:0 0 12px}
.sg-gh::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,var(--wall),transparent)}
.sg-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media (max-width:600px){.sg-grid{grid-template-columns:1fr}}
.sg-item{display:flex;gap:14px;align-items:flex-start;background:var(--card);border:1px solid var(--line);
border-radius:14px;padding:15px 17px;text-decoration:none;color:inherit;position:relative;overflow:hidden;
transition:transform .15s,border-color .15s}
.sg-item::before{content:'';position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:0 3px 3px 0;
background:var(--wall);transition:background .15s}
.sg-item:hover{transform:translateY(-2px);border-color:var(--brown-bg)}
.sg-item:hover::before{background:var(--brown)}
.sg-item img{flex:0 0 64px;width:64px;height:64px;object-fit:cover;border-radius:10px;background:var(--wall)}
.sg-item .tx{min-width:0;display:flex;flex-direction:column;gap:3px}
.sg-item .t{font-family:var(--serif);font-size:17px;font-weight:800;letter-spacing:-.01em;line-height:1.4}
.sg-item .t small,.sg-term small{font-family:inherit;font-size:.62em;font-weight:600;color:var(--soft);margin-left:5px}
.sg-item .o{font-size:13px;color:var(--soft);line-height:1.65;display:-webkit-box;-webkit-line-clamp:2;
-webkit-box-orient:vertical;overflow:hidden}
.sg-item .m{display:flex;flex-wrap:wrap;gap:5px;margin-top:4px;align-items:center}
.sg-item .m em{font-style:normal;font-size:10.5px;font-weight:700;color:var(--brown);background:var(--brown-bg);
border-radius:99px;padding:1px 8px}
.sg-item .m time{font-size:11px;color:var(--soft)}
.sg-empty{text-align:center;font-size:14px;color:var(--soft);padding:40px 0}
.sg-empty a{color:var(--jeje)}
/* 낱말 한 장 — 도서 목록 카드처럼. 줄 친 종이 */
.sg-crumb{display:flex;gap:8px;font-size:13px;color:var(--soft);margin-bottom:14px}
.sg-crumb a{text-decoration:none;color:var(--jeje);font-weight:600}
.sg-leaf{position:relative;background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:var(--sh);
padding:38px 40px 34px;overflow:hidden}
.sg-leaf::before{content:'';position:absolute;left:0;right:0;top:0;height:6px;
background:linear-gradient(90deg,var(--brown) 55%,var(--jeje))}
@media (max-width:560px){.sg-leaf{padding:30px 20px 26px}}
.sg-term{margin:0;font-family:var(--serif);font-size:38px;font-weight:800;letter-spacing:-.01em;line-height:1.3}
.sg-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.sg-tags a{font-size:12px;font-weight:700;text-decoration:none;color:var(--brown);background:var(--brown-bg);
border-radius:99px;padding:3px 11px}
.sg-tags a:hover{background:var(--brown);color:var(--card)}
.sg-one{margin:22px 0 0;font-family:var(--serif);font-size:19px;font-weight:600;line-height:1.75;
padding:4px 0 4px 16px;border-left:3px solid var(--brown)}
.sg-fig{margin:26px 0 0}
/* 그림을 자르지 않는다 — 통째로 보이게. 아주 긴 그림만 화면 높이에서 멈춘다 (9/22, 루체루트) */
.sg-fig img{display:block;width:auto;max-width:100%;height:auto;max-height:85vh;margin:0 auto;border-radius:12px;background:var(--wall)}
.sg-fig figcaption{margin-top:7px;font-size:11.5px;color:var(--soft);line-height:1.6}
.sg-fig figcaption a{color:inherit}
.sg-lab{font-size:11.5px;font-weight:800;letter-spacing:.08em;color:var(--brown);margin-bottom:6px}
.sg-body{margin-top:28px}
.sg-body p{margin:0;font-size:15.5px;line-height:2.05;
background-image:repeating-linear-gradient(transparent 0 calc(2.05em - 1px),var(--line) calc(2.05em - 1px) 2.05em);
background-position:0 -2px}
.sg-pins{margin-top:28px}
.sg-chips{display:flex;flex-wrap:wrap;gap:7px}
.sg-chips a{font-family:var(--serif);font-size:14.5px;font-weight:600;text-decoration:none;padding:6px 14px;
border-radius:10px;border:1px solid var(--line);background:var(--bg);transition:.15s}
.sg-chips a:hover{border-color:var(--jeje);color:var(--jeje)}
.sg-back{display:inline-block;margin-top:20px;font-size:13.5px;font-weight:600;color:var(--jeje);text-decoration:none}
/* 별이 천천히 숨 쉰다. 움직임을 줄여 둔 기기에서는 가만히 */
.sg-art .tw{animation:sgtw 3.8s ease-in-out infinite}
@keyframes sgtw{0%,100%{opacity:1}50%{opacity:.3}}
@media (prefers-reduced-motion:reduce){.sg-art .tw{animation:none}}
/* 메뉴가 다섯이 되며 폰에서 로고가 두 줄로 꺾였다 — 로고는 한 줄, 메뉴는 옆으로 밀린다 */
.logo{white-space:nowrap;flex:0 0 auto}
@media (max-width:560px){nav{gap:13px;font-size:13px}.sg-title h1{font-size:32px}}
/* 별빛서고 쪽은 **늘 어둡다** — 동굴 안이니까(대표님 9/21). 폰이 밝은 모드여도 이 쪽만 밤이 된다.
:has(.sg) 는 .sg 가 있는 쪽(seogo.php)에만 걸린다. 다른 앞면은 그대로.
9/28 바탕은 그대로, 강조만 주황(brown·moss)과 옅은 파랑(jeje)으로. */
:root:has(.sg){color-scheme:dark;--bg:#131612;--card:#1b1f1a;--ink:#eceae3;--soft:#9aa093;
--line:#2a2f28;--moss:#f26a38;--moss-d:#f5855a;--moss-bg:#2a1b14;--moss-line:#3b2a21;--wall:#333029;
--brown:#f26a38;--brown-bg:#2a1b14;--jeje:#8fa8f0;--jeje-bg:#1c2233;
--sh:0 1px 2px rgba(0,0,0,.35),0 12px 32px -22px rgba(0,0,0,.9)}
:root:has(.sg) .sg-rooms a.on{color:#131612}
/* 낱말 한 장 — 창구가 붙인 조각. 조각마다 얇은 선으로 나누고, 어디서 왔는지 딱지를 단다 */
.sg-pc{margin-top:30px;padding-top:22px;border-top:1px solid var(--line)}
.sg-pch{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.sg-from{font-size:11.5px;font-weight:800;color:var(--card);background:var(--brown);border-radius:99px;padding:2px 11px}
.sg-pch a{font-size:12px;color:var(--soft);text-decoration:none}
.sg-pch a:hover{color:var(--jeje)}
.sg-sect{margin-bottom:18px}
.sg-txt p{margin:0 0 8px;font-size:15px;line-height:1.95}
.sg-dig{margin:0;padding:0;list-style:none}
.sg-dig li{position:relative;padding:6px 0 6px 18px;font-size:14.5px;line-height:1.8;border-bottom:1px dotted var(--line)}
.sg-dig li:last-child{border-bottom:0}
.sg-dig li::before{content:'✦';position:absolute;left:0;top:6px;font-size:10px;color:#8fa8f0}
.sg-links{display:flex;flex-direction:column;gap:6px}
.sg-lk{font-size:14px;line-height:1.7}
.sg-lk a,.sg-lk b{font-weight:700;color:var(--jeje);text-decoration:none;margin-right:8px}
.sg-lk a:hover{text-decoration:underline}
.sg-lk span{color:var(--soft);font-size:13px}
.sg-src{margin:4px 0 0;padding:12px 16px 12px 34px;background:var(--bg);border-radius:10px;font-size:12.5px;line-height:1.8;color:var(--soft)}
.sg-src a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
.sg-src span{margin-left:6px;font-size:11.5px}
.sg-rel .sg-chips span{font-family:var(--serif);font-size:14px;padding:6px 14px;border-radius:10px;
border:1px dashed var(--line);color:var(--soft)}
/* ✦ 더 파볼 것 — 송곳서책 주제의 씨앗(대표님 9/21). 낱말 한 장의 상자 · 모아보기 카드
9/28 금빛·보라 → 파랑(파고들어 이어지는 길) */
.sg-digbox{margin-top:26px;padding:18px 20px;border-radius:14px;background:linear-gradient(160deg,#1a2236,#1f2840);
border:1px solid #34406a}
.sg-digh{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:8px}
.sg-digh span{font-size:12.5px;font-weight:800;letter-spacing:.06em;color:#8fa8f0}
.sg-digh a{font-size:12px;color:#c3cff5;text-decoration:none;white-space:nowrap}
.sg-digh a:hover{color:#8fa8f0}
.sg-digbox ul,.sg-dcard ul{margin:0;padding:0;list-style:none}
.sg-digbox li{position:relative;padding:8px 0 8px 20px;font-family:var(--serif);font-size:15.5px;font-weight:600;
line-height:1.7;color:#eef1fb;border-bottom:1px dashed rgba(143,168,240,.2)}
.sg-digbox li:last-child{border-bottom:0}
.sg-digbox li::before,.sg-dcard li::before{content:'✦';position:absolute;left:0;top:9px;font-size:10px;color:#8fa8f0}
.sg-rooms a.dig{border-color:rgba(143,168,240,.55);color:#8fa8f0;background:rgba(143,168,240,.08)}
.sg-rooms a.dig i{color:#8fa8f0;opacity:.8}
.sg-rooms a.dig.on{background:#8fa8f0;border-color:#8fa8f0;color:#131612}
.sg-rooms a.dig.on i{color:#131612;opacity:.7}
.sg-dgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:6px}
@media (max-width:600px){.sg-dgrid{grid-template-columns:1fr}}
.sg-dcard{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 18px;position:relative}
.sg-dcard::before{content:'';position:absolute;left:0;top:16px;width:3px;height:22px;border-radius:0 3px 3px 0;background:#8fa8f0}
.sg-dcard .w{display:inline-block;font-family:var(--serif);font-size:17px;font-weight:800;text-decoration:none;
color:var(--ink);margin-bottom:6px}
.sg-dcard .w small{font-size:.62em;color:var(--soft);margin-left:5px;font-weight:600}
.sg-dcard .w:hover{color:#8fa8f0}
.sg-dcard li{position:relative;padding:6px 0 6px 18px;font-size:14.5px;line-height:1.75;border-bottom:1px dotted var(--line)}
.sg-dcard li:last-child{border-bottom:0}
.sg-dcard li::before{top:7px}
/* 누르는 곳은 밑줄 — 눌러야 하는 줄 모를 수 있어서(대표님 9/21). 칸 알약·초성 줄은 단추라 그대로 */
.sg-crumb a,.sg-back,.sg-tags a,.sg-lk a,.sg-src a,.sg-fig figcaption a,.sg-pch a,.sg-digh a,.sg-empty a,
.sg-chips a,.sg-item .t,.sg-dcard .w{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.sg-src a{border-bottom:0}
/* 기록 — 글마다 블록 이름표, read.php 위 블록 고르기 (2026-09-21 대표님: 두 블록 글이 섞여 구분이 안 간다) */
.post .phd{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.post .from{font-size:11.5px;font-weight:600;color:var(--soft);text-decoration:none;
padding:1px 9px;border:1px solid var(--line);border-radius:99px;line-height:1.7}
.post .from:hover{color:var(--jeje);border-color:var(--jeje)}
.bpick{display:flex;gap:6px;flex-wrap:wrap;margin:-4px 0 16px}
.bpick a{font-size:13px;padding:5px 13px;border-radius:99px;text-decoration:none;
background:var(--card);border:1px solid var(--line);color:var(--soft)}
.bpick a:hover{color:var(--jeje);border-color:var(--jeje)}
.bpick a.on{background:var(--moss);border-color:var(--moss);color:#fff;font-weight:600}
/* 삽 — 「더 파볼 것」이 붙은 낱말 표식(대표님 9/21 밤). 9/28 파랑 */
.sg-shovel{display:inline-flex;vertical-align:-2px;margin-left:6px;color:#8fa8f0;font-style:normal}
.sg-lab .sg-shovel,.sg-about .sg-shovel{margin-left:0}
/* 더 파볼 것 상자 — 어두운 바탕에서 더 또렷하게(대표님 9/21 밤). 위의 .sg-digbox 를 덮는다. 9/28 파랑 */
.sg-digbox{margin-top:28px;padding:20px 22px;border-radius:16px;
background:linear-gradient(160deg,#1e2a4a,#243258);border:1px solid rgba(143,168,240,.55);
box-shadow:0 0 0 1px rgba(0,0,0,.2),0 14px 40px -18px rgba(143,168,240,.35)}
.sg-digh span{font-size:14px;color:#a9bdf6;display:inline-flex;align-items:center;gap:6px}
.sg-digh span .sg-shovel{margin:0;color:#a9bdf6}
.sg-digh a{color:#dbe3fb}
.sg-digbox li{color:#f5f7ff;font-size:15.5px;font-family:inherit;font-weight:400;line-height:1.95;border-bottom-color:rgba(143,168,240,.28)} /* 쉬운 말로와 같은 크기(대표님 9/21 밤) */
.sg-digbox li::before{color:#a9bdf6}
/* ════════ 사진 작은 판 + 라이트박스 넘기기 (2026-09-22 밤) ════════
대표님: 「기록을 보여줄 때 사진이 너무 크게 보여. 썸네일처럼, 라이트박스로. 여러 장이면 좌우로」.
기록 글(.post)의 사진은 작은 네모로 줄 선다. 누르면 크게(frontpost.php pub_lightbox). — 루체루트 */
.post .shots,.post .shots.one{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.post .shots a{flex:0 0 auto;width:112px;border-radius:10px;box-shadow:none;border:1px solid var(--line)}
.post .shots img{width:112px;height:112px;aspect-ratio:auto;object-fit:cover}
.post .shots.one a{width:180px}
.post .shots.one img{width:180px;height:135px}
@media (max-width:560px){
.post .shots a{width:calc((100% - 16px)/3)}
.post .shots img{width:100%;height:auto;aspect-ratio:1/1}
.post .shots.one a{width:60%}
/* 한 장짜리는 사진도 상자 폭을 따라간다 — 위의 180px 가 남아 상자 오른쪽이 비고 테두리만 보이던 것(9/22 대표님 폰, 루체루트) */
.post .shots.one img{width:100%;height:auto;aspect-ratio:4/3}
}
.lb button.lbp,.lb button.lbn{top:50%;right:auto;left:14px;margin-top:-24px;width:48px;height:48px;font-size:32px;line-height:44px}
.lb button.lbn{left:auto;right:14px}
.lb button[hidden]{display:none}
.lb .lbc{position:absolute;bottom:16px;left:0;right:0;text-align:center;color:rgba(255,255,255,.8);font-size:13px;letter-spacing:.05em}
.lb .lbc[hidden]{display:none}
.lb img{cursor:default}
@media (min-width:700px){.lb{padding:40px 80px}}
/* 엮은 말 · 지은 말 딱지 (9/22, 루체루트) */
.sg-tags .sg-coin{font-size:12px;font-weight:700;color:var(--moss);border:1px solid currentColor;border-radius:99px;padding:3px 11px;line-height:1.5}
/* 기록 글 밑 — 이 글이 들어간 숨숨학당 담기·잇기 (9/22, 루체루트) */
.post .pjoin{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:12px;font-size:12px}
.post .pjoin span{color:var(--soft);font-weight:700;margin-right:2px}
.post .pjoin a{color:var(--brown);background:var(--brown-bg);border-radius:99px;padding:2px 10px;text-decoration:none;font-weight:600}
.post .pjoin a:hover{text-decoration:underline}
/* ════════ 폰 — 윗줄 메뉴는 오른쪽 위 햄버거로 (2026-09-28 대표님: 폰에서 상단 메뉴가 다 안 보인다) ════════
frontlib.php pub_head 의 +