/* 숨숨학당 얼굴 — sumsum.php 만 부른다. front.css 를 통째로 다시 올리지 않으려고 따로 뒀다(9/22 밤, 루체루트). 색 이름(--moss 등)은 front.css 것을 그대로 쓴다 */
/* ════════ 숨숨학당 — 조각보 (sumsum.php) — 2026-09-22 밤 ════════
   조각보 — 제 모양을 지킨 조각이 이어 붙어 무늬가 된다. 밝은 앞면 결 그대로(별빛서고처럼 어둡게 가지 않는다).
   안 내놓은 조각·낱말은 점선 + 흐리게(.off) — 이름만 보이고 눌러지지 않는다(대표님 9/22 밤). — 루체루트 */
.ss{padding:30px 0 10px}
.ss-hero{text-align:center;margin-bottom:34px}
.ss-art{display:block;width:100%;height:auto;margin:-4px 0 18px;border-radius:0 0 22px 22px} /* 동굴 안 조각보 — 별빛서고와 같은 틀. 윗줄과의 틈 26px 도 별빛서고(.sg 윗 여백)와 같게(9/22, 루체루트) */
.ss-hero h1{margin:0;font-family:var(--serif);font-weight:800;font-size:36px;letter-spacing:.05em;line-height:1.3}
.ss-sub{font-size:12.5px;font-weight:700;color:var(--brown);letter-spacing:.2em;margin-top:2px}
.ss-intro{margin:14px auto 0;max-width:540px;font-size:14.5px;color:var(--soft);line-height:1.9}
.ss-count{margin-top:10px;font-size:12.5px;color:var(--soft)}
.ss-count .num{font-weight:800;color:var(--ink)}
.ss-empty{text-align:center;font-size:14px;color:var(--soft);padding:10px 0 40px}
.ss-empty a{color:var(--moss)}
.ss-sec{margin-bottom:40px}
.ss-jgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.ss-pgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media (max-width:600px){.ss-jgrid,.ss-pgrid{grid-template-columns:1fr}}
.ss-jcard{display:flex;flex-direction:column;gap:8px;background:var(--card);border:1px solid var(--line);border-radius:14px;
 padding:16px 18px;text-decoration:none;color:inherit;box-shadow:var(--sh);transition:transform .15s;position:relative;overflow:hidden}
.ss-jcard::before{content:'';position:absolute;left:0;right:0;top:0;height:4px;
 background:linear-gradient(90deg,var(--moss) 0 34%,var(--brown) 34% 58%,var(--jeje) 58% 100%)}
.ss-jcard:hover{transform:translateY(-2px)}
.ss-jcard img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:9px;background:var(--wall)}
.ss-jcard .t{font-family:var(--serif);font-size:17px;font-weight:800;line-height:1.45}
.ss-jcard .ps{display:flex;flex-wrap:wrap;gap:5px}
.ss-jcard .p{font-size:11.5px;font-weight:600;padding:1px 9px;border-radius:6px;background:var(--moss-bg);color:var(--moss)}
.ss-jcard .p.off{background:none;border:1px dashed var(--line);color:var(--soft)}
.ss-jcard .p.more{background:none;color:var(--soft)}
.ss-jcard .o{font-size:13px;color:var(--soft);line-height:1.7}
.ss-pcard{display:flex;gap:14px;align-items:flex-start;background:var(--card);border:1px solid var(--line);border-radius:14px;
 padding:14px 16px;text-decoration:none;color:inherit;transition:transform .15s}
.ss-pcard:hover{transform:translateY(-2px);border-color:var(--moss-line)}
.ss-pcard img{flex:0 0 64px;width:64px;height:64px;object-fit:cover;border-radius:10px;background:var(--wall)}
.ss-pcard .tx{min-width:0;display:flex;flex-direction:column;gap:3px}
.ss-pcard .t{font-size:15px;font-weight:700;line-height:1.5}
.ss-pcard .o{font-size:12.5px;color:var(--soft);line-height:1.65;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ss-pcard .d{font-size:11.5px;color:var(--moss);font-weight:600}
.ss-jcard .t,.ss-pcard .t{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;text-decoration-color:var(--line)}

/* 한 장 */
.ss-crumb{display:flex;gap:8px;font-size:13px;color:var(--soft);margin-bottom:14px}
.ss-crumb a{color:var(--moss);font-weight:600;text-decoration:underline;text-underline-offset:4px}
.ss-leaf{position:relative;background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:var(--sh);
 padding:36px 38px 32px;overflow:hidden}
.ss-leaf::before{content:'';position:absolute;left:0;right:0;top:0;height:6px;background:var(--moss)}
.ss-leaf.join::before{background:linear-gradient(90deg,var(--moss) 0 34%,var(--brown) 34% 58%,var(--jeje) 58% 100%)}
@media (max-width:560px){.ss-leaf{padding:28px 20px 24px}}
.ss-kind{font-size:11.5px;font-weight:800;letter-spacing:.12em;color:var(--brown)}
.ss-h{margin:4px 0 0;font-family:var(--serif);font-size:32px;font-weight:800;line-height:1.35;letter-spacing:-.01em}
.ss-meta{margin-top:8px;font-size:13px;color:var(--soft)}
.ss-body{margin-top:22px;font-size:15.5px;line-height:2}
.ss-body p{margin:0 0 14px}
.ss-sect{margin-top:28px}
.ss-lab{font-size:11.5px;font-weight:800;letter-spacing:.08em;color:var(--moss);margin-bottom:8px}
.ss-sect .ss-body{margin-top:0}
.ss-chips{display:flex;flex-wrap:wrap;gap:7px}
.ss-chips a,.ss-chips span{font-size:14px;font-weight:600;padding:6px 14px;border-radius:10px;border:1px solid var(--line);
 background:var(--bg);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.ss-chips a:hover{border-color:var(--moss);color:var(--moss)}
.ss-chips.join a{border-color:var(--brown-bg);background:var(--brown-bg);color:var(--brown)}
.ss-chips .off{border-style:dashed;color:var(--soft);background:none;text-decoration:none;opacity:.7}
.ss-shots{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:22px}
.ss-shots.one{grid-template-columns:1fr}
.ss-shots figure{margin:0}
.ss-shots a{display:block;border-radius:12px;overflow:hidden;cursor:zoom-in}
.ss-shots img{display:block;width:100%;height:auto;background:var(--wall)}
.ss-shots figcaption{margin-top:6px;font-size:12px;color:var(--soft);line-height:1.6}
.ss-parts{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px;margin-top:22px}
.ss-part{display:flex;flex-direction:column;gap:3px;background:var(--bg);border:1px solid var(--line);border-radius:12px;
 padding:12px 14px;text-decoration:none;color:inherit;transition:transform .15s}
a.ss-part:hover{transform:translateY(-2px);border-color:var(--moss-line)}
.ss-part img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:8px;margin-bottom:6px;background:var(--wall)}
.ss-part .k{font-size:10.5px;font-weight:800;letter-spacing:.08em;color:var(--brown)}
.ss-part .n{font-size:15px;font-weight:700;line-height:1.45}
a.ss-part .n{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.ss-part .o{font-size:12px;color:var(--soft);line-height:1.6}
.ss-part.off{border-style:dashed;background:none;opacity:.6}
.ss-back{display:inline-block;margin-top:20px;font-size:13.5px;font-weight:600;color:var(--moss);text-decoration:underline;text-underline-offset:4px}
.ss-edit{display:inline-block;margin:20px 0 0 14px;font-size:12.5px;color:var(--soft)}