.sp-hero{padding:40px 0 4px;display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.sp-hero h1{font-family:var(--serif);font-size:36px;font-weight:700;letter-spacing:-.025em;margin:0 0 8px}
.sp-hero p{font-size:16px;color:var(--sub);margin:0;max-width:620px;line-height:1.7}
.sp-write{flex:none}
.sp-regions{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--line);margin:26px 0 0}
.sp-regions::-webkit-scrollbar{display:none}
.sp-regions button{flex:none;height:44px;padding:0 11px;border:0;background:none;font-size:16px;font-weight:500;color:var(--sub);position:relative;cursor:pointer}
.sp-regions button[aria-pressed="true"]{color:var(--ink);font-weight:700}
.sp-regions button[aria-pressed="true"]::after{content:"";position:absolute;left:11px;right:11px;bottom:-1px;height:2px;background:var(--blue)}
.sp-list{list-style:none;margin:0;padding:0 0 20px}
.sp-list a{display:block;padding:22px 0;border-bottom:1px solid var(--line);color:inherit}
.sp-list .mt{font-size:12px;font-weight:600;color:var(--blue)}
.sp-list h2{font-family:var(--serif);font-size:22px;font-weight:700;letter-spacing:-.02em;line-height:1.4;margin:5px 0 6px}
.sp-list a:hover h2{color:var(--blue)}
.sp-list p{font-size:16px;color:var(--sub);margin:0;line-height:1.65;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sp-list .by{display:block;font-size:14px;color:var(--faint);margin-top:8px}
.sp-empty{padding:70px 0 90px;text-align:center}
.sp-empty b{display:block;font-family:var(--serif);font-size:22px;margin-bottom:8px}
.sp-empty p{color:var(--sub);margin:0 0 22px;font-size:16px}
.sp-more{display:flex;justify-content:center;padding:10px 0 80px}
.sp-rules{margin:36px 0 80px;padding:20px 22px;border-radius:12px;background:var(--surface);font-size:14px;color:var(--sub);line-height:1.75}
.sp-rules h3{font-size:14px;margin:0 0 6px;color:var(--ink)}
.sp-rules ul{margin:0;padding-left:18px}
/* 글쓰기 */
.sp-form{max-width:760px;padding-top:28px;padding-bottom:80px}
.sp-form h1{font-family:var(--serif);font-size:28px;font-weight:700;letter-spacing:-.025em;margin:8px 0 6px}
.sp-form .lead{margin-bottom:22px}
.sp-form fieldset{border:0;margin:0 0 26px;padding:0}
.sp-form legend{font-size:14px;font-weight:700;color:var(--faint);letter-spacing:.02em;padding:0 0 10px;margin-bottom:14px;border-bottom:1px solid var(--line);width:100%}
.sp-form .f{margin-bottom:16px}
.sp-form .opt{font-weight:500;color:var(--faint);font-size:14px;margin-left:4px}
.sp-form textarea.ta{min-height:300px;line-height:1.8}
.sp-form .cnt{font-size:12px;color:var(--faint);text-align:right;margin-top:4px}
.sp-form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.sp-form .agree{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.6;color:var(--ink-2);padding:14px 16px;border-radius:10px;background:var(--surface);margin:4px 0 18px}
.sp-form .agree input{width:19px;height:19px;margin-top:2px;flex:none;accent-color:var(--blue)}
.sp-form .msg{min-height:22px;font-size:14px;font-weight:600;color:var(--hot);margin:0 0 10px}
.sp-form .row2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px}
.sp-form .btns{display:flex;gap:8px}
.sp-form .btns .btn{min-width:120px}
.sp-form select{appearance:none;-webkit-appearance:none}
.sp-photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:10px;margin-bottom:12px}
.sp-photos:empty{display:none}
.sp-ph{position:relative;aspect-ratio:1;border-radius:10px;overflow:hidden;background:var(--surface)}
.sp-ph img{width:100%;height:100%;object-fit:cover;display:block}
.sp-ph .x{position:absolute;top:6px;right:6px;width:28px;height:28px;border-radius:50%;border:0;background:rgba(15,26,46,.72);color:#fff;font-size:16px;line-height:1;cursor:pointer}
.sp-ph .tag{position:absolute;left:6px;bottom:6px;padding:2px 7px;border-radius:4px;background:#fff;color:var(--ink);font-size:12px;font-weight:700}
.sp-ph.busy::after{content:"줄이는 중";position:absolute;inset:0;display:grid;place-items:center;background:rgba(255,255,255,.75);font-size:14px;color:var(--sub)}
.sp-add{position:relative;cursor:pointer;overflow:hidden}
.sp-add input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}
.sp-add[hidden]{display:none}
.sp-form .hint{font-size:14px;color:var(--faint);margin:8px 0 0;line-height:1.6}
.sp-list a.has{display:grid;grid-template-columns:minmax(0,1fr) 112px;gap:0 20px;align-items:center}
.sp-list .th{grid-column:2;grid-row:1/5;width:112px;aspect-ratio:1;border-radius:8px;overflow:hidden;background:var(--surface)}
.sp-list .th img{width:100%;height:100%;object-fit:cover;display:block}
.sp-list a.has>*:not(.th){grid-column:1}
.sp-post .cover img,.sp-post .tv-body figure img{width:100%;height:auto;display:block;border-radius:10px}
.sp-post .tv-body figure{margin:26px 0}
/* 본문 */
.sp-acts{display:flex;gap:8px;align-items:center;margin:34px 0 0;padding-top:20px;border-top:1px solid var(--line)}
.sp-rep{margin-left:auto;border:0;background:none;font-size:14px;color:var(--faint);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.sp-note{font-size:14px;color:var(--faint);line-height:1.7;margin:18px 0 0}
.sp-back{display:flex;gap:18px;margin:26px 0 0;font-size:16px;font-weight:600}
.sp-back a{color:var(--blue)}
dialog.sp-dlg{border:0;border-radius:14px;padding:24px;width:min(92vw,380px);box-shadow:0 20px 60px rgba(15,26,46,.25)}
dialog.sp-dlg::backdrop{background:rgba(15,26,46,.45)}
.sp-dlg h2{font-family:var(--serif);font-size:22px;margin:0 0 6px}
.sp-dlg p{font-size:14px;color:var(--sub);margin:0 0 14px;line-height:1.6}
.sp-dlg .msg{min-height:20px;font-size:14px;color:var(--hot);font-weight:600;margin:8px 0}
.sp-dlg .btns{display:flex;gap:8px;justify-content:flex-end}
.sp-dlg select,.sp-dlg input[type=password]{width:100%}
@media (max-width:640px){
  .sp-hero{padding-top:26px}.sp-hero h1{font-size:28px}.sp-hero p{font-size:16px}
  .sp-write{width:100%}
  .sp-regions{margin:20px -20px 0;padding:0 12px}
  .sp-list h2{font-size:18px}.sp-list p{font-size:14px}
  .sp-list a.has{grid-template-columns:minmax(0,1fr) 84px;gap:0 14px}.sp-list .th{width:84px}
  .sp-photos{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .sp-form h1{font-size:28px}
  .sp-form .row2{grid-template-columns:minmax(0,1fr)}
  .sp-form .btns .btn{flex:1}
  .sp-rules{padding:16px 17px;font-size:14px}
}