:root {
  --ink: #101114;
  --muted: #747983;
  --line: #e5e7eb;
  --panel: #f6f7f9;
  --accent: #5b61ff;
  --accent-soft: #eff0ff;
  --danger: #ff3040;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: #fff; }
body { margin: 0; color: var(--ink); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", sans-serif; }
button, input, textarea { font: inherit; }
button { color: inherit; }
[hidden] { display:none !important; }

.site-header {
  height: 68px; padding: 0 32px; display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--line); background: rgba(255,255,255,.92); position: sticky; top: 0; z-index: 20;
  backdrop-filter: blur(16px);
}
.brand { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; font-size: 18px; letter-spacing: -.4px; }
.brand-mark { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; color: #fff; background: var(--ink); font-weight: 800; }
.header-status { font-size: 12px; padding: 8px 11px; border: 1px solid var(--line); border-radius: 99px; color: var(--muted); }
.header-status span, .live-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #30b866; margin-right: 6px; }

.workspace { min-height: calc(100vh - 68px); display: grid; grid-template-columns: minmax(390px, 43%) 1fr; }
.editor-panel { padding: 64px clamp(32px, 6vw, 92px) 80px; background: #fff; border-right: 1px solid var(--line); }
.panel-heading { max-width: 530px; }
.eyebrow { margin: 0 0 16px; color: var(--accent); font-size: 11px; font-weight: 800; letter-spacing: 1.8px; }
.panel-heading > p:last-child { margin: 20px 0 0; color: var(--muted); line-height: 1.65; font-size: 14px; }
.editor-form { max-width: 530px; margin-top: 44px; display: grid; gap: 24px; }
.field { display: grid; gap: 9px; }
.field > span { font-size: 13px; font-weight: 700; }
.field input, .field textarea { width: 100%; border: 1px solid #dfe1e6; border-radius: 12px; padding: 13px 14px; outline: none; background: #fff; transition: border-color .18s, box-shadow .18s; }
.field input:focus, .field textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(91,97,255,.11); }
.field textarea { resize: vertical; min-height: 122px; line-height: 1.55; }
.field > small { justify-self: end; color: #979ba3; font-size: 11px; margin-top: -3px; }
.template-grid { display:grid; grid-template-columns:minmax(0,1fr); }
.template-card { position:relative; width:100%; min-height:92px; border:1px solid #dfe1e6; border-radius:14px; padding:12px; display:flex; align-items:center; gap:13px; background:#fff; text-align:left; cursor:pointer; transition:border-color .18s, box-shadow .18s, transform .18s; }
.template-card:hover { transform:translateY(-1px); border-color:#bfc2cb; }
.template-card.selected { border-color:var(--accent); box-shadow:0 0 0 3px rgba(91,97,255,.1); }
.template-mini { flex:0 0 auto; width:62px; height:66px; border:1px solid #dedfe3; border-radius:5px; background:#fff; padding:7px 6px 5px; display:grid; grid-template-columns:9px 1fr; grid-template-rows:9px 1fr 8px; gap:4px 5px; overflow:hidden; }
.mini-profile { width:9px; height:9px; border-radius:50%; background:linear-gradient(145deg,#5b61ff,#8e93ff); }
.mini-line { align-self:center; width:24px; height:3px; border-radius:3px; background:#282b31; }
.mini-media { grid-column:1 / -1; border-radius:2px; background:linear-gradient(145deg,#dadcff,#aeb2ff 55%,#767cff); }
.mini-actions { grid-column:1 / -1; align-self:center; color:#22252b; font:700 6px/1 Arial,sans-serif; letter-spacing:1px; white-space:nowrap; }
.template-copy { min-width:0; display:grid; gap:4px; }
.template-copy strong { font-size:13px; }
.template-copy small { color:var(--muted); font-size:11px; }
.template-selected { position:absolute; top:10px; right:10px; width:19px; height:19px; display:grid; place-items:center; border-radius:50%; background:var(--accent); color:#fff; font-size:11px; font-weight:800; }
.field > .template-hint { justify-self:start; margin-top:0; }
.input-prefix { position: relative; }
.input-prefix b { position: absolute; top: 50%; left: 14px; transform: translateY(-50%); color: #9a9ea7; }
.input-prefix input { padding-left: 35px; }
.upload-zone { border: 1px dashed #cdd0d7; border-radius: 14px; padding: 17px; display: flex; align-items: center; gap: 13px; cursor: pointer; transition: .2s; background: #fafafb; }
.upload-zone:hover { border-color: var(--accent); background: var(--accent-soft); }
.upload-zone input { position: absolute; opacity: 0; pointer-events: none; width: 1px; }
.upload-plus { flex: 0 0 auto; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; background: #fff; border: 1px solid var(--line); font-size: 23px; color: var(--accent); }
.upload-zone strong, .upload-zone small { display: block; }
.upload-zone strong { font-size: 13px; }
.upload-zone small { color: var(--muted); font-size: 11px; margin-top: 4px; }
.file-list { display: grid; gap: 6px; }
.file-chip { display: grid; grid-template-columns:minmax(0,1fr) auto 24px; align-items:center; gap: 10px; font-size: 11px; padding: 7px 8px 7px 10px; background: var(--panel); border-radius: 8px; color: var(--muted); }
.file-chip b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #4f535b; }
.file-chip button { width:24px; height:24px; border:0; border-radius:6px; background:transparent; color:#858a94; font-size:18px; line-height:1; cursor:pointer; }
.file-chip button:hover { background:#e8e9ed; color:#22252b; }
.primary-button { border: 0; background: var(--ink); color: #fff; border-radius: 13px; padding: 15px 18px; font-weight: 750; cursor: pointer; display: flex; align-items: center; justify-content: space-between; transition: transform .16s, background .16s; }
.primary-button:hover { background: #292b31; transform: translateY(-1px); }
.primary-button:disabled { opacity:.62; cursor:wait; transform:none; }
.form-note { margin: -14px 0 0; text-align: center; font-size: 11px; color: #9a9ea6; }
.form-note a { color:var(--accent); font-weight:700; }

.preview-panel { background: var(--panel); min-width: 0; padding: 28px clamp(22px, 5vw, 70px) 64px; }
.preview-toolbar { max-width: 650px; margin: 0 auto 22px; display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: var(--muted); }
.preview-toolbar strong { color: #444851; }
.device-switch { display: flex; background: #e9ebef; padding: 3px; border-radius: 9px; }
.device-switch button { border: 0; background: transparent; color: var(--muted); border-radius: 7px; padding: 6px 10px; font-size: 10px; cursor: pointer; }
.device-switch button.active { background: #fff; color: var(--ink); box-shadow: 0 1px 4px rgba(15,18,25,.08); }
.preview-shell { max-width: 650px; margin: 0 auto; transition: max-width .35s ease; }
.preview-shell.mobile { max-width: 390px; }
.post-card { background: #fff; border: 1px solid #dedfe3; border-radius: 4px; overflow: hidden; box-shadow: 0 18px 60px rgba(24,28,37,.08); }
.post-header { height: 72px; padding: 0 17px; display: flex; align-items: center; gap: 11px; }
.avatar-ring { width: 40px; height: 40px; padding: 2px; border-radius: 50%; background: conic-gradient(#feda75, #d62976, #4f5bd5, #feda75); }
.avatar { width: 100%; height: 100%; border: 2px solid #fff; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(145deg,#dfe2e8,#fff); color: #747987; font-weight: 800; }
.post-identity { flex: 1; min-width: 0; }
.post-identity > div { display: flex; align-items: center; min-width: 0; font-size: 14px; line-height: 1.2; }
.post-identity strong { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 600; letter-spacing: -.15px; }
.post-identity small { display: block; margin-top: 2px; font-size: 12px; line-height: 1.2; font-weight: 400; color: #262626; }
.separator { color: #737373; margin-left: 5px; }
#elapsed { color: #737373; margin-left: 4px; font-weight: 400; letter-spacing: -.1px; }
.verified {
  position: relative; display: inline-block; flex: 0 0 auto; margin-left: 3px; width: 12.5px; height: 12.5px;
  background: #0095f6;
  clip-path: polygon(50% 0%, 60.9% 9.4%, 75% 6.7%, 79.7% 20.3%, 93.3% 25%, 90.6% 39.1%, 100% 50%, 90.6% 60.9%, 93.3% 75%, 79.7% 79.7%, 75% 93.3%, 60.9% 90.6%, 50% 100%, 39.1% 90.6%, 25% 93.3%, 20.3% 79.7%, 6.7% 75%, 9.4% 60.9%, 0% 50%, 9.4% 39.1%, 6.7% 25%, 20.3% 20.3%, 25% 6.7%, 39.1% 9.4%);
}
.verified::after {
  content: ""; position: absolute; left: 50%; top: 47%; width: 4.7px; height: 2.3px;
  border-left: 1.4px solid #fff; border-bottom: 1.4px solid #fff;
  transform: translate(-50%, -50%) rotate(-45deg); transform-origin: center;
}
.verified.small { width: 12.5px; height: 12.5px; transform: translateY(1.5px); }
.verified.small::after { width: 4.7px; height: 2.3px; border-width: 0 0 1.4px 1.4px; }
.follow-button { border: 0; border-radius: 8px; background: #f0f1f3; padding: 7px 12px; font-size: 12px; font-weight: 750; }
.more-button { border: 0; background: transparent; padding: 8px 0 8px 7px; font-weight: 900; letter-spacing: 1px; }
.media-stage { position: relative; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; background:#000; transition: aspect-ratio .3s ease; }
.media-track { position:absolute; left:-1px; top:0; width:calc(100% + 2px); height:100%; display:flex; transition:transform .42s cubic-bezier(.22,.61,.36,1); will-change:transform; backface-visibility:hidden; }
.media-slide { flex:0 0 100%; min-width:100%; height:100%; display:grid; place-items:center; overflow:hidden; background:#000; transform:translateZ(0); }
.media-slide img { display:block; width:100%; height:100%; min-width:0; min-height:0; object-fit:contain; user-select:none; }
.media-stage:has(.media-slide) { cursor:grab; }
.media-stage.is-dragging { cursor:grabbing; user-select:none; }
.media-stage.is-dragging .media-track { transition:none; }
.sample-art { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; color: white; background: radial-gradient(circle at 70% 22%, rgba(144,107,255,.85), transparent 27%), radial-gradient(circle at 18% 82%, rgba(37,193,221,.72), transparent 30%), linear-gradient(145deg,#171924 0%,#07080b 72%); }
.sample-art::after { content:""; position:absolute; inset:20px; border:1px solid rgba(255,255,255,.16); }
.sample-orbit { position:absolute; border:1px solid rgba(255,255,255,.22); border-radius:50%; }
.orbit-one { width:70%; aspect-ratio:1; transform:rotate(18deg); }
.orbit-two { width:42%; aspect-ratio:1; border-color:rgba(111,219,255,.38); transform:translate(32%,-25%); }
.sample-copy { position:relative; z-index:1; text-align:center; max-width:75%; display:grid; gap:10px; }
.sample-copy small { letter-spacing:4px; font-size:10px; color:rgba(255,255,255,.62); }
.sample-copy strong { font-size:clamp(18px,2.4vw,26px); font-weight:600; line-height:1.4; word-break:keep-all; }
.sample-copy span { margin-top:10px; font-size:8px; letter-spacing:2.5px; }
.media-arrow { position:absolute; z-index:5; top:50%; width:30px; height:30px; padding:0; border:0; border-radius:50%; background:transparent; color:transparent; font-size:0; cursor:pointer; box-shadow:0 1px 6px rgba(0,0,0,.2); display:none; opacity:0; pointer-events:none; transition:opacity .2s ease, transform .28s cubic-bezier(.22,.61,.36,1); }
.media-arrow::before { content:""; position:absolute; inset:0; background:center/100% 100% no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cmask id='cut'%3E%3Crect width='30' height='30' fill='white'/%3E%3Cpath d='M12 9l6 6-6 6' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/mask%3E%3Ccircle cx='15' cy='15' r='15' fill='white' fill-opacity='.74' mask='url(%23cut)'/%3E%3C/svg%3E"); }
.media-arrow.prev::before { transform:scaleX(-1); }
.media-arrow.prev { left:12px; transform:translate3d(-52px,-50%,0); }
.media-arrow.next { right:12px; transform:translate3d(52px,-50%,0); }
.media-stage:hover .media-arrow, .media-arrow:focus-visible { opacity:1; pointer-events:auto; }
.media-stage:hover .media-arrow.prev, .media-arrow.prev:focus-visible,
.media-stage:hover .media-arrow.next, .media-arrow.next:focus-visible { transform:translate3d(0,-50%,0); }
.media-counter { position:absolute; top:12px; right:12px; padding:5px 8px; border-radius:99px; background:rgba(0,0,0,.65); color:#fff; font-size:10px; }
.media-dots { height:24px; display:flex; align-items:center; justify-content:center; gap:4px; }
.media-dots span, .media-dots button { width:5px; height:5px; padding:0; border:0; border-radius:50%; background:#b4b7bd; transition:.18s; }
.media-dots span.active, .media-dots button.active { background:var(--accent); transform:scale(1.15); }
.post-actions { min-height:47px; padding:2px 17px 5px; display:flex; align-items:center; justify-content:space-between; }
.action-group { display:flex; align-items:center; gap:16px; }
.icon-button { width:28px; height:32px; border:0; padding:0; background:transparent; display:grid; place-items:center; cursor:pointer; transition:transform .18s; }
.icon-button svg { width:27px; height:27px; overflow:visible; fill:none; stroke:#0d1114; stroke-width:2.15; stroke-linecap:round; stroke-linejoin:round; }
.icon-button:not(:disabled):hover { transform:scale(1.1); }
.icon-button:disabled { cursor:default; opacity:1; }
.heart-button.liked svg { fill:var(--danger); stroke:var(--danger); }
.heart-button.is-popping svg { animation:heart-pop .36s cubic-bezier(.18,.89,.32,1.35); }
@keyframes heart-pop { 0%{transform:scale(1.02)} 45%{transform:scale(1.25)} 100%{transform:scale(1.02)} }
.heart-button svg { transform:scale(1.02); }
.comment-icon svg { width:26px; height:26px; transform:none; }
.repeat-icon svg { width:27px; height:25px; }
.send-icon svg { width:26px; height:26px; }
.bookmark-button svg { width:27px; height:28px; }
.bookmark-button.saved svg { fill:#0d1114; }
.caption-block { padding:0 17px 20px; font-size:14px; line-height:1.5; }
.caption-block p { position:relative; margin:0; white-space:normal; overflow-wrap:anywhere; }
.caption-block #caption-preview { white-space:pre-wrap; }
.caption-block p.is-collapsed { height:3em; overflow:hidden; }
.caption-block strong { margin-right:3px; font-weight:600; letter-spacing:-.1px; }
.caption-block a { color:#385898; text-decoration:none; }
#more-caption { border:0; padding:0; background:transparent; color:#8a8e96; cursor:pointer; }
.caption-block p.is-collapsed #more-caption { height:1.5em; margin-left:3px; vertical-align:baseline; }
.toast { position:fixed; left:50%; bottom:28px; z-index:50; transform:translate(-50%,20px); opacity:0; pointer-events:none; background:#15171c; color:#fff; padding:11px 15px; border-radius:10px; font-size:12px; transition:.25s; box-shadow:0 8px 28px rgba(0,0,0,.22); }
.toast.show { opacity:1; transform:translate(-50%,0); }

.login-page { min-height:100vh; display:grid; place-items:center; padding:24px; background:radial-gradient(circle at 20% 15%,#f0f1ff,transparent 35%),#f7f7f9; }
.login-card { width:min(100%,430px); padding:38px; border:1px solid var(--line); border-radius:24px; background:#fff; box-shadow:0 24px 80px rgba(24,28,37,.1); }
.login-brand { width:max-content; margin-bottom:46px; }
.login-copy h1 { margin:8px 0 10px; font-size:28px; letter-spacing:-1px; }
.login-copy > p:last-child { margin:0; color:var(--muted); font-size:13px; line-height:1.6; }
.login-form { display:grid; gap:18px; margin-top:34px; }
.login-error { min-height:18px; margin:0; color:#d92736; font-size:12px; text-align:center; }
.login-form .primary-button:disabled { opacity:.62; cursor:wait; transform:none; }
.viewer-page { min-height:100vh; padding:34px 18px 70px; background:var(--panel); }
.viewer-shell { width:min(100%,650px); margin:0 auto; }
.viewer-message { margin-top:30vh; color:var(--muted); text-align:center; font-size:13px; }
.viewer-message.error { color:#c42a37; }

.manager-panel { padding:72px clamp(24px,6vw,92px) 90px; border-top:1px solid var(--line); background:#fff; }
.manager-heading { display:flex; align-items:end; justify-content:space-between; gap:24px; max-width:1400px; margin:0 auto; }
.manager-heading .eyebrow { margin-bottom:10px; }
.manager-heading h2 { margin:0; font-size:26px; letter-spacing:-.8px; }
.manager-heading p:last-child { margin:9px 0 0; color:var(--muted); font-size:13px; }
.secondary-button, .slot-delete, .danger-button, .inline-reset { border:0; cursor:pointer; font-weight:700; }
.secondary-button { display:inline-flex; align-items:center; justify-content:center; padding:9px 13px; border:1px solid var(--line); border-radius:9px; color:#3f434b; background:#fff; text-decoration:none; font-size:12px; }
.secondary-button:hover { background:#f6f7f9; }
.secondary-button:disabled { opacity:.55; cursor:wait; }
.project-summary { max-width:1400px; margin:28px auto 12px; color:var(--muted); font-size:12px; }
.project-grid { max-width:1400px; margin:0 auto; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.project-slot { min-width:0; display:grid; grid-template-columns:84px minmax(0,1fr); grid-template-rows:1fr auto; gap:12px 14px; padding:13px; border:1px solid var(--line); border-radius:15px; background:#fff; box-shadow:0 8px 30px rgba(24,28,37,.04); }
.project-thumb { position:relative; grid-row:1 / 3; aspect-ratio:1; border-radius:10px; overflow:hidden; background:#11131a; }
.project-thumb img { width:100%; height:100%; display:block; object-fit:cover; }
.project-thumb > span:last-child { position:absolute; left:7px; bottom:6px; padding:3px 5px; border-radius:5px; background:rgba(0,0,0,.62); color:#fff; font:700 9px/1 sans-serif; }
.project-placeholder { height:100%; display:grid; place-items:center; color:#aeb1ba; font-size:10px; }
.project-info { min-width:0; }
.project-meta { display:flex; justify-content:space-between; gap:8px; align-items:center; }
.project-meta strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; }
.project-meta time { flex:0 0 auto; color:#969aa3; font-size:9px; }
.project-info p { height:2.8em; margin:7px 0 5px; overflow:hidden; color:#434750; font-size:11px; line-height:1.4; overflow-wrap:anywhere; }
.project-info small { color:#969aa3; font-size:9px; }
.project-actions { display:flex; justify-content:flex-end; gap:6px; }
.project-actions .secondary-button, .slot-delete { padding:6px 9px; border-radius:7px; font-size:10px; }
.slot-delete { color:#d52c3c; background:#fff0f2; }
.slot-delete:hover { background:#ffe2e6; }
.project-empty { max-width:1400px; margin:0 auto; padding:50px 20px; border:1px dashed #d9dbe1; border-radius:15px; color:#999da5; text-align:center; font-size:12px; }
.inline-reset { padding:0; color:#666cff; background:transparent; font-size:inherit; }
.confirm-overlay { position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:20px; background:rgba(10,12,18,.55); backdrop-filter:blur(5px); }
.confirm-dialog { width:min(100%,430px); padding:28px; border-radius:20px; background:#fff; box-shadow:0 28px 90px rgba(0,0,0,.28); }
.danger-mark { width:36px; height:36px; display:grid; place-items:center; border-radius:50%; color:#d92736; background:#fff0f2; font-weight:900; }
.confirm-dialog h2 { margin:18px 0 8px; font-size:20px; letter-spacing:-.5px; }
.confirm-dialog > p { color:#666b75; font-size:12px; line-height:1.6; }
.delete-target { margin:18px 0; padding:11px 12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; border-radius:9px; background:#f5f6f8; color:#4b4f57; font-size:11px; }
.delete-final-warning { padding:10px 12px; border-radius:9px; color:#c92131 !important; background:#fff0f2; font-weight:700; }
.confirm-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:22px; }
.danger-button { padding:10px 14px; border-radius:9px; color:#fff; background:#d92736; font-size:12px; }
.danger-button:hover { background:#bd1f2d; }
.danger-button:disabled { opacity:.6; cursor:wait; }

@media (max-width: 980px) {
  .workspace { grid-template-columns:1fr; }
  .editor-panel { border-right:0; border-bottom:1px solid var(--line); }
  .preview-panel { padding-top:40px; }
  .project-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 600px) {
  .site-header { height:58px; padding:0 17px; }
  .header-status { display:none; }
  .workspace { min-height:calc(100vh - 58px); }
  .editor-panel { padding:40px 19px 52px; }
  .preview-panel { padding:28px 0 50px; }
  .preview-toolbar { padding:0 16px; }
  .device-switch { display:none; }
  .post-card { border-left:0; border-right:0; border-radius:0; }
  .preview-shell { max-width:100%; }
  .login-card { padding:30px 22px; border-radius:20px; }
  .viewer-page { padding:0 0 46px; background:#fff; }
  .manager-panel { padding:50px 17px 65px; }
  .manager-heading { align-items:start; }
  .manager-heading p:last-child { max-width:230px; }
  .project-grid { grid-template-columns:1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior:auto !important; animation-duration:.01ms !important; transition-duration:.01ms !important; }
}