:root{--ink:#211d2d;--muted:#8d8498;--line:#ece6ef;--violet:#7351df;--coral:#e36d9e;--paper:#fffdfd;--shadow:0 22px 70px rgba(75,51,105,.1)}*{box-sizing:border-box}body{margin:0;background:#fcfafc;color:var(--ink);font-family:'Noto Sans KR','DM Sans',sans-serif}.shell{min-height:100vh}.topbar{height:88px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 clamp(20px,6vw,110px);background:#fcfafccc;backdrop-filter:blur(20px);position:sticky;top:0;z-index:10}.brand{display:flex;align-items:center;gap:13px;color:var(--ink);text-decoration:none}.brand-mark{width:38px;height:38px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-size:21px}.brand strong{letter-spacing:.28em;font-size:13px}.brand span{display:block;font-size:10px;color:var(--muted);letter-spacing:.1em;margin-top:4px}.top-actions{display:flex;align-items:center;gap:4px}.ghost,.primary,.chip,.avatar-button{border-radius:999px;padding:11px 17px;background:transparent;color:var(--ink);font-weight:700}.primary{background:var(--ink);color:#fff}.ghost:hover,.chip:hover{background:#f4eef8}.avatar-button{border:1px solid var(--line);background:#fff}.hero{max-width:1240px;margin:0 auto;padding:105px 24px 76px;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(310px,.65fr);align-items:end;gap:60px}.eyebrow{color:var(--violet);font-weight:800;letter-spacing:.24em;font-size:11px}.hero h1{font-size:clamp(44px,6.4vw,86px);line-height:1.06;letter-spacing:-.08em;margin:20px 0}.hero h1 em{font-style:normal;color:var(--coral)}.hero p{color:var(--muted);font-size:16px;line-height:1.9}.search{display:flex;max-width:620px;margin-top:34px;border-bottom:2px solid var(--ink);background:transparent}.search input{border:0;outline:0;flex:1;padding:17px 4px;min-width:0;color:var(--ink);background:transparent;font-size:16px}.search button{padding:13px 22px;border-radius:999px;background:var(--violet);color:#fff;font-weight:800;margin:7px 0}.orb{min-height:360px;border-radius:48% 52% 42% 58%;background:linear-gradient(145deg,#f8e9f2,#eee8ff);position:relative;overflow:hidden;box-shadow:var(--shadow);transform:rotate(7deg)}.orb:before{content:'';position:absolute;width:230px;height:230px;border:1px solid #b79ce555;border-radius:50%;inset:65px auto auto 45px;box-shadow:80px 35px 0 -1px #ffffff99}.orb:after{content:'♫';position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:92px;transform:rotate(-7deg);text-shadow:0 12px 30px #9d73c655}.note{display:none}.features{max-width:1240px;margin:0 auto;padding:0 24px 100px;display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.feature,.channel-card{background:transparent;border:0;border-radius:0;padding:30px 28px 28px 0;box-shadow:none}.feature+.feature{border-left:1px solid var(--line);padding-left:28px}.feature-icon{font-size:24px;color:var(--coral)}.feature h3{margin:20px 0 8px}.feature p{margin:0;color:var(--muted);line-height:1.7}.section{max-width:1240px;margin:0 auto;padding:60px 24px 100px}.section-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:28px}.section h2{font-size:34px;margin:0;letter-spacing:-.07em}.section-head p{color:var(--muted);margin:0}.channels{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line)}.channels .channel-card{display:flex;gap:15px;align-items:center;border-bottom:1px solid var(--line);padding:22px 20px 22px 0}.channels .channel-card:nth-child(3n+2),.channels .channel-card:nth-child(3n+3){padding-left:25px;border-left:1px solid var(--line)}.channel-avatar{width:50px;height:50px;border-radius:50%;background:linear-gradient(135deg,#f2b5d2,#a394eb);display:grid;place-items:center;color:white;font-size:21px;font-weight:800}.channel-card h3{margin:0 0 3px}.channel-card p{margin:0;color:var(--muted);font-size:13px}.modal-backdrop{position:fixed;inset:0;background:#211b2b66;backdrop-filter:blur(14px);z-index:30;display:grid;place-items:center;padding:20px}.modal{width:min(760px,100%);max-height:90vh;overflow:auto;background:var(--paper);border:1px solid #eee2ef;border-radius:24px;padding:32px;box-shadow:0 30px 100px #3a275755}.modal-head{display:flex;justify-content:space-between;gap:18px;align-items:start}.modal-head h2{margin:0;font-size:30px}.close{background:#f6eef8;border-radius:50%;width:40px;height:40px;color:var(--ink);font-size:20px}.song-row{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:20px 0;border-bottom:1px solid var(--line)}.song-row strong{display:block}.song-row small{color:var(--muted)}.tag{display:inline-block;padding:5px 9px;background:#f4edf7;color:#7256b8;border-radius:99px;font-size:12px;font-weight:700;margin:3px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:22px}.field label{display:block;font-size:13px;font-weight:700;margin-bottom:7px}.field input,.field select{width:100%;border:1px solid #e5dce8;border-radius:13px;padding:12px;background:#fff;outline:0}.field.full{grid-column:1/-1}.bottom-nav{display:none}@media(max-width:800px){.topbar{height:70px;padding:0 16px}.top-actions .ghost{display:none}.hero{padding:64px 20px 50px;display:block}.hero h1{font-size:50px}.orb{min-height:220px;margin-top:42px}.features,.channels{grid-template-columns:1fr}.features{padding:0 20px 50px}.feature,.feature+.feature{padding:24px 0;border-left:0;border-bottom:1px solid var(--line)}.section{padding:50px 20px 100px}.section-head{display:block}.section-head p{margin-top:8px}.channels .channel-card:nth-child(3n+2),.channels .channel-card:nth-child(3n+3){padding-left:0;border-left:0}.bottom-nav{display:flex;position:fixed;bottom:0;left:0;right:0;background:#fffefd;border-top:1px solid var(--line);z-index:20;justify-content:space-around;padding:10px 8px}.bottom-nav button{background:transparent;color:var(--muted);font-size:12px}.bottom-nav b{display:block;font-size:20px;color:var(--violet)}.form-grid{grid-template-columns:1fr}.field.full{grid-column:auto}.modal{padding:22px;border-radius:20px}.song-row{align-items:flex-start}.song-row .primary{padding:9px 11px;font-size:13px}}
