/* 오크팟 — kong.css 위에 얹는다 (같은 어두운 바탕 + 금색) */
.op-wrap { width: min(760px, 100% - 32px); margin: 0 auto; padding: 28px 0 56px; }
.op-wide { width: min(1120px, 100% - 32px); }
.ophero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 24px; align-items: center; padding: 40px 0 20px; }
.ophero h1 { word-break: keep-all; font-size: clamp(34px, 5.6vw, 62px); line-height: 1.12; margin: 0 0 18px; letter-spacing: -.035em; font-weight: 800; text-wrap: balance; }
.ophero-copy > p:not(.op-note) { color: var(--muted); margin: 0 0 26px; max-width: 44ch; font-size: 17px; line-height: 1.65; }
.op-cta { display: flex; gap: 10px; flex-wrap: wrap; }
.op-cta .btn { padding: 14px 26px; font-size: 16px; }
.ophero-copy .op-note { color: var(--subtle); font-size: 13px; margin: 22px 0 0; max-width: 50ch; }
.ophero-art { position: relative; display: grid; place-items: center; min-height: 420px; }
.ophero-art .halo { position: absolute; width: min(100%, 440px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 50% 45%, rgba(255, 196, 80, .30), rgba(255, 196, 80, .06) 55%, transparent 70%); border: 1px solid rgba(255, 217, 120, .14); box-shadow: inset 0 0 60px rgba(255, 190, 70, .08); }
.ophero-art .halo::after { content: ""; position: absolute; inset: 11%; border-radius: 50%; border: 1px dashed rgba(255, 217, 120, .16); }
.ophero-art .mascot { position: relative; width: min(64%, 270px); height: auto; filter: drop-shadow(0 26px 24px rgba(0, 0, 0, .55)); animation: barrelfloat 5s ease-in-out infinite; }
@keyframes barrelfloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
.ophero-art .fc { position: absolute; padding: 8px 14px; border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--gold); background: rgba(18, 16, 9, .78); border: 1px solid rgba(255, 217, 120, .3); backdrop-filter: blur(8px); box-shadow: inset 0 1px 0 rgba(255, 236, 190, .1), 0 10px 24px rgba(0, 0, 0, .4); font-variant-numeric: tabular-nums; }
.ophero-art .fc.c1 { top: 14%; left: 2%; } .ophero-art .fc.c2 { top: 42%; right: 0; } .ophero-art .fc.c3 { bottom: 12%; left: 6%; }
.opflow { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; margin: 34px 0 10px; counter-reset: st; }
.op-step { counter-increment: st; position: relative; overflow: hidden; border-radius: 22px; padding: 24px 24px 26px; border: 1px solid var(--border); background: linear-gradient(180deg, rgba(255, 236, 190, .07), rgba(255, 236, 190, .02)); box-shadow: inset 0 1px 0 rgba(255, 236, 190, .08); }
.op-step::before { content: counter(st, decimal-leading-zero); position: absolute; right: 18px; top: 8px; font-size: 64px; line-height: 1; font-weight: 800; letter-spacing: -.04em; color: rgba(255, 217, 120, .13); }
.op-step h3 { margin: 0 0 8px; font-size: 20px; letter-spacing: -.02em; }
.op-step p { margin: 0; color: var(--muted); font-size: 15px; max-width: 40ch; }
.op-step:nth-child(1) { grid-column: span 4; min-height: 190px; display: flex; flex-direction: column; justify-content: flex-end; background: radial-gradient(420px 220px at 90% 0%, rgba(255, 196, 80, .18), transparent 70%), linear-gradient(180deg, rgba(255, 236, 190, .07), rgba(255, 236, 190, .02)); }
.op-step:nth-child(1) h3 { font-size: 26px; }
.op-step:nth-child(2) { grid-column: span 2; }
.op-step:nth-child(3) { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1.2fr; gap: 6px 28px; align-items: end; border-color: rgba(255, 217, 120, .3); background: linear-gradient(120deg, rgba(255, 217, 120, .14), rgba(255, 217, 120, .03)); }
.op-step:nth-child(3) h3 { margin: 0; font-size: 24px; }

/* 허브 · 글 */
.hub-head { display: grid; gap: 6px; margin: 4px 0 18px; }
.hub-head .by { color: var(--gold); font-size: 14px; font-weight: 700; }
.hub-head h1 { margin: 0; font-size: clamp(24px, 5vw, 34px); line-height: 1.25; }
.hub-head p { margin: 0; color: var(--muted); }
.ownbar { background: var(--gold-soft); border: 1px solid rgba(255, 217, 120, .35); border-radius: 14px; padding: 10px 14px; font-size: 14px; color: var(--gold); display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: 14px; }
.rows { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.row-link { min-width: 0; display: flex; align-items: center; gap: 12px; padding: 16px 18px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); transition: border-color .15s, transform .15s; }
.row-link:hover { border-color: rgba(255, 217, 120, .45); transform: translateY(-1px); text-decoration: none; }
.row-link .t { flex: 1; min-width: 0; }
.row-link b { display: block; font-size: 17px; }
.row-link small { color: var(--muted); display: block; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-link .badge { font-size: 12px; padding: 3px 10px; border-radius: 999px; background: var(--gold-soft); color: var(--gold); white-space: nowrap; }
.row-link .arrow { color: var(--subtle); }

.post h1 { margin: 6px 0 12px; font-size: clamp(24px, 5vw, 34px); line-height: 1.3; }
.prose p { margin: 0 0 14px; font-size: 17px; line-height: 1.75; }
.back { color: var(--muted); font-size: 14px; display: inline-block; margin-bottom: 6px; }
.gifts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin: 18px 0; }
.gift { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; }
.gift .ico { font-size: 24px; }
.gift .t { flex: 1; min-width: 0; }
.gift .t b { display: block; overflow-wrap: anywhere; }
.gift .t small { color: var(--subtle); }
.gift.locked { opacity: .75; }
.gatebox { text-align: left; background: linear-gradient(160deg, rgba(255, 217, 120, .14), rgba(255, 217, 120, .03)); border: 1px solid rgba(255, 217, 120, .4); border-radius: 20px; padding: 22px; display: grid; gap: 12px; margin: 22px 0; }
.gatebox h2 { margin: 0; font-size: 20px; }
.gatebox .hint { margin: 0; color: var(--muted); font-size: 14px; }
.chk { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--text); cursor: pointer; text-align: left; }
.chk input { width: 18px; height: 18px; margin-top: 2px; flex: none; accent-color: #f5b52e; }
.chk.opt { color: var(--muted); }
.chk a { color: var(--gold); }
.err-line { color: var(--danger); font-size: 13px; min-height: 18px; margin: 0; }
.lockbars { display: grid; gap: 10px; margin: 6px 0 0; }
.lockbars i { display: block; height: 14px; border-radius: 7px; background: rgba(255, 236, 190, .09); filter: blur(1.5px); }
.lockbars i:nth-child(2) { width: 92%; } .lockbars i:nth-child(3) { width: 70%; }
.make-own { text-align: center; margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--border); }

/* 내 오크통 */
.drawer-grid { display: grid; gap: 22px; margin-top: 16px; }
.dhub h3 { margin: 0 0 8px; font-size: 16px; color: var(--gold); }
.dhub h3 small { color: var(--subtle); font-weight: 500; margin-left: 6px; }
.search { width: 100%; margin: 6px 0 4px; }

