:root { --bg:#f4f5f2; --surface:#fff; --surface-2:#eef1ed; --surface-warm:#fbf8f1; --media-placeholder:#f4f4f4; --line:#dde2dc; --line-strong:#cbd3cc; --ink:#202622; --muted:#6b746e; --accent:#11866b; --accent-deep:#0b6d57; --accent-soft:#e1f2ec; --amber:#d89a32; --coral:#d86c5d; --radius-sm:10px; --radius:16px; --radius-lg:24px; --shadow:0 10px 30px rgba(31,45,37,.06); --shadow-hover:0 18px 42px rgba(31,45,37,.11); --shell-sidebar:224px; --shell-topbar:68px; --shell-gutter:28px; --shell-search:520px; --shell-content:1180px; }
* { box-sizing:border-box; }
html { min-width:320px; background:var(--bg); scroll-behavior:smooth; }
body { min-height:100vh; margin:0; padding-left:var(--shell-sidebar); background:var(--bg); color:var(--ink); font-family:Pretendard,"Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",sans-serif; line-height:1.5; }
a { color:inherit; text-decoration:none; }
button,input,textarea,select { font:inherit; }
button { cursor:pointer; }
a,button,input,textarea,select { transition:border-color .18s ease,box-shadow .18s ease,background-color .18s ease,color .18s ease,transform .18s ease; }
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible { outline:3px solid rgba(17,134,107,.25); outline-offset:3px; }
.side-nav { position:fixed; inset:0 auto 0 0; z-index:20; display:flex; width:var(--shell-sidebar); padding:0 12px 18px; flex-direction:column; overflow-x:hidden; overflow-y:auto; border-right:1px solid var(--line); background:rgba(250,251,249,.94); backdrop-filter:blur(18px); }
.side-nav .brand { position:sticky; top:0; z-index:3; min-height:78px; margin:0 -4px 8px; padding:12px 8px; background:#fafbf9; }
.side-nav .brand { display:flex; align-items:center; gap:11px; color:var(--ink); }
.brand-mark { display:grid; width:40px; height:40px; flex:0 0 40px; place-items:center; border-radius:13px; background:var(--accent); box-shadow:0 8px 18px rgba(17,134,107,.2); color:#fff; font-size:12px; font-weight:900; letter-spacing:-.04em; }
.brand-label,.brand>span:last-child { font-weight:900; letter-spacing:-.035em; }
.side-nav-menu { display:grid; width:100%; gap:4px; }
.side-nav-menu a { display:flex; width:100%; min-height:43px; padding:0 12px; align-items:center; gap:10px; border-radius:12px; color:#59625c; }
.side-nav-menu a:hover,.side-nav-menu a.active,.side-nav-menu a[aria-current="page"] { background:var(--accent-soft); color:var(--accent-deep); box-shadow:none; }
.side-nav-menu a.active,.side-nav-menu a[aria-current="page"] { box-shadow:inset 3px 0 0 var(--accent); }
.nav-icon { display:grid; width:20px; flex:0 0 20px; place-items:center; color:#758079; }
.side-nav-menu a.active .nav-icon,.side-nav-menu a[aria-current="page"] .nav-icon { color:var(--accent); }
.side-nav-footer { display:none; }
.topbar { position:sticky; top:0; left:0; z-index:15; display:grid; grid-template-columns:minmax(280px,var(--shell-search)) minmax(16px,1fr) auto; width:100%; height:var(--shell-topbar); min-height:var(--shell-topbar); padding:0 var(--shell-gutter); align-items:center; gap:16px; border-bottom:1px solid rgba(203,211,204,.8); background:rgba(255,255,255,.84); backdrop-filter:blur(18px); }
.topbar .mobile-brand { display:none; }
.utility-search { display:flex; grid-column:1; width:100%; max-width:var(--shell-search); min-height:40px; margin:0; padding:0 13px; align-items:center; gap:9px; border:1px solid var(--line); border-radius:12px; background:#f5f6f4; color:#7a837d; }
.utility-search:hover { border-color:var(--line-strong); background:#fff; }
.actions { grid-column:3; display:flex; height:40px; align-items:center; gap:8px; margin:0; justify-self:end; }
.topbar .icon { width:40px; height:40px; flex:0 0 40px; }
.topbar .actions .auth-top-link { display:flex; width:64px; height:40px; min-height:40px; padding:0 12px; align-items:center; justify-content:center; font-size:13px; font-weight:800; line-height:1; white-space:nowrap; }
.icon,.auth-top-link { display:grid; place-items:center; border:1px solid var(--line); border-radius:11px; background:#fff; }
.icon:hover,.auth-top-link:hover { border-color:var(--line-strong); background:var(--surface-2); }
main { width:min(var(--shell-content),calc(100% - 52px)); margin:0 auto; padding-top:34px; padding-bottom:80px; }
.page-head { position:relative; isolation:isolate; display:grid; overflow:hidden; gap:10px; margin-bottom:16px; padding:30px 32px; border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--surface); }
.page-head::after { content:""; position:absolute; z-index:-1; width:220px; height:220px; right:-72px; top:-112px; border:38px solid rgba(17,134,107,.07); border-radius:50%; }
.page-head .eyebrow { color:var(--accent); font-size:12px; letter-spacing:.08em; }
.page-head h1 { margin:0; color:var(--ink); font-size:clamp(34px,4vw,50px); letter-spacing:-.055em; line-height:1.08; }
.page-head p { max-width:720px; margin:0; color:var(--muted); font-size:15px; line-height:1.7; }
.toolbar,.quick-tabs,.filters,.mode-tabs { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px; }
.toolbar span,.toolbar button,.quick-tabs a,.filters button,.mode-tabs button,.button { display:inline-flex; min-height:40px; padding:0 15px; align-items:center; justify-content:center; border:1px solid var(--line); border-radius:11px; background:#fff; color:#5c655f; font-weight:800; }
.toolbar span:hover,.toolbar button:hover,.quick-tabs a:hover,.filters button:hover,.mode-tabs button:hover,.button:hover { border-color:var(--line-strong); background:var(--surface-2); color:var(--ink); transform:none; box-shadow:none; }
.toolbar .active,.quick-tabs .active,.filters .active,.mode-tabs button.active,.button.primary { border-color:var(--accent); background:var(--accent); color:#fff; }
.toolbar .active:hover,.quick-tabs .active:hover,.filters .active:hover,.mode-tabs button.active:hover,.button.primary:hover { border-color:var(--accent-deep); background:var(--accent-deep); color:#fff; }
.section-head { margin-bottom:16px; }
.section-head h2 { letter-spacing:-.035em; }
.grid,.work-grid,.creator-grid,.art-grid,.board-preview-grid,.latest-stream,.work-action-grid,.support-tier-grid { gap:16px; }
.card,.panel,.wide-panel,.list-row,.event-card,.work-card,.creator-card,.rank-row,.art-card,.promo,.primary-category-card,.board-card,.board-latest-panel,.latest-feed-card,.creator-home-profile,.creator-home-hero,.creator-note-panel,.episode-row,.reader-finish,.reader-comments,.reader-side section,.episode-strip,.auth-card,.auth-note,.form-card,.upload-preview,.support-hero-panel,.support-status-panel { border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); box-shadow:var(--shadow); }
.card:hover,.list-row:hover,.event-card:hover,.work-card:hover,.creator-card:hover,.rank-row:hover,.art-card:hover,.primary-category-card:hover,.board-card:hover,.latest-feed-card:hover,.episode-row:hover { border-color:var(--line-strong); box-shadow:var(--shadow-hover); transform:translateY(-2px); }
.card { overflow:hidden; }
.card-body { padding:17px; }
.visual,.card:nth-child(4n+2) .visual,.card:nth-child(4n+3) .visual,.card:nth-child(4n+4) .visual { position:relative; min-height:185px; overflow:hidden; background:var(--media-placeholder); }
.visual::before,.visual::after { display:none; }
.visual>span,.visual>strong { position:relative; z-index:1; color:var(--ink); }
.creator-avatar,.avatar { background:var(--media-placeholder); color:var(--accent-deep); }
.creator-cover,.hero-visual { border-radius:var(--radius-lg); }
.creator-home-profile { padding:26px; }
.creator-profile-tabs { gap:8px; }
.creator-profile-tabs button { border-radius:11px; }
.creator-profile-tabs button.active,.creator-profile-tabs button:hover { border-color:#b9ddd2; background:var(--accent-soft); color:var(--accent-deep); }
.support-hero-panel { background:var(--surface); }
.support-hero-panel>strong { border-radius:12px; background:var(--accent); color:#fff; }
.support-tier-card { border-radius:14px; background:#f7f8f6; }
.support-tier-card.active,.support-tier-card:hover { border-color:var(--accent); background:var(--accent-soft); }
.reader-toolbar { border-radius:var(--radius); }
.reader-canvas { border-radius:var(--radius); background:#e9ece8; }
.reader-page { border-radius:12px; box-shadow:0 12px 34px rgba(31,45,37,.08); }
.upload-drop { border-radius:var(--radius); background:var(--media-placeholder); }
.field-block input,.field-block textarea,.field-block select,.support-memo-form input,.support-memo-form textarea { border-color:var(--line); border-radius:10px; background:#fff; }
.field-block input:focus,.field-block textarea:focus,.field-block select:focus,.support-memo-form input:focus,.support-memo-form textarea:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(17,134,107,.1); }
.event-card,.event-card:nth-child(2),.event-card:nth-child(3),.primary-category-card,.primary-category-card:nth-child(2) { background:var(--surface); }
.category-icon,.board-mark { border-radius:12px; }
.hero { gap:16px; }
.hero-visual { box-shadow:0 20px 50px rgba(16,28,22,.15); }
.rank-box { background:var(--surface); }
.promo { background:#14382f; color:#fff; }
.promo p,.promo .eyebrow { color:#d8eee7; }
.creator-mode { padding-left:var(--shell-sidebar); background:var(--bg); color:var(--ink); }
.creator-mode .side-nav { width:var(--shell-sidebar); padding:0 12px 18px; align-items:stretch; overflow-x:hidden; background:rgba(250,251,249,.94); }
.creator-mode .side-nav .brand { width:auto; min-height:78px; justify-content:flex-start; margin:0 -4px 8px; padding:12px 8px; }
.creator-mode .brand-mark { width:40px; height:40px; }
.creator-mode .brand-label,.creator-mode .nav-label { position:static; width:auto; height:auto; overflow:visible; clip:auto; white-space:normal; }
.creator-mode .side-nav-profile { display:none; }
.creator-mode .side-nav-menu { width:auto; gap:4px; }
.creator-mode .side-nav-menu a { width:auto; min-height:43px; justify-content:flex-start; padding:0 12px; border-radius:12px; }
.creator-mode .nav-icon { width:22px; height:auto; flex-basis:22px; border-radius:0; font-size:15px; }
.creator-mode .side-nav-menu a.active .nav-icon,.creator-mode .side-nav-menu a:hover .nav-icon { background:transparent; color:var(--accent); }
.creator-topbar { position:sticky; top:0; z-index:60; height:68px; border-bottom:1px solid rgba(203,211,204,.8); background:rgba(255,255,255,.86); backdrop-filter:blur(18px); }
.creator-topbar-inner { width:min(1180px,calc(100% - 52px)); padding:0; }
.creator-brand { gap:10px; color:var(--ink); }
.creator-brand-copy { display:grid; gap:1px; }
.creator-brand-copy strong { font-size:15px; letter-spacing:-.035em; }
.creator-brand-copy small { color:var(--muted); font-size:10px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; }
.creator-account { padding:7px 10px 7px 8px; border:1px solid var(--line); border-radius:11px; background:#fff; color:var(--ink); }
.creator-account-avatar { width:28px; height:28px; background:var(--media-placeholder); }
.creator-shell-layout { display:block; width:min(var(--shell-content),calc(100% - 52px)); min-height:calc(100vh - var(--shell-topbar)); margin:0 auto; }
.creator-mode .creator-side { position:static; min-height:0; margin:0 0 20px; padding:12px; border:1px solid var(--line); border-radius:var(--radius); background:rgba(255,255,255,.82); box-shadow:var(--shadow); }
.creator-mode .creator-main { width:auto; max-width:none; padding:34px 0 86px; }
.creator-page-head { display:grid; gap:7px; margin-bottom:18px; padding:26px 28px; border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--surface); }
.creator-page-title { margin:0; color:var(--ink); font-size:clamp(30px,3vw,42px); letter-spacing:-.05em; line-height:1.1; }
.creator-mode .creator-profile,.creator-mode .creator-side-card { display:none; }
.creator-mode .creator-profile-avatar { width:72px; height:72px; border-color:var(--line); background:var(--media-placeholder); }
.creator-mode .button { min-height:40px; padding:0 15px; border-color:var(--line); border-radius:10px; background:#fff; color:var(--ink); }
.creator-mode .button:hover { border-color:var(--line-strong); background:var(--surface-2); }
.creator-mode .button.primary { border-color:var(--accent); background:var(--accent); color:#fff; }
.creator-mode .button.primary:hover { border-color:var(--accent-deep); background:var(--accent-deep); }
.creator-mode .creator-menu { display:flex; gap:6px; margin:0; overflow-x:auto; }
.creator-mode .creator-menu a { min-height:40px; flex:0 0 auto; padding:0 12px; border-radius:10px; color:#59625c; font-size:14px; }
.creator-mode .creator-menu a::before { width:16px; height:16px; border-color:var(--line-strong); border-radius:5px; }
.creator-mode .creator-menu a.active,.creator-mode .creator-menu a:hover { background:var(--accent-soft); color:var(--accent-deep); }
.creator-mode .creator-menu a.active::before { border-color:var(--accent); background:var(--accent); box-shadow:inset 0 0 0 4px #fff; }
.creator-mode .creator-menu a::before { display:none; }
.creator-mode .creator-side-card { min-height:82px; padding:13px; border-color:var(--line); border-radius:11px; background:var(--surface-warm); color:var(--ink); }
.creator-mode .work-action-grid { gap:14px; }
.creator-mode .work-action-card { min-height:148px; border-color:var(--line); border-radius:var(--radius); box-shadow:var(--shadow); }
.creator-mode .work-action-card.primary { border-color:#b8ddd2; background:var(--accent-soft); }
.creator-mode .eyebrow { color:var(--accent); }
.creator-mode .form-card,.creator-mode .upload-preview,.creator-mode .managed-work-row,.creator-mode .upload-decision-card { border-color:var(--line); border-radius:var(--radius); background:#fff; box-shadow:var(--shadow); }
.creator-mode .form-card:not(.naver-form) { padding:24px 28px; }
.creator-mode .naver-form { overflow:hidden; }
.creator-mode .form-row { padding:22px 26px; border-bottom-color:var(--line); }
.creator-mode .form-row>strong { color:var(--ink); }
.creator-mode .field-block input,.creator-mode .field-block select,.creator-mode .field-block textarea { border-color:var(--line); border-radius:10px; color:var(--ink); }
.creator-mode .field-block input:focus,.creator-mode .field-block select:focus,.creator-mode .field-block textarea:focus { outline:0; border-color:var(--accent); box-shadow:0 0 0 3px rgba(17,134,107,.1); }
.creator-mode input[type="radio"],.creator-mode input[type="checkbox"] { accent-color:var(--accent); }
.creator-mode .image-slot,.creator-mode .empty-file-list,.creator-mode .checker-preview { border-color:var(--line); border-radius:12px; background-color:var(--media-placeholder); background-image:none; }
.creator-mode .image-slot button { border-radius:8px; }
.creator-mode .upload-decision-card { border-left:4px solid var(--accent); }
.creator-mode .upload-decision-grid span { border-color:var(--line); border-radius:9px; background:#f7f8f6; }
.creator-mode .episode-upload-strip { border-radius:11px; background:var(--accent-soft); }
.creator-mode .pixiv-upload-hero { border-radius:var(--radius); background:#163c32; }
.creator-mode .pixiv-upload-hero .button { border-color:rgba(255,255,255,.22); border-radius:10px; background:#fff; color:var(--accent-deep); }
.home-page .tone-blue,.home-page .tone-green,.home-page .tone-coral,.home-page .tone-mint,.home-page .tone-red,.home-page .tone-purple,.home-page .tone-amber { background:var(--media-placeholder); }
.hero-visual,.poster,.art-tile,.feed-thumb,.creator-cover,.episode-thumb,.preview-cover,.image-slot,.empty-file-list,.checker-preview,.creator-mode .draw-import-body img { background-color:var(--media-placeholder); background-image:none; color:var(--ink); }
.hero .eyebrow,.page-head .eyebrow,.creator-page-head .eyebrow { font-size:12px; font-weight:900; line-height:1.5; letter-spacing:.08em; }
.hero h1,.page-head h1,.creator-page-title { margin:0; font-size:48px; font-weight:900; line-height:1.08; letter-spacing:-.052em; }
.hero p,.page-head p,.creator-page-head p { font-size:15px; line-height:1.7; }
.creator-page-head { position:relative; isolation:isolate; overflow:hidden; gap:10px; padding:30px 32px; }
.creator-page-head::after { content:""; position:absolute; z-index:-1; width:220px; height:220px; right:-72px; top:-112px; border:38px solid rgba(17,134,107,.07); border-radius:50%; }
main h2 { font-size:24px; font-weight:900; line-height:1.35; letter-spacing:-.035em; }
main h3 { font-size:18px; font-weight:900; line-height:1.4; letter-spacing:-.025em; }
.card strong,.card h3,.work-card strong,.creator-card strong,.art-card strong,.latest-feed-card strong,.rank-row strong,.work-action-card h2,.managed-work-row strong { font-size:16px; font-weight:900; line-height:1.5; letter-spacing:-.02em; }
.button,.toolbar span,.toolbar button,.quick-tabs a,.filters button,.mode-tabs button,.creator-menu a { font-size:13px; font-weight:800; line-height:1; white-space:nowrap; }
.utility-search,.side-nav-menu a { font-size:14px; font-weight:900; }
@media (max-width:1080px) { .page-head { padding:26px; } }
@media (max-width:820px) { body,.creator-mode { padding-left:0; } .side-nav { display:none; } .topbar { left:0; grid-template-columns:1fr auto; gap:12px; height:62px; min-height:62px; padding:0 14px; } .topbar .mobile-brand { display:inline-flex; grid-column:1; align-items:center; gap:9px; color:var(--ink); font-size:14px; font-weight:900; } .topbar .mobile-brand .brand-mark { width:34px; height:34px; border-radius:11px; font-size:11px; } .topbar .utility-search { display:none; } .topbar .actions { grid-column:2; } main { width:min(100% - 24px,760px); padding-top:22px; } .page-head,.creator-page-head { padding:24px 22px; border-radius:18px; } .hero h1,.page-head h1,.creator-page-title { font-size:36px; } .creator-cover,.hero-visual { border-radius:18px; } .creator-shell-layout { width:min(100% - 24px,760px); } .creator-shell-layout { display:block; min-height:0; } .creator-mode .creator-side { position:static; min-height:0; margin-top:14px; padding:12px; } .creator-mode .creator-profile,.creator-mode .creator-side-card { display:none; } .creator-mode .creator-menu { display:flex; gap:6px; margin:0; overflow-x:auto; } .creator-mode .creator-menu a { flex:0 0 auto; padding:0 12px; } .creator-mode .creator-menu a::before { display:none; } .creator-mode .creator-main { padding:18px 0 70px; } }
@media (max-width:540px) { .topbar .actions .auth-top-link,.topbar .actions .icon:nth-child(2) { display:none; } .page-head,.creator-page-head { padding:22px 18px; } .hero h1,.page-head h1,.creator-page-title { font-size:34px; } .toolbar { overflow-x:auto; flex-wrap:nowrap; padding-bottom:4px; } .toolbar span,.toolbar button { flex:0 0 auto; } .card,.panel,.wide-panel,.list-row,.event-card,.work-card,.creator-card,.rank-row,.art-card,.promo,.primary-category-card,.board-card,.board-latest-panel,.latest-feed-card { border-radius:14px; } .creator-mode .work-action-grid { grid-template-columns:1fr; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; } }