/* 스튜디오 */
.st-cols { display: grid; grid-template-columns: 260px 1fr; gap: 16px; align-items: start; }
.hub-list { display: grid; gap: 8px; }
.hub-pill { text-align: left; font: inherit; cursor: pointer; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px; color: var(--text); display: grid; gap: 2px; }
.hub-pill.on { border-color: rgba(255, 217, 120, .6); background: var(--gold-soft); }
.hub-pill b { font-size: 15px; } .hub-pill small { color: var(--muted); }
.hub-pill .live { color: var(--leaf); font-size: 12px; } .hub-pill .draft { color: var(--subtle); font-size: 12px; }
.tabbar { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.tabbar button { font: inherit; font-weight: 700; cursor: pointer; padding: 8px 14px; border-radius: 999px; background: var(--surface); color: var(--muted); border: 1px solid var(--border); }
.tabbar button.on { color: var(--gold); border-color: rgba(255, 217, 120, .5); background: var(--gold-soft); }
.form { display: grid; gap: 10px; }
.form label { display: grid; gap: 4px; font-size: 13px; color: var(--muted); }
.form .two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.form textarea { min-height: 110px; resize: vertical; }
.btns { display: flex; gap: 8px; flex-wrap: wrap; }
.btn.danger { background: transparent; color: var(--danger); border: 1px solid rgba(248, 113, 113, .5); box-shadow: none; }
.postbox { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; margin-bottom: 12px; display: grid; gap: 10px; }
.postbox.pub { border-color: rgba(127, 191, 90, .45); }
.giftrow { display: grid; grid-template-columns: 1.1fr 1.6fr 100px auto; gap: 6px; align-items: center; }
.gopen { grid-column: 1 / -1; display: flex; gap: 8px; align-items: center; font-size: 13.5px; color: var(--muted, #a9a49a); cursor: pointer; } .gopen input { width: auto; margin: 0; }
.sharebox { background: var(--surface); border: 1px dashed rgba(255, 217, 120, .4); border-radius: 14px; padding: 12px; display: grid; gap: 8px; margin-bottom: 14px; }
.sharebox code { word-break: break-all; font-size: 13px; color: var(--gold); }
.vialine { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.vialine select, .vialine input { width: auto; }
.funnel { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; margin-bottom: 14px; }
.kpi { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 12px; }
.kpi b { display: block; font-size: 26px; color: var(--gold); font-variant-numeric: tabular-nums; }
.kpi span { font-size: 12px; color: var(--muted); }
table.t { width: 100%; border-collapse: collapse; font-size: 14px; }
table.t th, table.t td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--border); }
table.t th { color: var(--subtle); font-weight: 600; font-size: 12px; }
table.t td.n { font-variant-numeric: tabular-nums; text-align: right; } table.t th.n { text-align: right; }
.spark { display: flex; align-items: flex-end; gap: 3px; height: 70px; margin: 8px 0 14px; }
.spark i { flex: 1; background: linear-gradient(180deg, #ffe48f, #b9770a); border-radius: 3px 3px 0 0; min-height: 2px; }
.scroll-x { overflow-x: auto; }

@media (max-width: 860px) {
  .ophero { grid-template-columns: 1fr; padding-top: 20px; }
  .ophero-art { min-height: 340px; order: -1; }
  .opflow { grid-template-columns: 1fr; }
  .op-step:nth-child(n) { grid-column: auto; display: block; min-height: 0; }
  .st-cols { grid-template-columns: 1fr; }
  .hub-list { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
  .giftrow { grid-template-columns: 1fr; }
  .form .two { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .ophero-art .mascot { animation: none; } }

/* 허브 첫 화면: 멀티링크 같은 카드 + 글 카드 */
.hubcard { display: grid; grid-template-columns: auto 1fr; gap: 14px 16px; align-items: center; padding: 22px; margin: 6px 0 18px; border-radius: 22px; border: 1px solid rgba(255, 217, 120, .25); background: radial-gradient(380px 200px at 100% 0%, rgba(255, 196, 80, .16), transparent 70%), linear-gradient(180deg, rgba(255, 236, 190, .07), rgba(255, 236, 190, .02)); box-shadow: inset 0 1px 0 rgba(255, 236, 190, .08); }
.hubcard .avatar { width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; font-size: 28px; font-weight: 800; color: #2a1a00; background: linear-gradient(180deg, #ffe48f, #f5b52e); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 8px 20px rgba(245, 158, 11, .25); }
.hubcard .by { color: var(--gold); font-size: 13px; font-weight: 700; }
.hubcard h1 { margin: 2px 0 0; font-size: clamp(24px, 5vw, 34px); line-height: 1.2; letter-spacing: -.03em; }
.hubcard p { grid-column: 1 / -1; margin: 0; color: var(--muted); }
.postgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.postcard { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 18px; border-radius: 20px; border: 1px solid var(--border); background: linear-gradient(180deg, rgba(255, 236, 190, .06), rgba(255, 236, 190, .02)); color: var(--text); transition: border-color .15s, transform .15s; }
.postcard:hover { border-color: rgba(255, 217, 120, .5); transform: translateY(-2px); text-decoration: none; }
.postcard b { font-size: 17px; line-height: 1.35; }
.postcard small { color: var(--muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.postcard .pfoot { margin-top: auto; padding-top: 8px; display: flex; justify-content: space-between; align-items: center; }
.postcard .badge { font-size: 12px; padding: 3px 10px; border-radius: 999px; background: var(--gold-soft); color: var(--gold); }
.postcard .arrow { color: var(--subtle); }
.postcard.first { grid-column: 1 / -1; background: radial-gradient(420px 200px at 90% 0%, rgba(255, 196, 80, .16), transparent 70%), linear-gradient(180deg, rgba(255, 236, 190, .07), rgba(255, 236, 190, .02)); }
.postcard.first b { font-size: 22px; }
/* 글: 보이다가 흐려지면서 로그인 */
.fadezone { position: relative; margin-top: -6px; max-height: 230px; overflow: hidden; }
.fadezone .fz-text { filter: blur(5px); opacity: .7; user-select: none; pointer-events: none; }
.fadezone .fz-text p { margin: 0 0 14px; font-size: 17px; line-height: 1.75; }
.fadezone::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(10, 10, 7, 0) 0%, rgba(10, 10, 7, .75) 55%, var(--bg) 92%); }
.fadezone .fz-cta { position: absolute; left: 0; right: 0; bottom: 18px; z-index: 2; display: flex; justify-content: center; }
@media (max-width: 640px) { .postgrid { grid-template-columns: minmax(0, 1fr); } .hubcard { padding: 18px; } }

/* 글 화면: 왼쪽 글 순서 + 큰 가입 상자 */
.postlayout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.toc { display: none; }
@media (min-width: 980px) {
  .op-wrap.post-wide { width: min(1040px, 100% - 32px); }
  .postlayout { grid-template-columns: 250px minmax(0, 700px); gap: 36px; justify-content: center; }
  .postlayout.notoc { grid-template-columns: minmax(0, 700px); }
  .toc { display: grid; align-content: start; gap: 4px; position: sticky; top: 86px; align-self: start; }
  .toc b { font-size: 14px; margin-bottom: 8px; }
  .toc a { display: grid; grid-template-columns: 22px 1fr auto; gap: 8px; align-items: baseline; padding: 10px 12px; border-radius: 12px; color: var(--muted); font-size: 14px; line-height: 1.4; }
  .toc a i { font-style: normal; font-weight: 800; color: var(--subtle); }
  .toc a em { font-style: normal; font-size: 12px; color: var(--gold); }
  .toc a:hover { background: var(--surface); text-decoration: none; }
  .toc a.on { background: var(--gold-soft); color: var(--gold); box-shadow: inset 2px 0 0 var(--gold); }
}
.gatebox { padding: 30px 28px; gap: 14px; border-radius: 24px; }
.gatebox h2 { font-size: clamp(24px, 4.4vw, 34px); letter-spacing: -.035em; line-height: 1.15; }
.gatebox .hint { font-size: 16px; }
.gatebox .btn.wide { padding: 15px 22px; font-size: 17px; }
.gatebox .chk { font-size: 13px; }
/* 누구나 받는 선물이 있는 글: 가입은 덤이라 작고 차분하게 */
.gatebox.part { padding: 18px 20px; gap: 8px; border-radius: 18px; background: rgba(255, 255, 255, .03); border-color: rgba(255, 255, 255, .12); }
.gatebox.part h2 { font-size: 17px; letter-spacing: -.01em; }
.gatebox.part .hint { font-size: 14px; }
.gatebox.part .btn.wide { padding: 11px 18px; font-size: 15px; }

/* 허브 첫 화면: 미니홈·멀티링크처럼 한 줄씩 쌓는다 */
.postgrid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
.postcard { flex-direction: row; align-items: center; gap: 14px; padding: 16px 18px; }
.postcard b { flex: 1; min-width: 0; font-size: 17px; }
.postcard small { display: none; }
.postcard .pfoot { margin: 0; padding: 0; gap: 10px; }
.postcard.first { grid-column: auto; }
.postcard.first b { font-size: 17px; }

/* 글 대표 이미지 · 맛보기 이미지 */
.thumbs { display: flex; gap: 6px; flex-wrap: wrap; } .thumbs img { width: 56px; height: 56px; object-fit: contain; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); }
.postcard .thumb { width: 64px; height: 64px; flex: none; object-fit: contain; padding: 3px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); }
.postcard.has-thumb { padding: 12px 16px 12px 12px; }
.cover-img { width: 100%; aspect-ratio: 16 / 9; object-fit: contain; padding: 6px; border-radius: 20px; border: 1px solid var(--border); margin: 6px 0 14px; background: var(--surface); display: block; }
.previews { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 4px 0 18px; }
.previews button { padding: 0; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: var(--surface); cursor: zoom-in; aspect-ratio: 1; }
.previews img { width: 100%; height: 100%; object-fit: contain; padding: 6px; display: block; transition: transform .2s; } .previews button:hover img { transform: scale(1.04); }
.lightbox { position: fixed; inset: 0; z-index: 90; background: rgba(0, 0, 0, .86); display: grid; place-items: center; padding: 16px; cursor: zoom-out; }
.lightbox img { max-width: min(96vw, 900px); max-height: 90vh; object-fit: contain; border-radius: 12px; }
@media (max-width: 640px) { .previews { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ───────── 자료실·글 디자인 v3 (카드, 큰 글자, 이미지 중심) ───────── */
.op-wrap { width: min(1080px, 100% - 32px); }
.lib-hero { padding: 38px 0 22px; display: grid; gap: 14px; }
.lib-by { display: inline-flex; align-items: center; gap: 10px; color: var(--muted); font-weight: 700; font-size: 14px; }
.lib-by .avatar { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; font-weight: 800; font-size: 16px; color: #2a1a00; background: linear-gradient(180deg, #ffe48f, #f5b52e); }
.lib-hero h1 { margin: 0; font-size: clamp(40px, 7.4vw, 76px); line-height: 1.04; letter-spacing: -.045em; font-weight: 800; word-break: keep-all; }
.lib-intro { margin: 0; max-width: 46ch; font-size: clamp(17px, 2.2vw, 20px); line-height: 1.6; color: var(--muted); }
.lib-stats { display: flex; gap: 22px; flex-wrap: wrap; color: var(--muted); font-size: 15px; }
.lib-stats b { color: var(--gold); font-size: 22px; font-weight: 800; margin-right: 2px; font-variant-numeric: tabular-nums; }
.lib-tools { margin: 6px 0 16px; }
.lib-tools input { width: 100%; max-width: 420px; padding: 13px 18px; border-radius: 999px; font-size: 15px; background: rgba(255, 236, 190, .05); border: 1px solid var(--border); }
.lib-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-bottom: 8px; }
.lcard { display: flex; flex-direction: column; min-width: 0; border-radius: 24px; overflow: hidden; color: var(--text); border: 1px solid var(--border); background: linear-gradient(180deg, rgba(255, 236, 190, .07), rgba(255, 236, 190, .02)); box-shadow: inset 0 1px 0 rgba(255, 236, 190, .08); transition: transform .22s cubic-bezier(.16, 1, .3, 1), border-color .2s, box-shadow .2s; }
.lcard:hover { transform: translateY(-4px); border-color: rgba(255, 217, 120, .5); box-shadow: 0 22px 50px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 236, 190, .1); text-decoration: none; }
.lcard[hidden] { display: none; }
.lc-media { aspect-ratio: 16 / 10; background: radial-gradient(120% 120% at 50% 0%, rgba(255, 196, 80, .22), rgba(20, 17, 8, .9) 70%); display: grid; place-items: center; overflow: hidden; }
.lc-media { position: relative; }
.lc-media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 14px; transition: transform .35s cubic-bezier(.16, 1, .3, 1); }
.lcard:hover .lc-media > img { transform: scale(1.04); }
.lc-ph { position: absolute; inset: 0; display: grid; place-items: center; } .lc-ph img { position: static; width: auto; height: 74%; padding: 0; opacity: .55; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .5)); }
.lc-body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.lc-body b { font-size: clamp(19px, 2.4vw, 23px); line-height: 1.3; letter-spacing: -.02em; word-break: keep-all; }
.lc-body p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lc-foot { margin-top: auto; padding-top: 10px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.gift-pill { display: inline-flex; align-items: center; padding: 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--gold); background: var(--gold-soft); border: 1px solid rgba(255, 217, 120, .25); }
.lcard .go { font-size: 14px; font-weight: 700; color: var(--gold); transition: transform .2s; } .lcard:hover .go { transform: translateX(3px); }
.lcard.feat { grid-column: 1 / -1; display: grid; grid-template-columns: 1.1fr 1fr; }
.lcard.feat .lc-media { aspect-ratio: auto; min-height: 320px; } .lcard.feat .lc-body { padding: 30px; justify-content: center; } .lcard.feat .lc-body b { font-size: clamp(24px, 3.4vw, 34px); } .lcard.feat .lc-body p { -webkit-line-clamp: 4; font-size: 16px; }
.lib-none { text-align: center; margin: 30px 0; }
@media (max-width: 760px) { .lib-grid { grid-template-columns: minmax(0, 1fr); } .lcard.feat { grid-template-columns: minmax(0, 1fr); } .lcard.feat .lc-media { min-height: 0; aspect-ratio: 16 / 10; } .lcard.feat .lc-body { padding: 20px 22px 22px; } .lib-hero { padding-top: 24px; } }

/* 글 화면 */
.p-head { display: grid; gap: 10px; margin: 4px 0 16px; }
.p-by { color: var(--gold); font-weight: 700; font-size: 14px; }
.post h1 { margin: 0; font-size: clamp(30px, 5.2vw, 48px); line-height: 1.14; letter-spacing: -.04em; font-weight: 800; word-break: keep-all; }
.p-meta { display: flex; gap: 8px; flex-wrap: wrap; }
.prose.lead p { font-size: clamp(17px, 2.1vw, 19px); line-height: 1.85; margin: 0 0 18px; }
.cover-img { aspect-ratio: 16 / 10; border-radius: 24px; padding: 14px; margin: 0 0 20px; background: radial-gradient(120% 120% at 50% 0%, rgba(255, 196, 80, .2), rgba(20, 17, 8, .9) 70%); }
.previews { gap: 12px; margin: 10px 0 24px; } .previews button { border-radius: 18px; }
.gifts-box { margin: 30px 0 8px; padding: 22px; border-radius: 24px; border: 1px solid rgba(255, 217, 120, .28); background: linear-gradient(160deg, rgba(255, 217, 120, .1), rgba(255, 217, 120, .02)); }
.gifts-box h2 { margin: 0 0 14px; font-size: 20px; letter-spacing: -.02em; }
.gifts-box .gifts { margin: 0; gap: 10px; }
.gifts-box .gift { padding: 14px 16px; border-radius: 16px; gap: 14px; background: rgba(10, 10, 7, .55); }
.kind-badge { flex: none; min-width: 58px; text-align: center; padding: 7px 10px; border-radius: 11px; font-size: 12.5px; font-weight: 800; letter-spacing: .02em; color: #2a1a00; background: linear-gradient(180deg, #ffe48f, #f5b52e); }
.kind-badge.k-image { background: linear-gradient(180deg, #ffd4e1, #f59ab5); } .kind-badge.k-app { background: linear-gradient(180deg, #c9e8ff, #6fb4ee); } .kind-badge.k-pdf { background: linear-gradient(180deg, #ffd1c2, #f08a6a); }
.gift.locked { opacity: 1; } .gift .t b { font-size: 16px; } .gift .t small { color: var(--gold); }
.tag-locked { flex: none; font-size: 12.5px; font-weight: 700; color: var(--subtle); padding: 6px 12px; border-radius: 999px; border: 1px dashed rgba(255, 236, 190, .3); white-space: nowrap; }
.gatebox { margin: 18px 0; }
.sticky-cta { display: none; }
@media (max-width: 760px) {
  .sticky-cta { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: linear-gradient(180deg, rgba(10, 10, 7, 0), rgba(10, 10, 7, .92) 40%); }
  .post-wide { padding-bottom: 90px; }
  .gifts-box { padding: 16px; } .gifts-box .gift { flex-wrap: wrap; } .tag-locked { margin-left: auto; }
}

/* 스튜디오: 폰에서 칸이 화면 밖으로 밀리지 않게 */
.postbox, .postbox label, .postbox .form, .panel.form { min-width: 0; }
.postbox input, .postbox textarea, .postbox select, .giftrow input, .giftrow select { max-width: 100%; min-width: 0; }
.postbox .thumbs img { width: 48px; height: 48px; }
@media (max-width: 760px) { .giftrow { grid-template-columns: minmax(0, 1fr); } .btns { gap: 6px; } }

/* ───────── 내 자료실(관리) 화면: 설명이 있는 구성 ───────── */
.st-cols { gap: 22px; }
.ov { display: grid; gap: 14px; padding: 18px 20px; margin-bottom: 14px; border-radius: 22px; border: 1px solid rgba(255, 217, 120, .28); background: radial-gradient(420px 200px at 100% 0%, rgba(255, 196, 80, .14), transparent 70%), linear-gradient(180deg, rgba(255, 236, 190, .07), rgba(255, 236, 190, .02)); }
.ov-top { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.ov-label { display: block; font-size: 12.5px; color: var(--subtle); font-weight: 700; margin-bottom: 4px; }
.ov-addr code { font-size: clamp(18px, 3vw, 24px); font-weight: 800; color: var(--gold); word-break: break-all; margin-right: 10px; }
.ov-addr .live { color: var(--leaf); font-size: 13px; font-weight: 700; } .ov-addr .draft { color: var(--subtle); font-size: 13px; font-weight: 700; }
.ov-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.ov-stats { display: flex; gap: 22px; align-items: baseline; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--border); }
.ov-stats .ov-label { margin: 0; }
.ov-k { color: var(--muted); font-size: 14px; } .ov-k b { color: var(--text); font-size: 24px; font-weight: 800; margin-right: 6px; font-variant-numeric: tabular-nums; }
.guide { margin-bottom: 14px; padding: 16px 18px; border-radius: 20px; border: 1px dashed rgba(255, 217, 120, .4); background: rgba(255, 217, 120, .05); }
.guide-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; } .guide-h b { font-size: 16px; }
.guide ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.guide li { display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: start; font-size: 15px; line-height: 1.55; color: var(--muted); }
.guide li i { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 800; font-size: 14px; color: #2a1a00; background: linear-gradient(180deg, #ffe48f, #f5b52e); }
.sharebox { border-style: solid; border-color: var(--border); background: var(--surface); }
.chans { display: flex; gap: 8px; flex-wrap: wrap; }
.chan { font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; padding: 9px 16px; border-radius: 999px; color: var(--muted); background: rgba(255, 236, 190, .05); border: 1px solid var(--border); transition: transform .12s, border-color .15s; }
.chan:hover { transform: translateY(-1px); border-color: rgba(255, 217, 120, .5); } .chan.on { color: #2a1a00; background: linear-gradient(180deg, #ffe48f, #f5b52e); border-color: transparent; }
.tabbar button { padding: 10px 18px; font-size: 15px; }
/* 글: 접히는 줄 */
details.postbox { display: block; padding: 0; overflow: hidden; }
details.postbox > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 16px 18px; }
details.postbox > summary::-webkit-details-marker { display: none; }
.ps-t { font-size: 17px; font-weight: 800; letter-spacing: -.02em; min-width: 0; overflow-wrap: anywhere; }
.ps-m { display: inline-flex; gap: 12px; align-items: center; font-size: 13px; color: var(--muted); flex-wrap: wrap; }
.ps-m .live { color: var(--leaf); font-weight: 700; } .ps-m .draft { color: var(--subtle); font-weight: 700; }
.ps-open { color: var(--gold); font-weight: 700; } details.postbox[open] .ps-open { display: none; }
.pb-body { display: grid; gap: 12px; padding: 4px 18px 18px; border-top: 1px solid var(--border); }
.pb-body h4 { margin: 14px 0 0; font-size: 15px; letter-spacing: -.01em; color: var(--gold); }
details.sub { border: 1px solid var(--border); border-radius: 14px; padding: 0 14px; background: rgba(255, 236, 190, .03); }
details.sub > summary { cursor: pointer; padding: 12px 0; font-size: 14px; font-weight: 700; color: var(--muted); list-style: none; }
details.sub > summary::-webkit-details-marker { display: none; } details.sub > summary::before { content: '+ '; color: var(--gold); } details.sub[open] > summary::before { content: '− '; }
details.sub[open] { display: grid; gap: 10px; padding-bottom: 14px; }
.pubrow { display: flex; gap: 8px; align-items: center; font-size: 14px; padding-top: 6px; }
@media (max-width: 860px) { .ov { padding: 16px; } .ov-addr code { display: block; margin: 0 0 4px; } }

/* ── 공개 자료실: 글 카드 (텍스트 중심) ── */
.lib-tools { display: grid; gap: 12px; margin: 8px 0 18px; }
.tagbar { display: flex; flex-wrap: wrap; gap: 8px; }
.tagbar button { font: inherit; font-size: 13px; font-weight: 600; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--border); background: transparent; color: var(--muted); cursor: pointer; }
.tagbar button.on { background: var(--gold); border-color: var(--gold); color: #1a1208; }
.gcards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.gcard { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 24px 24px 64px; min-height: 230px; border-radius: 20px; border: 1px solid var(--border); background: var(--surface); color: inherit; text-decoration: none; overflow: hidden; transition: transform .15s, border-color .15s; }
.gcard:nth-child(4n+2), .gcard:nth-child(4n+3) { background: rgba(212, 169, 84, .07); }
.gcard:hover { transform: translateY(-2px); border-color: var(--gold); }
.gcard[hidden] { display: none; }
.g-cover { max-width: none; width: calc(100% + 48px); margin: -24px -24px 6px; height: 150px; object-fit: contain; padding: 12px; background: rgba(255,255,255,.04); box-sizing: border-box; }
.g-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.pill { font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.07); color: var(--muted); }
.pill.kind { background: rgba(212, 169, 84, .18); color: var(--gold); }
.g-title { font-size: 21px; line-height: 1.3; letter-spacing: -.01em; }
.g-desc { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.g-meta { position: absolute; left: 24px; bottom: 24px; font-size: 13px; color: var(--muted); }
.g-go { position: absolute; right: 20px; bottom: 18px; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--gold); color: #1a1208; }
@media (max-width: 720px) { .gcards { grid-template-columns: 1fr; } .gcard { min-height: 0; } }

/* ── 내 자료실: 글 카드 갤러리 ── */
.pgal { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; margin-bottom: 18px; }
.pcard { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); overflow: hidden; min-width: 0; }
.pcard.on { border-color: var(--gold); }
.pc-thumb { position: relative; height: 130px; background: rgba(255,255,255,.04); display: grid; place-items: center; overflow: hidden; }
.pc-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 14px; }
.pc-paper { width: 70px; height: 86px; border-radius: 8px; background: rgba(212,169,84,.18); box-shadow: 8px 6px 0 rgba(212,169,84,.09); }
.pc-views { position: absolute; left: 10px; top: 10px; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: rgba(0,0,0,.65); color: #fff; }
.pc-state { position: absolute; right: 10px; top: 10px; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: rgba(0,0,0,.65); }
.pc-state.live { color: #8fd16a; } .pc-state.draft { color: #bbb; }
.pc-body { display: grid; gap: 10px; padding: 14px 16px 16px; }
.pc-title { font-size: 16px; line-height: 1.35; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.pc-rate { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; color: var(--muted); } .pc-rate b { font-size: 22px; color: var(--gold); }
.pc-stats { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--muted); padding: 8px 10px; border-radius: 10px; background: rgba(255,255,255,.05); } .pc-stats b { color: var(--text, #fff); }
.pnew { cursor: pointer; align-items: center; justify-content: center; gap: 8px; min-height: 200px; border-style: dashed; color: var(--muted); font: inherit; }
.pn-plus { font-size: 34px; color: var(--gold); line-height: 1; }
#editor details.postbox > summary { display: none; }

.pc-link { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border-radius: 10px; border: 1px dashed var(--border); background: transparent; color: var(--muted); font: inherit; font-size: 12px; cursor: pointer; text-align: left; min-width: 0; }
.pc-link span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-link i { font-style: normal; font-weight: 700; color: var(--gold); flex: none; }
.pc-link:hover { border-color: var(--gold); color: var(--text, #fff); }
.pc-link.nos span { opacity: .7; }

.vialine { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.vl-k, .pl-k { flex: none; font-size: 11px; font-weight: 800; padding: 3px 8px; border-radius: 999px; background: rgba(212,169,84,.18); color: var(--gold); }
.pl-k { font-weight: 800; }
.pgal-h { margin: 4px 0 12px; font-size: 15px; color: var(--muted); font-weight: 700; }
.pc-link { flex-wrap: wrap; }
.pc-link .pl-k { order: 0; }
.pc-link .pl-c { order: 1; margin-left: auto; text-align: right; }
.pc-link .pl-t { order: 2; flex: 1 1 100%; }

.pick-ov { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 16px; background: rgba(0,0,0,.6); }
.pick { width: min(420px, 100%); display: grid; gap: 12px; padding: 20px; border-radius: 18px; background: #17140d; border: 1px solid rgba(255,217,120,.35); box-shadow: 0 20px 60px rgba(0,0,0,.6); }
.pick .btn { justify-self: start; }
.pick b { font-size: 17px; } .pick .note { margin: 0; }

/* ── 프로필 입력 / 보기 ── */
.pfrow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) minmax(0, 1.4fr); gap: 8px; }
.pfrow select { max-width: 100%; } #pfS .pfrow { grid-template-columns: 140px minmax(0, 1fr); }
@media (max-width: 640px) { .pfrow, #pfS .pfrow { grid-template-columns: 1fr; } }
.prof { display: grid; gap: 22px; padding: 28px 0 8px; border-bottom: 1px solid var(--border); margin-bottom: 8px; }
.prof h2 { margin: 0; font-size: clamp(22px, 4vw, 30px); letter-spacing: -.02em; }
.prof .pbio { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.7; max-width: 62ch; }
.prof .ptags { display: flex; flex-wrap: wrap; gap: 8px; }
.prof .plist { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.prof .plink { display: grid; gap: 4px; padding: 16px 18px; border: 1px solid var(--border); border-radius: 16px; text-decoration: none; color: inherit; background: var(--surface); transition: border-color .15s, transform .15s; }
.prof .plink:hover { border-color: var(--gold); transform: translateY(-2px); }
.prof .plink b { font-size: 16px; } .prof .plink small { color: var(--gold); font-size: 13px; word-break: break-all; } .prof .plink span { color: var(--muted); font-size: 14px; }
.prof .psoc { display: flex; flex-wrap: wrap; gap: 8px; } .prof .psoc a { font-size: 13px; font-weight: 700; padding: 7px 14px; border: 1px solid var(--border); border-radius: 999px; color: inherit; text-decoration: none; } .prof .psoc a:hover { border-color: var(--gold); color: var(--gold); }

/* ════════ v4 차분한 테마 (10-27) ════════
   금빛 그라데이션·반짝임·알약 모양을 걷어내고: 중성 어두운 바탕 + 얇은 테두리 + 단색 포인트 하나, 모서리 10~14px 로 통일, 버튼·입력 높이 통일 */
:root {
  --bg: #0b0b0d; --bg2: #101013;
  --surface: rgba(255, 255, 255, .035); --surface-hover: rgba(255, 255, 255, .06);
  --border: rgba(255, 255, 255, .09);
  --text: #f3f3ef; --muted: rgba(243, 243, 239, .62); --subtle: rgba(243, 243, 239, .4);
  --gold: #e9c46a; --gold-strong: #d4a93c; --gold-soft: rgba(233, 196, 106, .1);
  --radius: 14px;
}
body { background-image: none; }
.top { background: rgba(11, 11, 13, .86); border-bottom: 1px solid var(--border); }
.brand { letter-spacing: .12em; }
.nav a { border-radius: 8px; padding: 8px 12px; }
.nav a.on, .nav a:hover { background: var(--surface-hover); color: var(--text); }
.nav a.on { color: var(--gold); }

/* 버튼: 단색, 높이 통일, 그림자 없음 */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 42px; padding: 0 18px; border-radius: 10px; background: var(--gold); color: #17130a; box-shadow: none; font-weight: 700; font-size: 15px; letter-spacing: -.005em; transition: background .15s, border-color .15s, transform .1s; }
.btn:hover { background: #f0cf82; filter: none; transform: none; text-decoration: none; }
.btn:active { transform: scale(.985); }
.btn.small { height: 34px; padding: 0 12px; font-size: 13.5px; border-radius: 8px; }
.btn.ghost { background: transparent; color: var(--text); border: 1px solid var(--border); box-shadow: none; }
.btn.ghost:hover { background: var(--surface-hover); border-color: rgba(255, 255, 255, .18); }
.btn.danger { background: transparent; color: var(--danger); border: 1px solid rgba(248, 113, 113, .35); }
.btn.on { background: var(--gold-soft); border: 1px solid rgba(233, 196, 106, .35); color: var(--gold); }

/* 입력: 높이 통일, 얇은 테두리 */
select, input, textarea { background: rgba(255, 255, 255, .04); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; font-size: 15px; }
input:not([type=checkbox]):not([type=radio]), select { height: 42px; }
textarea { min-height: 96px; line-height: 1.55; }
select { border-radius: 10px; padding: 0 12px; font-size: 15px; }
input:focus, textarea:focus, select:focus { outline: 0; border-color: rgba(233, 196, 106, .6); box-shadow: 0 0 0 3px rgba(233, 196, 106, .12); }

/* 상자: 평평하게, 한 가지 테두리 */
.panel, .ov, .guide, .sharebox, .pcard, .gcard, .plink, .item, .lcard, .pick, details.postbox { background: var(--surface); border: 1px solid var(--border); box-shadow: none; border-radius: var(--radius); }
.ov { background: var(--surface); padding: 20px 22px; }
.guide, .sharebox { border-style: solid; background: var(--surface); }
.gcard:nth-child(4n+2), .gcard:nth-child(4n+3) { background: var(--surface); }
.gcard:hover, .plink:hover, .pcard:hover { border-color: rgba(233, 196, 106, .5); transform: none; }
.pcard.on { border-color: var(--gold); }
.pnew { border-style: dashed; }

/* 탭: 알약 대신 밑줄 */
.tabbar { gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 18px; }
.tabbar button { background: transparent; border: 0; border-bottom: 2px solid transparent; border-radius: 0; padding: 10px 14px; font-size: 15px; font-weight: 650; color: var(--muted); margin-bottom: -1px; }
.tabbar button:hover { color: var(--text); }
.tabbar button.on { color: var(--text); background: transparent; border-bottom-color: var(--gold); }

/* 칩·알약: 작고 차분하게 */
.pill { border-radius: 6px; padding: 3px 8px; font-weight: 600; background: rgba(255, 255, 255, .06); }
.pill.kind { background: var(--gold-soft); color: var(--gold); }
.tagbar button, .chan { border-radius: 8px; border: 1px solid var(--border); background: transparent; color: var(--muted); padding: 7px 12px; font-weight: 600; }
.tagbar button.on, .chan:hover { background: var(--gold-soft); border-color: rgba(233, 196, 106, .4); color: var(--gold); }
.vl-k, .pl-k { border-radius: 6px; }
.g-go { border-radius: 8px; width: 34px; height: 34px; background: var(--gold); }
.pc-views, .pc-state { border-radius: 6px; }
.pc-stats { border-radius: 8px; background: rgba(255, 255, 255, .04); }

/* 너비·간격: 콘텐츠 폭 통일 */
.wrap { width: min(1040px, 100% - 40px); }
.op-wide { width: min(1040px, 100% - 40px); }
.page-title { font-size: clamp(26px, 4vw, 34px); letter-spacing: -.02em; margin: 24px 0 6px; }
.note { color: var(--muted); }
.hub-pill { border-radius: 12px; }

/* 첫 화면 */
.ophero h1 { letter-spacing: -.03em; }
.op-step { border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); box-shadow: none; }
@media (max-width: 640px) { .wrap, .op-wide { width: calc(100% - 28px); } .btn { height: 44px; } }

/* ── 글: 왼쪽 블록 목록 + 오른쪽 열린 글 ── */
.pm { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 22px; align-items: start; }
.pm-list { display: grid; gap: 8px; position: sticky; top: 76px; }
.prow { display: grid; gap: 6px; text-align: left; padding: 13px 15px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: inherit; font: inherit; cursor: pointer; min-width: 0; transition: border-color .15s, background .15s; }
.prow:hover { border-color: rgba(255, 255, 255, .2); }
.prow.on { border-color: var(--gold); background: var(--gold-soft); }
.prow b { font-size: 15px; line-height: 1.35; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.prow small { color: var(--muted); font-size: 12.5px; }
.prow .live { color: #8fd16a; } .prow .draft { color: var(--subtle); }
.prow.pnew { border-style: dashed; color: var(--muted); text-align: center; }
.pm-detail { min-width: 0; }
.pm-detail details.postbox { margin: 0; }
@media (max-width: 820px) { .pm { grid-template-columns: 1fr; } .pm-list { position: static; } }
.prow.pnew { min-height: 0; justify-content: center; padding: 12px; }
.pm-list { align-content: start; }

/* 글 블록 목록은 왼쪽 옆 칸(새 페이지 아래)에. 좁은 화면에서는 본문 안에 보인다 */
.side-posts { margin-top: 18px; display: grid; gap: 8px; }
.side-h { font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--subtle); padding: 0 2px; }
.side-posts .prow { padding: 11px 13px; } .side-posts .prow b { font-size: 14px; }
@media (min-width: 821px) { .pm { grid-template-columns: minmax(0, 1fr); } .pm-inline { display: none; } }
@media (max-width: 820px) { .side-posts { display: none !important; } }

/* ── 완성된 글 보기 (입력 칸 없음) ── */
.pview { display: grid; gap: 16px; padding: 22px 24px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); min-width: 0; }
.pv-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.pv-top h2 { margin: 6px 0 0; font-size: clamp(20px, 3vw, 26px); letter-spacing: -.02em; line-height: 1.3; }
.pv-top .live { color: #8fd16a; font-size: 13px; font-weight: 700; } .pv-top .draft { color: var(--subtle); font-size: 13px; font-weight: 700; }
.pv-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.pv-stats span { display: grid; gap: 2px; padding: 10px 12px; border-radius: 10px; background: rgba(255, 255, 255, .04); font-size: 12px; color: var(--muted); } .pv-stats b { font-size: 20px; color: var(--text); font-variant-numeric: tabular-nums; }
.pv-imgs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; } .pv-imgs img { height: 96px; width: auto; border-radius: 10px; border: 1px solid var(--border); background: rgba(255, 255, 255, .04); }
.pview .prose { font-size: 16px; line-height: 1.8; } .pview .prose p { margin: 0 0 12px; }
.pv-lock { border: 1px dashed rgba(233, 196, 106, .35); border-radius: 12px; padding: 14px 16px; background: var(--gold-soft); }
.pv-lk { font-size: 12px; font-weight: 800; letter-spacing: .04em; color: var(--gold); margin-bottom: 8px; }
.pv-gifts { display: grid; gap: 8px; } .pv-gift { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; }
@media (max-width: 520px) { .pv-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ── 프로필이 있는 첫 화면 = 내 홈페이지 ── */
.home-hero { padding: 40px 0 8px; }
.home-hero .lib-by { margin-bottom: 18px; }
.home-hero .prof-in { display: grid; gap: 22px; }
.home-hero .prof-in h2 { font-size: clamp(30px, 6vw, 52px); line-height: 1.12; letter-spacing: -.035em; margin: 0; max-width: 18ch; }
.home-hero .pbio { font-size: clamp(16px, 2.2vw, 19px); line-height: 1.7; max-width: 60ch; }
.sec-h { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 36px 0 14px; font-size: 20px; letter-spacing: -.01em; padding-top: 26px; border-top: 1px solid var(--border); }
.sec-h small { font-size: 13px; font-weight: 600; color: var(--muted); }
/* 홍보 띠: 이 페이지를 본 사람이 바로 자기 페이지를 만들러 갈 수 있게 */
.promo { position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 40; display: flex; align-items: center; gap: 14px; padding: 10px 14px 10px 18px; border-radius: 12px; background: rgba(20, 20, 24, .92); backdrop-filter: blur(12px); border: 1px solid var(--border); color: var(--muted); font-size: 13.5px; text-decoration: none; box-shadow: 0 10px 30px rgba(0, 0, 0, .5); max-width: calc(100% - 24px); }
.promo b { color: #17130a; background: var(--gold); padding: 7px 12px; border-radius: 8px; white-space: nowrap; font-size: 13px; }
.promo:hover { text-decoration: none; border-color: rgba(233, 196, 106, .5); }
@media (max-width: 560px) { .promo span { display: none; } .promo { padding: 8px; } }

.home-hero .prof { padding: 0; border: 0; margin: 0; }

.pv-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.prof-view { border: 1px solid var(--border); border-radius: 14px; padding: 26px 28px; background: var(--surface); }
.prof-view .prof-in h2 { font-size: clamp(24px, 4vw, 38px); }
.pick-url { display: block; padding: 10px 12px; border-radius: 8px; background: rgba(255, 255, 255, .05); color: var(--gold); word-break: break-all; font-size: 13.5px; }

/* ════════ 프로필 홈 B 안 (10-27): 왼쪽 글 + 오른쪽 큰 사진, 아래 프로젝트 카드 ════════ */
.home-hero { padding: 44px 0 10px; }
.hh-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 52px; align-items: center; }
.hh-text { display: grid; gap: 22px; justify-items: start; min-width: 0; }
.hh-h { margin: 0; font-size: clamp(34px, 5.4vw, 62px); line-height: 1.07; letter-spacing: -.04em; font-weight: 800; max-width: 16ch; text-wrap: balance; }
.home-hero .pbio { margin: 0; font-size: clamp(16px, 1.6vw, 19px); line-height: 1.75; color: var(--muted); max-width: 52ch; }
.home-hero .ptags { display: flex; flex-wrap: wrap; gap: 8px; }
.home-hero .psoc { display: flex; flex-wrap: wrap; gap: 10px; }
.home-hero .psoc a { height: 40px; display: inline-flex; align-items: center; padding: 0 16px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-weight: 650; font-size: 14.5px; text-decoration: none; }
.home-hero .psoc a:hover { border-color: rgba(233, 196, 106, .55); color: var(--gold); }
.hh-visual { aspect-ratio: 1 / 1; border-radius: 28px; overflow: hidden; border: 1px solid var(--border); background: linear-gradient(150deg, rgba(233, 196, 106, .18), rgba(255, 255, 255, .03) 60%); display: grid; place-items: center; min-width: 0; }
.hh-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hh-grid.nophoto { grid-template-columns: minmax(0, 1fr); }
.hh-grid.nophoto .hh-h { max-width: 22ch; }
.hh-ini span { font-size: clamp(90px, 14vw, 170px); font-weight: 800; color: var(--gold); opacity: .9; letter-spacing: -.05em; }
.proj { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 44px; }
.proj + .proj { margin-top: 14px; }
.pcx { display: grid; grid-template-rows: auto 1fr; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); overflow: hidden; color: inherit; text-decoration: none; transition: border-color .15s, background .15s; min-width: 0; }
.pcx:hover { border-color: rgba(233, 196, 106, .5); background: var(--surface-hover); text-decoration: none; }
.pcx-im { aspect-ratio: 16 / 9; background: rgba(255, 255, 255, .04); display: grid; place-items: center; overflow: hidden; }
.pcx-im img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pcx-im.no span { font-size: 38px; font-weight: 800; color: var(--gold); opacity: .8; }
.pcx-tx { display: grid; gap: 4px; padding: 14px 16px 16px; align-content: start; min-width: 0; }
.pcx-tx b { font-size: 16px; letter-spacing: -.01em; }
.pcx-tx span { color: var(--muted); font-size: 14px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pcx-tx small { color: var(--gold); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plmore { margin-top: 14px; }
@media (max-width: 760px) {
  .home-hero { padding-top: 24px; }
  .hh-grid { grid-template-columns: 1fr; gap: 22px; }
  .hh-visual { order: -1; width: min(210px, 58vw); border-radius: 50%; justify-self: center; }
  .hh-text { justify-items: center; text-align: center; gap: 16px; }
  .hh-h { max-width: none; font-size: clamp(30px, 9vw, 40px); }
  .home-hero .ptags, .home-hero .psoc { justify-content: center; }
  .proj { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 30px; }
  .pcx-im { aspect-ratio: 4 / 3; } .pcx-tx { padding: 10px 12px 13px; } .pcx-tx b { font-size: 14.5px; } .pcx-tx span { font-size: 12.5px; -webkit-line-clamp: 2; }
}
/* 방문자에게는 메뉴 줄을 숨기고 로고와 로그인만 둔다 */
body.pubhub .nav { display: none; }
/* 프로필 입력 줄: 이미지 칸까지 네 칸 */
.pfrow { grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr) minmax(0, 1.2fr) minmax(0, 1.2fr); }
@media (max-width: 760px) { .pfrow { grid-template-columns: 1fr; } }
.prof-view .home-hero { padding-top: 8px; }

/* 팝업은 반드시 불투명하게 (v4 의 공통 상자 규칙이 투명하게 덮어써서 뒤 글자가 비쳤다) */
.pick { background: #16141a !important; border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 24px 70px rgba(0, 0, 0, .65); }
.pick-ov { background: rgba(0, 0, 0, .72); backdrop-filter: blur(3px); }

/* 허브 첫 화면: 서버가 넣어 둔 본문이 스타일 없이 번쩍이지 않게 그려지기 전엔 숨긴다 (3초 뒤엔 무조건 보임) */
@keyframes hubshow { to { opacity: 1; visibility: visible; } }
body.hubpage:not(.hub-ready) #root, body.hubpage:not(.hub-ready) .nav { opacity: 0; visibility: hidden; animation: hubshow 0s 3s forwards; }
/* 글 화면은 서버가 채운 제목·앞부분이 그대로 읽을 만하다 → 숨기지 않고 바로 보여 준다 (네이버 등에서 온 사람이 빈 화면을 보지 않게) */
body.hubpage:not(.hub-ready) #root:has(> article.post) { opacity: 1; visibility: visible; animation: none; }
/* 그 미리 그린 글에서는 사진·영상을 숨긴다: 왼쪽 글 목록이 생기기 전이라 화면 폭 가득 커졌다가 줄어들어 보였다(10-29) */
body.hubpage:not(.hub-ready) #root img, body.hubpage:not(.hub-ready) #root video { display: none; }

/* 페이지 글 카드: «가입 없이 바로», «N명이 받아 감» */
.pill.open { background: rgba(123, 224, 168, .14); color: #7be0a8; border-color: rgba(123, 224, 168, .35); }
.g-got { color: var(--gold, #e9c46a); font-weight: 700; }
.home-hero > .sec-h { margin-top: 34px; }
/* «복사해서 내 것 만들기» */
.clonebox { display: flex; gap: 14px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin: 18px 0; padding: 18px 20px; border-radius: 18px; border: 1px dashed rgba(233, 196, 106, .55); background: rgba(233, 196, 106, .06); }
.clonebox > div { flex: 1 1 260px; display: grid; gap: 4px; }
.clonebox b { font-size: 17px; }
.clonebox p { margin: 0; color: var(--muted); font-size: 14px; }
.clonebox em { font-style: normal; color: var(--gold, #e9c46a); font-weight: 700; }
.cl-f { display: grid; gap: 6px; font-size: 13.5px; color: var(--muted); margin-top: 10px; }
.cl-addr { display: flex; align-items: center; gap: 4px; color: var(--text, #f3f1ea); font-size: 15px; }
.cl-addr input { flex: 1; min-width: 0; }
/* 스튜디오 «틀로 시작하기» */
.tpl { margin: 0 0 18px; }
.tpl h2 { margin: 0 0 4px; font-size: 20px; }
.tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin-top: 12px; }
.tpl-card { display: grid; grid-template-rows: auto 1fr auto; border: 1px solid rgba(233, 196, 106, .35); border-radius: 16px; overflow: hidden; background: rgba(233, 196, 106, .05); }
.tpl-card img { width: 100%; aspect-ratio: 1200 / 630; object-fit: cover; display: block; }
.tpl-tx { display: grid; gap: 4px; padding: 12px 14px 4px; }
.tpl-tx span { font-size: 13.5px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tpl-tx small { font-size: 12px; color: var(--muted); }
.tpl-btns { display: flex; gap: 8px; padding: 10px 14px 14px; }
.tpl-or { margin: 6px 0 8px; font-size: 15px; color: var(--muted); }
/* 스튜디오 «상점 무료 선물» */
.catbox { margin-top: 14px; border: 1px dashed rgba(255, 255, 255, .16); border-radius: 14px; padding: 12px; display: grid; gap: 8px; opacity: .92; }
.cat-h { display: grid; gap: 2px; }
.cat-h .note { font-size: 12.5px; }
.cat-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; }
.cat-row img { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; }
.cat-tx { display: grid; gap: 2px; min-width: 0; }
.cat-tx small { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-badge { grid-column: 1 / -1; font-size: 11.5px; color: #7be0a8; }
@media (max-width: 560px) { .cat-row { grid-template-columns: 40px minmax(0, 1fr); } .cat-row .btn { grid-column: span 1; } }
.brk-note { margin: 10px 14px 0; padding: 8px 12px; border-radius: 10px; background: rgba(255, 197, 107, .12); color: #ffc56b; font-size: 13px; }
.pv-video { display: block; width: 100%; border-radius: 16px; margin: 14px 0; background: #000; border: 1px solid var(--border, rgba(255,255,255,.1)); }
.thumb-vid { display: inline-grid; place-items: center; width: 64px; height: 40px; border-radius: 8px; background: rgba(255, 255, 255, .08); color: var(--gold, #e9c46a); font-size: 14px; }
.prose a { color: var(--gold, #e9c46a); word-break: break-all; }
/* 스튜디오 탭 5개: 좁은 화면에서는 한 줄로 옆으로 밀어 본다 */
@media (max-width: 560px) { .tabbar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .tabbar button { flex: 0 0 auto; padding: 10px 12px; } }
/* 위 메뉴 5개(홈·디자인·내 페이지·대시보드·받은 선물): 좁은 휴대폰에서도 한 화면에 들어가게 */
@media (max-width: 420px) { .nav a { padding: 7px 8px; font-size: 14.5px; } }
.ov-post { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border); }
.ov-post .ov-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; display: block; }
.ov-post code { font-size: 15px; word-break: break-all; }
/* 휴대폰: 맛보기 사진을 좌우로 넘기는 카드로 (카톡 «카드형 소식»처럼) */
.pv-count { display: none; }
@media (max-width: 640px) {
  .previews { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin: 10px -16px 6px; padding: 0 16px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .previews::-webkit-scrollbar { display: none; }
  .previews button { flex: 0 0 86%; aspect-ratio: 4 / 3; scroll-snap-align: center; }
  .previews img { padding: 0; object-fit: cover; }
  .pv-count { display: block; text-align: center; font-size: 12.5px; color: var(--muted); margin: 0 0 18px; font-variant-numeric: tabular-nums; }
}
.op-eyebrow { margin: 0 0 10px; font-size: 13px; font-weight: 700; letter-spacing: .08em; color: var(--gold, #e9c46a); }

/* ── 10-30 단순화: 스튜디오 탭 셋 · 홈페이지 칸 · 블로그식 글쓰기 · 링크 복사 고르기 ── */
.tabbar .tablink { padding: 10px 14px; font-size: 15px; font-weight: 650; color: var(--muted); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; flex: 0 0 auto; }
.tabbar .tablink:hover { color: var(--gold); }
.chans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.chans .chan { display: grid; justify-items: center; gap: 6px; padding: 12px 4px; border-radius: 14px; font-size: 12.5px; }
.chans .chan i { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 800; font-size: 13px; }
.pick .btns { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 420px) { .chans { grid-template-columns: repeat(4, 1fr); } .chans .chan span { font-size: 11px; } }

.hform { display: grid; gap: 14px; }
.hf-prev { position: relative; padding-bottom: 44px; }
.hf-hero { height: 150px; border-radius: 18px; background: radial-gradient(120% 140% at 0% 0%, rgba(255, 217, 120, .35), transparent 55%), linear-gradient(135deg, #2b2112, #12100b 70%); background-size: cover; background-position: center; border: 1px solid var(--border); }
.hf-av { position: absolute; left: 20px; bottom: 0; width: 84px; height: 84px; border-radius: 50%; overflow: hidden; border: 3px solid #0b0b0d; background: #2a2416; display: grid; place-items: center; }
.hf-av img { width: 100%; height: 100%; object-fit: cover; } .hf-av span { font-size: 32px; font-weight: 800; color: var(--gold); }
.hf { display: grid; gap: 6px; font-size: 13px; color: var(--muted); }
.hf > span small { color: var(--subtle); font-weight: 400; }
.hf-img { display: flex; gap: 8px; } .hf-img input { flex: 1; min-width: 0; }

.postbox.ed { display: grid; gap: 12px; }
.ed-title { font-size: 22px !important; font-weight: 800; padding: 12px 14px !important; }
.ed-cover { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ed-cover img { width: 100%; max-height: 260px; object-fit: cover; border-radius: 14px; border: 1px solid var(--border); }
.ed-body { min-height: 220px; font-size: 15.5px; line-height: 1.7; }
.giftrow.lk { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto; }
.giftrow.lk .gopen { grid-column: 1 / -1; font-size: 12.5px; }
.giftrow.lk.cat input { opacity: .75; }
@media (max-width: 640px) { .giftrow.lk { grid-template-columns: minmax(0, 1fr) auto; } .giftrow.lk .gU { grid-column: 1 / 2; grid-row: 2; } }

/* ── 방문 화면: 홈페이지처럼 ── */
.hp { margin: 0 0 22px; }
.hp-hero { height: clamp(150px, 26vw, 260px); border-radius: 22px; background: radial-gradient(120% 140% at 0% 0%, rgba(255, 217, 120, .35), transparent 55%), radial-gradient(90% 120% at 100% 100%, rgba(123, 224, 168, .12), transparent 60%), linear-gradient(135deg, #2b2112, #12100b 70%); background-size: cover; background-position: center; border: 1px solid var(--border); }
.hp-card { display: grid; justify-items: center; text-align: center; gap: 8px; margin-top: -56px; padding: 0 16px; }
.hp-av { width: 112px; height: 112px; border-radius: 50%; overflow: hidden; border: 4px solid #0b0b0d; background: #2a2416; display: grid; place-items: center; box-shadow: 0 10px 30px rgba(0, 0, 0, .45); }
.hp-av img { width: 100%; height: 100%; object-fit: cover; } .hp-av span { font-size: 42px; font-weight: 800; color: var(--gold); }
.hp-name { margin: 6px 0 0; font-size: clamp(26px, 4.4vw, 36px); letter-spacing: -.02em; }
.hp-line { margin: 0; font-size: 17px; color: var(--text); opacity: .9; }
.hp-meta { margin: 0; font-size: 14px; color: var(--muted); }
.hp-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 6px; }
.hp-btn { padding: 9px 16px; border-radius: 999px; font-weight: 700; font-size: 14px; text-decoration: none; color: var(--text); background: rgba(255, 236, 190, .06); border: 1px solid var(--border); }
.hp-btn:hover { border-color: rgba(255, 217, 120, .5); }
.hp-btn.main { color: #2a1a00; background: linear-gradient(180deg, #ffe48f, #f5b52e); border-color: transparent; }
.hp-bio { max-width: 60ch; margin: 8px 0 0; color: var(--muted); line-height: 1.7; white-space: pre-line; }
.hp-lib { margin-top: 8px; }
.hp-foot { display: flex; flex-wrap: wrap; gap: 6px 16px; justify-content: center; margin: 28px 0 0; padding-top: 16px; border-top: 1px solid var(--border); font-size: 12.5px; color: var(--subtle); }
.hp-foot em { font-style: normal; color: var(--muted); }
.hf-done { display: grid; gap: 6px; padding: 4px 4px 0; }
.hf-done b { font-size: 22px; } .hf-done span { color: var(--muted); } .hf-done .btns { margin-top: 8px; }