/* chaenna UI — "하늘색 편지지" skin (results/site_ui/run_001/design_plan.md). Loaded last. chaenna blue #89A4C9 with cream (Chaennum), blush and butter accents; Jua for headings, Fredoka for the lowercase wordmark and numbers, Noto Sans KR for reading. Rounded paper cards, section stickers, gentle lift on hover. Playful pages: home, gallery, about, hub, games. Practical pages (diary, notices, clips, songs) stay calm. */ :root{ --font-body:'Noto Sans KR','Apple SD Gothic Neo','Malgun Gothic',system-ui,sans-serif; --font-display:'Jua','Noto Sans KR','Apple SD Gothic Neo','Malgun Gothic',sans-serif; --font-round:'Fredoka','Jua','Noto Sans KR',system-ui,sans-serif; --serif-en:var(--font-round);--serif-ko:var(--font-display); --brand:#89a4c9;--brand-ink:#3d5d8d;--brand-soft:#c6d5ec;--brand-deep:#2f4a74; --mist:#eaf0f9;--mist-2:#dbe5f4;--paper:#f3f6fb;--surface:#fff;--ink:#22314d;--ink-2:#3b4c6a;--muted:#5b6a83; --line:#dce5f1;--line-2:#c4d2e6;--line-soft:#ebf0f7; --cream:#fff8ee;--cream-2:#fbefdc;--blush:#f5c9c1;--blush-ink:#a4525f;--butter:#ffe7a6; --pop:0 1px 0 #ffffffb3 inset,0 1px 2px #2f4a7412,0 12px 28px -16px #2f4a7452; --pop-2:0 1px 0 #ffffffb3 inset,0 2px 6px #2f4a7414,0 24px 44px -20px #2f4a7466; --r-s:12px;--r-m:20px;--r-l:28px;--r-xl:36px; --st-a:#a9c0e3;--st-b:#7d99c4;--st-ink:#6f8dbb;--st-accent:#f4b8b0; --header-bg:#f3f6fbd9;--chip:#ffffffeb; --stitch:repeating-linear-gradient(90deg,var(--line-2) 0 6px,transparent 6px 11px); } :root[data-theme=dark]{ --brand-ink:#acc3e7;--brand-soft:#3d5378;--brand-deep:#c9d8ef; --mist:#1b2539;--mist-2:#233050;--paper:#0e1421;--surface:#161f31;--ink:#e7edf7;--ink-2:#c5d1e3;--muted:#9babc3; --line:#28344c;--line-2:#3a4864;--line-soft:#1c263a; --cream:#231f1d;--cream-2:#2c2622;--blush:#5a3a40;--blush-ink:#f0a7b2;--butter:#4a4030; --pop:0 1px 0 #ffffff0d inset,0 1px 2px #00000040,0 14px 30px -16px #000000b3; --pop-2:0 1px 0 #ffffff12 inset,0 2px 6px #00000050,0 26px 46px -20px #000000cc; --st-a:#6f8bb8;--st-b:#4a6595;--st-ink:#4f6c9c;--st-accent:#f0a7a0; --header-bg:#0e1421d9;--chip:#121a2be6; } /* ---------------------------------------------------------------- base */ html{background:var(--paper)} body{font-family:var(--font-body);color:var(--ink);letter-spacing:-.01em; background: radial-gradient(900px 520px at 8% -6%,#dfe8f7 0,transparent 70%), radial-gradient(760px 480px at 100% 4%,#ece6f8 0,transparent 68%), radial-gradient(#c9d6ea55 1px,transparent 1.2px) 0 0/22px 22px, var(--paper);background-attachment:fixed,fixed,scroll,scroll} :root[data-theme=dark] body{background: radial-gradient(900px 520px at 8% -6%,#1b2742 0,transparent 70%), radial-gradient(760px 480px at 100% 4%,#231f3b 0,transparent 68%), radial-gradient(#2a3a5a55 1px,transparent 1.2px) 0 0/22px 22px, var(--paper);background-attachment:fixed,fixed,scroll,scroll} h1,h2,h3{letter-spacing:-.02em} ::selection{background:#c6d5ec;color:#22314d} :focus-visible{outline:3px solid var(--brand-ink);outline-offset:3px;border-radius:10px} /* ---------------------------------------------------------------- header */ body>header{height:72px;padding:0 max(20px,calc((100vw - 1280px)/2));gap:18px;background:var(--header-bg); backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);border-bottom:1px solid var(--line)} .brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)} .brand .mark{width:42px;height:42px;border-radius:15px;flex:0 0 auto; background:linear-gradient(145deg,#fff 0,#e3ebf8 100%);box-shadow:var(--pop);position:relative} :root[data-theme=dark] .brand .mark{background:linear-gradient(145deg,#24314c,#18213a)} .brand-text{display:flex;flex-direction:column;line-height:1} .brand-word{font-family:var(--font-round);font-weight:600;font-size:23px;letter-spacing:-.01em;color:var(--brand-deep)} .brand-text small{font-family:var(--font-display);font-size:12px;letter-spacing:.02em;color:var(--muted);margin-top:4px;text-transform:none} body>header nav{gap:4px;padding:5px;border-radius:999px;background:var(--chip);box-shadow:var(--pop);border:1px solid var(--line)} body>header nav a{font-family:var(--font-display);font-size:15px;padding:8px 15px;border-radius:999px;color:var(--ink-2);border:0;line-height:1.2;letter-spacing:0} body>header nav a::after{display:none} body>header nav a:hover{background:var(--mist);color:var(--ink)} body>header nav a[aria-current]{background:var(--brand);color:#fff;border:0;box-shadow:0 6px 14px -6px #3d5d8daa} :root[data-theme=dark] body>header nav a[aria-current]{background:#5e7cad;color:#fff} .header-tools{gap:10px} .theme-toggle{width:42px;height:42px;border-radius:50%;background:var(--chip);border:1px solid var(--line);box-shadow:var(--pop);color:var(--brand-ink)} .header-me{height:42px;border-radius:999px;padding:0 14px 0 4px;background:var(--chip);border:1px solid var(--line);box-shadow:var(--pop);font-family:var(--font-display);font-size:14px;color:var(--ink);gap:8px} .header-me>.icon{margin-left:8px} .header-avatar{width:34px;height:34px;border-radius:50%;object-fit:cover} /* ---------------------------------------------------------------- page head */ main{padding-top:8px} #main .page-title{position:relative;display:grid;grid-template-columns:auto 1fr;grid-template-areas:"st eb" "st h1" "st p";column-gap:18px;align-items:center; padding:34px 0 26px;margin-bottom:22px;border-bottom:0} #main .page-title::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--stitch);opacity:.9} #main .page-sticker{grid-area:st;align-self:center} #main .page-title .eyebrow{grid-area:eb;font-family:var(--font-round);font-weight:600;font-size:12px;letter-spacing:.14em;color:var(--brand-ink);margin:0} #main .page-title .eyebrow::before{display:none} #main .page-title h1{grid-area:h1;font-family:var(--font-display);font-weight:400;font-size:clamp(30px,4.2vw,44px);line-height:1.15;margin:4px 0 2px;color:var(--ink);letter-spacing:-.01em} #main .page-title h1 .title-mark{width:.62em;height:.62em;margin-left:.18em;vertical-align:.05em} #main .page-title p{grid-area:p;margin:2px 0 0;color:var(--muted);font-size:14.5px;max-width:52ch;justify-self:start;text-align:left} .sticker{display:inline-grid;place-items:center;width:72px;height:72px;border-radius:24px; background:radial-gradient(120% 90% at 30% 15%,#ffffff8c 0,transparent 45%),linear-gradient(150deg,var(--st-a),var(--st-b)); box-shadow:0 1px 0 #ffffff99 inset,0 -3px 0 #00000014 inset,0 12px 22px -12px #2f4a7499;transform:rotate(-6deg);transition:transform .35s var(--ease)} .sticker svg{width:76%;height:76%;overflow:visible} .sticker .sticker-spark{opacity:.9} #main .page-title:hover .page-sticker{transform:rotate(3deg) scale(1.04)} #main .back-link{display:inline-flex;align-items:center;gap:6px;margin-top:22px;padding:7px 14px 7px 10px;border-radius:999px;background:var(--chip);border:1px solid var(--line);font-family:var(--font-display);font-size:14px;color:var(--ink-2);text-decoration:none;box-shadow:var(--pop)} #main .back-link+.page-title{padding-top:18px} /* ---------------------------------------------------------------- controls */ button,.button{font-family:inherit} main .toolbar input,#main #search{height:52px;border-radius:999px;border:1.5px solid var(--line);background-color:var(--surface);box-shadow:var(--pop);font-size:15px;padding-left:50px} main .toolbar input:focus{border-color:var(--brand);box-shadow:0 0 0 4px #89a4c933,var(--pop)} #main .tabs,#main .clip-kinds{display:flex;gap:6px;padding:5px;border-radius:999px;background:var(--mist);border:1px solid var(--line);width:max-content;max-width:100%;overflow-x:auto;scrollbar-width:none} #main .tabs button,#main .clip-kinds button{border:0;border-radius:999px;padding:9px 18px;background:transparent;color:var(--ink-2);font-family:var(--font-display);font-size:15px;box-shadow:none;transform:none;white-space:nowrap} #main .tabs button::after,#main .clip-kinds button::after{display:none} #main .tabs button.active,#main .tabs button[aria-pressed=true],#main .clip-kinds button[aria-pressed=true]{background:var(--surface);color:var(--brand-deep);box-shadow:var(--pop)} #main .tabs button small,#main .clip-kinds button small{font-family:var(--font-round);font-weight:600;font-size:11.5px;padding:2px 8px;border-radius:999px;background:var(--brand);color:#fff;margin-left:4px} #main .motion-toggle{border-radius:999px;border:1px solid var(--line);background:var(--chip);padding:7px 14px;font-size:12.5px;font-family:var(--font-display);color:var(--ink-2);box-shadow:var(--pop)} #main .pagination{display:flex;align-items:center;justify-content:center;gap:14px;margin:30px 0 10px;border:0} #main .pagination span{font-family:var(--font-round);font-weight:500;color:var(--muted);font-size:13px} #main .pagination button{border-radius:999px;padding:12px 26px;background:var(--surface);border:1.5px solid var(--brand-soft);color:var(--brand-deep);font-family:var(--font-display);font-size:15px;box-shadow:var(--pop)} #main .pagination button:hover{background:var(--brand);border-color:var(--brand);color:#fff} #main .empty{border-radius:var(--r-l);background:var(--surface);border:2px dashed var(--line-2);padding:46px 20px;text-align:center} #main .empty .symbol{width:64px;height:64px;margin:0 auto 12px;border-radius:22px;display:grid;place-items:center;font-size:26px;color:#fff;background:linear-gradient(150deg,var(--st-a),var(--st-b));transform:rotate(-6deg)} #main .empty h3{font-family:var(--font-display);font-weight:400;font-size:20px} #main .index-link{font-family:var(--font-display);font-size:14px;color:var(--brand-ink);display:inline-flex;align-items:center;gap:2px;padding:6px 12px;border-radius:999px;background:var(--mist);text-decoration:none} #main .index-link:hover{background:var(--brand);color:#fff} #main .index-head{display:flex;align-items:center;justify-content:space-between;gap:12px;border:0;padding:0;margin-bottom:14px} #main .index-head h2{font-family:var(--font-display);font-weight:400;font-size:24px;margin:0;color:var(--ink)} /* cards (clips, home reel) */ #main .cards{gap:22px} #main .card{background:var(--surface);border-radius:var(--r-m);padding:10px 10px 14px;box-shadow:var(--pop);border:1px solid var(--line-soft);transition:transform .3s var(--ease),box-shadow .3s} #main .card:hover{transform:translateY(-4px);box-shadow:var(--pop-2)} #main .card-image-wrap{border-radius:14px;overflow:hidden;background:var(--mist)} #main .card .play{width:40px;height:40px;border-radius:50%;background:#ffffffeb;color:var(--brand-deep);box-shadow:0 6px 16px -6px #0006;right:10px;bottom:10px} #main .card h3{font-family:var(--font-body);font-weight:700;font-size:14.5px;line-height:1.45;margin:12px 4px 4px;color:var(--ink)} #main .card small{margin:0 4px;color:var(--muted);font-family:var(--font-round);font-size:12.5px} /* ---------------------------------------------------------------- home */ #main .home-folio{padding-top:10px} #main .folio{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(24px,4vw,64px);align-items:center;min-height:auto;padding:36px 0 30px;border:0} #main .folio-text{position:relative;z-index:2} #main .folio-kicker{display:inline-flex;gap:10px;align-items:center;padding:7px 14px;border-radius:999px;background:var(--chip);border:1px solid var(--line);box-shadow:var(--pop);font-family:var(--font-round);font-weight:600;font-size:11.5px;letter-spacing:.12em;color:var(--brand-ink);margin:0 0 22px} #main .folio-kicker span+span::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--blush);margin-right:10px;vertical-align:2px} #main .folio-kicker span+span{border:0;padding:0} #main .folio-kicker span:first-child::after{display:none} #main #folio-title{margin:0;display:flex;flex-direction:column;gap:6px} #main .folio-word{font-family:var(--font-round);font-weight:600;font-style:normal;font-size:clamp(64px,9vw,124px);line-height:.92;letter-spacing:-.035em;color:var(--brand-deep); background:linear-gradient(170deg,#6f8fc0 0,#89a4c9 45%,#b3a6de 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;position:relative;display:inline-block;width:max-content} :root[data-theme=dark] #main .folio-word{background:linear-gradient(170deg,#cfe0fa 0,#a9c0e2 50%,#c7b9f0 100%);-webkit-background-clip:text;background-clip:text} #main .folio-word .masthead-mark{-webkit-text-fill-color:initial;width:.36em;height:.36em;position:absolute;right:-.3em;top:-.06em;transform:rotate(14deg)} #main .folio-ko{font-family:var(--font-display);font-size:clamp(24px,2.6vw,34px);color:var(--ink);letter-spacing:-.01em;margin-top:4px} #main .folio-lede{margin:18px 0 0;padding:0;border:0;font-size:16px;line-height:1.8;color:var(--ink-2)} #main .folio-lede::before{display:none} #main .folio-meta{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:26px} #main .folio-meta .motion-toggle{margin:0} #main .today-stamp{display:inline-flex;align-items:center;gap:12px;margin:0;padding:6px 16px 6px 6px;border-radius:18px;background:var(--cream);border:1.5px dashed #e7c9a3;font-family:var(--font-display);font-size:15px;color:var(--ink-2);transform:rotate(-1.5deg)} :root[data-theme=dark] #main .today-stamp{border-color:#6b5638} #main .today-stamp-date{display:grid;place-items:center;width:58px;height:52px;border-radius:13px;background:var(--surface);box-shadow:var(--pop);line-height:1} #main .today-stamp-date small{font-family:var(--font-round);font-weight:600;font-size:9px;letter-spacing:.14em;color:var(--blush-ink)} #main .today-stamp-date b{font-family:var(--font-round);font-weight:600;font-size:20px;color:var(--brand-deep)} #main .today-stamp em{font-style:normal;padding:2px 9px;border-radius:999px;background:var(--brand);color:#fff;font-size:13px} #main .today-stamp em.off{background:var(--mist-2);color:var(--ink-2)} #main .folio-figure{position:relative;margin:0;padding:0 0 0 28px} #main .folio-figure::before{content:"";position:absolute;inset:6% -4% -4% 12%;border-radius:48% 52% 44% 56%/52% 46% 54% 48%;background:linear-gradient(160deg,#dbe6f6,#e9e2f8);z-index:0} :root[data-theme=dark] #main .folio-figure::before{background:linear-gradient(160deg,#1d2a45,#272442)} #main .folio-photo{position:relative;z-index:1;aspect-ratio:5/6;max-height:640px;border-radius:999px 999px 34px 34px;overflow:hidden;border:8px solid var(--surface);box-shadow:var(--pop-2);background:var(--mist)} #main .folio-photo video,#main .folio-photo img{width:100%;height:100%;object-fit:cover;object-position:var(--fx,50%) var(--fy,50%)} #main .folio-inset{position:absolute;z-index:3;left:-2%;bottom:9%;width:34%;aspect-ratio:4/5;border-radius:10px;overflow:visible;background:var(--surface);padding:8px 8px 26px;box-shadow:var(--pop-2);transform:rotate(-7deg);transition:transform .45s var(--ease);border:0} #main .folio-inset::before{content:"";position:absolute;top:-12px;left:50%;width:70px;height:22px;transform:translateX(-50%) rotate(4deg);background:#c6d5ecd9;border-radius:3px;box-shadow:0 1px 2px #0001;z-index:2} :root[data-theme=dark] #main .folio-inset::before{background:#4a6187cc} #main .folio-inset video,#main .folio-inset img{width:100%;height:100%;object-fit:cover;border-radius:4px;object-position:var(--fx,50%) var(--fy,50%)} #main .folio-figure:hover .folio-inset{transform:rotate(-2deg) translateY(-6px)} #main .folio-figure figcaption{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;margin-top:14px;padding-left:28%;font-family:var(--font-round);font-weight:600;font-size:11px;letter-spacing:.16em;color:var(--muted)} #main .folio-credit{font-family:var(--font-display);letter-spacing:0;font-size:12.5px;padding:5px 11px;border-radius:999px;background:var(--chip);border:1px solid var(--line);color:var(--ink-2);display:inline-flex;align-items:center;gap:4px;text-decoration:none} #main .folio-sparkles{position:absolute;inset:0;pointer-events:none;z-index:4} #main .folio-sparkles i{position:absolute;width:18px;height:18px;background:var(--butter);clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);animation:ch-twinkle 3.2s ease-in-out infinite} :root:not([data-theme=dark]) #main .folio-sparkles i{background:#ffd877} #main .folio-sparkles i:nth-child(1){top:4%;right:8%} #main .folio-sparkles i:nth-child(2){top:38%;right:-1%;width:12px;height:12px;animation-delay:-1.1s} #main .folio-sparkles i:nth-child(3){bottom:20%;left:30%;width:10px;height:10px;animation-delay:-2s;background:#fff} @keyframes ch-twinkle{0%,100%{transform:scale(.7) rotate(0);opacity:.6}50%{transform:scale(1.15) rotate(20deg);opacity:1}} .is-still .folio-sparkles i,body.motion-paused .folio-sparkles i{animation:none} @media (prefers-reduced-motion:reduce){#main .folio-sparkles i{animation:none}.sticker,#main .card,#main .folio-inset{transition:none}} #main .folio-index{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:22px;margin:26px 0 0;border:0;padding:0} #main .folio-index>section{background:var(--surface);border-radius:var(--r-l);padding:24px 24px 22px;box-shadow:var(--pop);border:1px solid var(--line-soft);position:relative} #main .index-next{display:flex;flex-direction:column;gap:16px} #main .index-next .index-empty{margin:0;padding:12px 16px;border-radius:14px;background:var(--mist);color:var(--ink-2);font-size:14px} #main .next-entry{display:flex;align-items:center;gap:14px;padding:12px;border-radius:16px;background:var(--cream)} #main .next-entry .next-date span{font-family:var(--font-round);font-weight:600} #main .next-entry h3{border-left:0 !important;padding:0;font-family:var(--font-body);font-weight:700;font-size:15px} #main .month-widget{display:block;text-decoration:none;color:var(--ink);border-radius:18px;padding:14px 14px 10px;background:linear-gradient(180deg,var(--mist) 0,transparent 90%);border:1px solid var(--line);transition:transform .3s var(--ease),box-shadow .3s} #main .month-widget:hover{transform:translateY(-3px);box-shadow:var(--pop)} #main .month-widget-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:8px} #main .month-widget-head b{font-family:var(--font-display);font-weight:400;font-size:22px;color:var(--brand-deep)} #main .month-widget-head small{font-family:var(--font-display);font-size:13px;color:var(--muted)} #main .month-widget-days{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;text-align:center} #main .month-widget-days em,#main .month-widget-days i{font-style:normal;font-family:var(--font-round);font-size:12px;line-height:28px;height:28px;border-radius:9px;position:relative;color:var(--ink-2)} #main .month-widget-days em{color:var(--muted);font-weight:600;font-size:11px;font-family:var(--font-display)} #main .month-widget-days i.sun{color:#c2556b} :root[data-theme=dark] #main .month-widget-days i.sun{color:#f08a98} #main .month-widget-days i.on{background:#89a4c92e;color:var(--brand-deep);font-weight:600} #main .month-widget-days i.on::after{content:"";position:absolute;left:50%;bottom:2px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--brand-ink)} #main .month-widget-days i.off::after{content:"";position:absolute;left:50%;bottom:2px;width:4px;height:4px;margin-left:-2px;border-radius:50%;border:1px solid var(--muted);box-sizing:border-box} #main .month-widget-days i.today{background:var(--brand);color:#fff;font-weight:700} #main .month-widget-days i.today::after{background:#fff} #main .letters{list-style:none;margin:0;padding:0;display:grid;gap:10px} #main .letter{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:14px;padding:14px 16px;border-radius:16px;background:var(--paper);border:1px solid var(--line-soft);cursor:pointer;position:relative;transition:transform .25s var(--ease),background .2s} #main .letter::before{content:"";width:38px;height:28px;border-radius:7px;background:var(--surface);border:1.5px solid var(--brand-soft); background-image:linear-gradient(155deg,transparent 47%,var(--brand-soft) 48%,var(--brand-soft) 52%,transparent 53%),linear-gradient(25deg,transparent 47%,var(--brand-soft) 48%,var(--brand-soft) 52%,transparent 53%);background-size:50% 70%;background-position:0 0,100% 0;background-repeat:no-repeat} #main .letter time{position:absolute;right:16px;top:50%;transform:translateY(-50%);font-family:var(--font-round);font-size:12px;color:var(--muted);border:0;padding:0} #main .letter h3{font-family:var(--font-body);font-weight:700;font-size:15px;margin:0;padding-right:84px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink)} #main .letter:hover{transform:translateX(4px);background:var(--mist)} #main .index-letters .source-links{margin-top:12px} #main .home-folio .channels{margin-top:22px;padding:0;border:0} #main .channel-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;list-style:none;margin:0;padding:0;border:0} #main .channel-list li{border:0;padding:0} #main .channel-list a{display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:auto auto;align-items:center;column-gap:12px;padding:14px 16px;border-radius:18px;background:var(--surface);border:1px solid var(--line-soft);box-shadow:var(--pop);text-decoration:none;color:var(--ink);transition:transform .3s var(--ease)} #main .channel-list a::before{content:"";grid-row:1/3;width:40px;height:40px;border-radius:14px;background:radial-gradient(circle at 35% 30%,#ffffffa0 0,transparent 40%),linear-gradient(150deg,var(--st-a),var(--st-b));box-shadow:0 8px 16px -10px #2f4a74aa} #main .channel-list li:nth-child(2) a::before{background:radial-gradient(circle at 35% 30%,#ffffffa0 0,transparent 40%),linear-gradient(150deg,#f4bcb3,#e2919c)} #main .channel-list li:nth-child(3) a::before{background:radial-gradient(circle at 35% 30%,#ffffffa0 0,transparent 40%),linear-gradient(150deg,#c4b6ec,#9d8fd4)} #main .channel-list a:hover{transform:translateY(-3px) rotate(-.6deg)} #main .channel-name{font-family:var(--font-display);font-size:17px;grid-column:2} #main .channel-list small{grid-column:2;color:var(--muted);font-family:var(--font-round);font-size:12.5px} #main .channel-list .icon{grid-column:3;grid-row:1/3;color:var(--muted)} #main .refrain{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(24px,4vw,56px);align-items:center;margin:54px 0 0;padding:0;border:0;background:none} #main .refrain.no-art{grid-template-columns:1fr} #main .refrain-art{position:relative;border-radius:22px;overflow:visible;aspect-ratio:16/10;background:var(--surface);padding:10px;box-shadow:var(--pop-2);transform:rotate(-1.5deg)} #main .refrain-art video,#main .refrain-art img{width:100%;height:100%;object-fit:cover;border-radius:14px;object-position:var(--fx,50%) var(--fy,50%)} #main .refrain-art::before{content:"";position:absolute;top:-10px;left:18px;width:84px;height:22px;background:#f5c9c1cc;transform:rotate(-8deg);border-radius:3px;z-index:2} #main .refrain-art .folio-credit{position:absolute;right:20px;bottom:20px} #main .refrain-text{padding:30px 32px;border-radius:var(--r-l);background:var(--cream);border:1.5px dashed #e7c9a3} :root[data-theme=dark] #main .refrain-text{border-color:#6b5638} #main .refrain-text .eyebrow{font-family:var(--font-round);font-weight:600;font-size:11.5px;letter-spacing:.14em;color:var(--blush-ink)} #main .refrain-text h2{font-family:var(--font-display);font-weight:400;font-size:clamp(28px,3vw,38px);line-height:1.3;margin:10px 0 18px;color:var(--ink)} #main .home-folio .reel{margin-top:56px;padding:0;border:0} #main .home-reel{grid-template-columns:repeat(3,minmax(0,1fr))} #main .home-folio [data-youtube]{margin-top:56px} #main .folio-colophon{display:flex;justify-content:center;align-items:center;gap:12px;margin:56px 0 10px;padding:16px;border-radius:999px;background:var(--chip);border:1px solid var(--line);width:max-content;max-width:100%;margin-inline:auto;font-family:var(--font-display);font-size:14px;flex-wrap:wrap} #main .folio-colophon a{color:var(--ink-2);display:inline-flex;align-items:center;gap:4px;text-decoration:none;letter-spacing:0} #main .colophon-mark{width:22px;height:22px} /* YouTube section */ #main .yt{padding:0;border:0} #main .yt-channel{background:var(--surface);border-radius:var(--r-l);padding:18px;box-shadow:var(--pop);border:1px solid var(--line-soft)} #main .yt-channel-name{font-family:var(--font-display);font-size:18px;border:0 !important;padding-bottom:6px} #main .yt-thumb{border-radius:14px;overflow:hidden} #main .yt-title{font-weight:700;font-size:14px} #main .yt-kind{border-radius:999px !important;background:#22314dd9 !important;font-family:var(--font-round)} /* ---------------------------------------------------------------- diary (practical) */ #main .diary-book{background:var(--surface);border-radius:var(--r-l);padding:20px 22px 22px;box-shadow:var(--pop);border:1px solid var(--line-soft)} #main .calendar-head{border:0 !important;padding:0 0 14px !important;margin:0 !important;align-items:center} #main .month-title{display:flex;align-items:baseline;gap:8px;margin:0} #main .month-title em{font-family:var(--font-round);font-weight:600;font-style:normal;font-size:52px;line-height:1;color:var(--brand-deep)} #main .month-title span{font-family:var(--font-round);font-weight:500;font-size:16px;color:var(--muted);letter-spacing:.06em} #main .month-stepper button,#main .week-navigation button{width:38px;height:38px;border-radius:50%;background:var(--mist);border:0;color:var(--brand-deep);font-size:16px} #main .month-stepper button:hover:not(:disabled){background:var(--brand);color:#fff} #main .calendar-tools button{border-radius:999px;padding:8px 14px;background:var(--mist);border:0;font-family:var(--font-display);font-size:14px;color:var(--ink-2)} #main .monthly-calendar{border-radius:18px;overflow:hidden;border:1px solid var(--line);gap:0;background:var(--line)} #main .monthly-calendar .day-label{background:var(--mist);font-family:var(--font-display);font-size:13px;color:var(--ink-2);padding:9px 12px;border:0} #main .monthly-calendar .day-label.sunday{color:#c2556b}#main .monthly-calendar .day-label.saturday{color:#3d6fb8} :root[data-theme=dark] #main .monthly-calendar .day-label.sunday{color:#f08a98}:root[data-theme=dark] #main .monthly-calendar .day-label.saturday{color:#8cb2ec} #main .monthly-calendar .day{border:0;border-radius:0;box-shadow:none;transform:none;background:var(--surface)} #main .monthly-calendar .day:hover:not(:disabled){background:var(--mist)} #main .monthly-calendar .day.other{background:var(--paper)} #main .monthly-calendar .day.today{box-shadow:inset 0 0 0 2px var(--brand)} #main .monthly-calendar .day-number{font-family:var(--font-round);font-weight:600;font-size:15px} #main .monthly-calendar .day.today .day-number{background:var(--brand);color:#fff;border-radius:50%;box-shadow:none} #main .broadcast-badge{font-family:var(--font-display);font-size:11px;border-radius:999px;padding:1px 7px;background:#89a4c933;color:var(--brand-deep);border:0} #main .broadcast-badge.off{background:var(--mist);color:var(--muted)} #main .week-strip button[aria-pressed=true]{background:var(--brand);color:#fff;border-radius:16px;box-shadow:0 8px 16px -8px #3d5d8dbb} #main .day-feature{border-radius:var(--r-m);background:var(--paper);border:1px solid var(--line-soft)} #main .day-feature-heading h2{font-family:var(--font-display);font-weight:400} /* ---------------------------------------------------------------- notices (practical) */ #main .notice-row{background:var(--surface);border-radius:var(--r-m);border:1px solid var(--line-soft);box-shadow:var(--pop);padding:18px 20px;transition:transform .25s var(--ease),box-shadow .25s} #main .notice-row:hover{transform:translateY(-3px);box-shadow:var(--pop-2)} #main .notice-row .letter-number{display:inline-block;font-family:var(--font-round);font-weight:600;font-size:13px;letter-spacing:.04em;padding:3px 10px;border-radius:999px;background:var(--mist);color:var(--brand-deep)} #main .notice-row h3{font-family:var(--font-body);font-weight:700;font-size:17px;line-height:1.5;margin:10px 0 6px;color:var(--ink)} #main .notice-row small{font-family:var(--font-round);color:var(--muted);font-size:12px} #main .notice-row .source-links a,#main .source-links a{display:inline-flex;align-items:center;padding:3px 10px;border-radius:999px;border:1px solid var(--line);font-family:var(--font-display);font-size:12.5px;color:var(--ink-2);text-decoration:none;margin-right:6px} #main .notice-arrow{width:34px;height:34px;border-radius:50%;background:var(--mist);display:grid;place-items:center;color:var(--brand-deep)} /* clips */ #main .clip-song-link{font-size:13.5px;color:var(--muted)} #main .clip-song-link a{color:var(--brand-ink);font-weight:700} /* ---------------------------------------------------------------- songs (practical) */ #main .song-row{background:var(--surface);border-radius:18px;border:1px solid var(--line-soft);box-shadow:var(--pop);padding:12px 14px;margin-bottom:10px} #main .song-row .number{font-family:var(--font-round);font-weight:600;font-size:13px;color:var(--brand-ink);width:34px;height:34px;border-radius:12px;background:var(--mist);display:grid;place-items:center} #main .song-row h3{font-family:var(--font-body);font-weight:700;font-size:16px;color:var(--ink)} #main .song-row small{color:var(--muted)} #main .song-row [data-selected-play],#main .song-row [data-play]{border-radius:50%;background:var(--brand);color:#fff;border:0;box-shadow:0 6px 14px -6px #3d5d8daa} #main .song-row .heart{border-radius:50%;background:var(--mist);border:0;color:var(--blush-ink)} #main .song-row .heart[aria-pressed=true]{background:var(--blush);color:#a4525f} #main .date-picker summary{border-radius:999px;background:var(--paper);border:1px solid var(--line);font-family:var(--font-round);font-size:12.5px} #main .song-divider{font-family:var(--font-display);font-weight:400} #main .library-side{border-radius:var(--r-l);background:var(--surface);box-shadow:var(--pop);border:1px solid var(--line-soft)} #main .hint{border-radius:14px;background:var(--mist);color:var(--ink-2);padding:12px 16px;border:0;font-size:13px} /* ---------------------------------------------------------------- gallery (playful) */ #main .gallery-filters{gap:6px;padding:5px;border-radius:999px;background:var(--mist);border:1px solid var(--line);width:max-content;max-width:100%;overflow-x:auto;scrollbar-width:none;flex-wrap:nowrap} #main .gallery-filters button,#main .gallery-filters a{border-radius:999px;border:0;padding:8px 16px;font-family:var(--font-display);font-size:14.5px;white-space:nowrap;background:transparent;color:var(--ink-2)} #main .gallery-filters [aria-pressed=true],#main .gallery-filters [aria-current]{background:var(--surface);color:var(--brand-deep);box-shadow:var(--pop)} #main .gallery-wall .tile-frame{background:var(--surface);padding:8px 8px 0;border-radius:10px;box-shadow:var(--pop);transition:transform .4s var(--ease),box-shadow .4s} #main .tile-caption{font-family:var(--font-display);font-size:13px} #main .tile-no{font-family:var(--font-round)} @media (prefers-reduced-motion:reduce){#main .gallery-wall .tile-frame{transition:none}} /* ---------------------------------------------------------------- hub / about / games (playful) */ #main .hub{border:0;padding:0;margin-bottom:30px} #main .hub-heading{font-family:var(--font-display);font-weight:400;font-size:20px;border:0 !important;padding:0;margin:0 0 14px;color:var(--ink);text-transform:none;letter-spacing:0} #main .hub-index{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;list-style:none;margin:0;padding:0;border:0} #main .hub-index li{border:0;padding:0} #main .hub-row{display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:auto auto;column-gap:14px;align-items:center;padding:18px 18px;border-radius:var(--r-m);background:var(--surface);border:1px solid var(--line-soft);box-shadow:var(--pop);text-decoration:none;color:var(--ink);transition:transform .3s var(--ease),box-shadow .3s} #main .hub-row:hover{transform:translateY(-4px) rotate(-.5deg);box-shadow:var(--pop-2)} #main .hub-no{grid-row:1/3;width:46px;height:46px;border-radius:16px;display:grid;place-items:center;font-family:var(--font-round);font-weight:600;font-size:15px;color:#fff;background:linear-gradient(150deg,var(--st-a),var(--st-b));transform:rotate(-6deg)} #main .hub-name{font-family:var(--font-display);font-size:19px} #main .hub-line{grid-column:2;color:var(--muted);font-size:13px} #main .hub-row .icon{grid-column:3;grid-row:1/3;color:var(--brand-ink)} #hub-inside+.hub-index .hub-row{padding:24px 22px;background:linear-gradient(150deg,var(--surface) 55%,var(--mist))} #hub-inside+.hub-index .hub-no{width:58px;height:58px;font-size:18px;border-radius:20px} #hub-inside+.hub-index .hub-name{font-size:23px} #main .about-hero{gap:clamp(20px,3vw,40px);padding:24px 0 0;border:0} #main .about-text .eyebrow{font-family:var(--font-round);font-weight:600;letter-spacing:.14em;color:var(--brand-ink);font-size:12px} #main .about-hero .folio-word{font-size:clamp(56px,7vw,96px)} #main .about-lede{font-size:16px;line-height:1.8;color:var(--ink-2);border:0;padding:0} #main .about-art{border-radius:24px;background:var(--surface);padding:10px;box-shadow:var(--pop-2);transform:rotate(1.5deg)} #main .about-art video,#main .about-art img{border-radius:16px;object-position:var(--fx,50%) var(--fy,50%)} #main .fact-sheet{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;border:0;padding:0;margin-top:8px} #main .fact-sheet>div{background:var(--surface);border-radius:18px;padding:16px 18px;border:1px solid var(--line-soft);box-shadow:var(--pop)} #main .fact-sheet dt{font-family:var(--font-display);font-size:13px;color:var(--muted);text-transform:none;letter-spacing:0} #main .fact-sheet .fact-main{font-family:var(--font-round);font-weight:600;font-size:20px;color:var(--ink)} #main .fact-sheet .fact-sub{font-family:var(--font-round);color:var(--muted)} #main .swatch{width:22px;height:22px;border-radius:50%;box-shadow:0 0 0 3px var(--surface),0 0 0 4px var(--line-2)} #main .about-numbers{margin-top:26px;border:0;padding:0} #main .about-numbers dl{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;border:0} #main .about-numbers dl>div{border-radius:22px;padding:18px;background:var(--cream);border:1.5px dashed #e7c9a3;text-align:center} :root[data-theme=dark] #main .about-numbers dl>div{border-color:#6b5638} #main .about-numbers dt{font-family:var(--font-display);font-size:14px;color:var(--ink-2)} #main .about-numbers dd{font-family:var(--font-round);font-weight:600;font-size:34px;color:var(--brand-deep);margin:4px 0 0} #main .about-note{color:var(--muted);font-size:13px;text-align:center} #main .game-room-entry{border-radius:var(--r-l);background:linear-gradient(150deg,var(--surface) 40%,var(--mist));border:1px solid var(--line-soft);box-shadow:var(--pop);transition:transform .3s var(--ease)} #main .game-room-entry:hover{transform:translateY(-4px)} #main .game-room-title{font-family:var(--font-display);font-size:24px} #main .game-card{border-radius:var(--r-m);background:var(--surface);border:1px solid var(--line-soft);box-shadow:var(--pop)} #main .game-card h2{font-family:var(--font-display);font-weight:400} #main .game-card.is-soon{background:var(--paper);border:2px dashed var(--line-2);box-shadow:none} #main .game-cta{font-family:var(--font-display)} /* ---------------------------------------------------------------- drawer, dialogs, toast, player */ .drawer-sheet{border-radius:28px 0 0 28px;background:var(--surface)} .drawer-head h2{font-family:var(--font-display);font-weight:400;font-size:22px} .drawer-close,.dialog-close{border-radius:50%;background:var(--mist);border:0} .drawer-row,.drawer-links a,.drawer-links button{border-radius:16px} .drawer-row span,.drawer-links span{font-family:var(--font-display);font-size:16px} dialog#dialog{border-radius:var(--r-l);border:0;box-shadow:var(--pop-2)} #toast{border-radius:999px;background:var(--ink);color:var(--paper);font-family:var(--font-display);box-shadow:var(--pop-2)} #player{border-radius:24px;box-shadow:var(--pop-2);border:1px solid var(--line)} /* ---------------------------------------------------------------- footer */ body>footer{border-top:0;background:transparent;font-size:12.5px;color:var(--muted);position:relative} body>footer::before{content:"";position:absolute;left:5%;right:5%;top:0;height:2px;background:var(--stitch)} body>footer span:first-child{font-family:var(--font-display);font-size:14px;color:var(--ink-2)} .footer-legal a{font-family:var(--font-display)} /* ---------------------------------------------------------------- loading */ .boot p{font-family:var(--font-display);color:var(--muted)} /* ---------------------------------------------------------------- responsive */ @media (max-width:1100px){ body>header nav a{padding:8px 11px;font-size:14px} } @media (max-width:860px){ #main .folio{grid-template-columns:1fr;padding-top:18px} #main .folio-figure{padding:0 6px 0 18px;max-width:560px;margin:0 auto;width:100%} #main .folio-index{grid-template-columns:1fr} #main .refrain{grid-template-columns:1fr} #main .home-reel{grid-template-columns:repeat(2,minmax(0,1fr))} #main .about-numbers dl{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:700px){ body>header{height:auto;padding:10px 14px 0;row-gap:8px} .brand .mark{width:36px;height:36px;border-radius:13px} .brand-word{font-size:20px} body>header nav{order:3;width:100%;justify-content:flex-start;overflow-x:auto;scrollbar-width:none;padding:4px;margin:0 0 8px;border-radius:999px} body>header nav::-webkit-scrollbar{display:none} body>header nav a{padding:7px 12px;font-size:14px;flex:0 0 auto} .theme-toggle{width:38px;height:38px} .header-me{height:38px;width:38px;padding:0;justify-content:center} .header-me>span{display:none} .header-me>.icon{margin:0} .header-avatar{width:32px;height:32px} #main .page-title{grid-template-columns:auto 1fr;grid-template-areas:"st eb" "st h1" "p p";column-gap:14px;padding:24px 0 20px} #main .page-title p{margin-top:10px;font-size:13.5px} .sticker{width:56px;height:56px;border-radius:19px} #main .folio-word{font-size:clamp(60px,19vw,86px)} #main .folio-photo{border-width:6px;aspect-ratio:4/5} #main .folio-photo video,#main .folio-photo img,#main .folio-inset video,#main .folio-inset img,#main .refrain-art video,#main .refrain-art img,#main .about-art video,#main .about-art img{object-position:var(--mfx,var(--fx,50%)) var(--mfy,var(--fy,50%))} #main .folio-inset{width:38%;left:-4px;bottom:7%} #main .folio-figure figcaption{padding-left:36%;font-size:10px} #main .folio-index>section{padding:18px 16px} #main .letter{padding:12px 12px;gap:10px} #main .letter::before{width:32px;height:24px} #main .letter h3{font-size:14px;padding-right:70px} #main .refrain{margin-top:36px} #main .refrain-text{padding:22px 20px} #main .home-folio .reel,#main .home-folio [data-youtube]{margin-top:40px} #main .home-reel{grid-template-columns:1fr 1fr;gap:12px} #main .home-reel .card:nth-child(3){display:none} #main .cards{gap:12px} #main .card{padding:7px 7px 11px;border-radius:16px} #main .card h3{font-size:13.5px;margin:9px 3px 3px} #main .diary-book{padding:14px 12px;border-radius:22px} #main .notice-row{padding:15px 16px} #main .notice-row h3{font-size:16px} #main .song-row{padding:10px 10px} #main .folio-colophon{border-radius:22px} .drawer-sheet{border-radius:26px 26px 0 0} #main .about-numbers dd{font-size:28px} } @media (max-width:380px){ body>header nav a{padding:7px 10px;font-size:13.5px} #main .page-title h1{font-size:28px} } /* ================================================================ iteration 1 fixes (screens it1) */ /* header pill nav: no inherited 29px link padding / stretched height */ body>header nav{height:auto;align-items:center;align-self:center} body>header nav a{display:inline-flex;align-items:center;height:auto;min-height:34px;padding:7px 15px} /* page head: sticker | eyebrow / title / line, all left aligned */ #main .page-title h1{grid-area:h1;grid-column:auto;display:flex;align-items:center;gap:.25em;justify-content:flex-start} #main .page-title p{grid-area:p;grid-column:auto;text-align:left} #main .page-title .eyebrow{grid-column:auto} /* old decorative panel behind the refrain */ #main .refrain::before,#main .refrain::after{display:none} #main .refrain{position:relative} /* notices: one stitched letter list (no card grid); the first letter is the featured one */ #main[data-view=notices] [data-results]{display:block!important} #main .notice-row{background:transparent;border:0;border-radius:18px;box-shadow:none;padding:16px 14px;margin:0;min-height:0;position:relative;display:flex;align-items:center;gap:14px} #main .notice-row::after{content:"";position:absolute;left:14px;right:14px;bottom:0;height:2px;background:var(--stitch);opacity:.7} #main .notice-row:hover{background:var(--surface);transform:none;box-shadow:var(--pop)} #main .notice-row:hover::after{opacity:0} #main .notice-row>div{flex:1;min-width:0;display:grid;grid-template-columns:72px minmax(0,1fr);grid-template-areas:"stamp title" "stamp meta" "stamp src";column-gap:16px;row-gap:3px;align-items:center} #main .notice-row .letter-number{grid-area:stamp;align-self:start;display:grid;place-items:center;width:64px;height:64px;padding:0;border-radius:12px;background:var(--surface);color:var(--brand-deep);font-family:var(--font-round);font-weight:600;font-size:16px;letter-spacing:0; box-shadow:0 0 0 3px var(--surface),0 0 0 4.5px var(--brand-soft),var(--pop); -webkit-mask:radial-gradient(circle 3px at 3px 3px,#0000 98%,#000) -3px -3px/8px 8px;mask:radial-gradient(circle 3.2px,#0000 96%,#000) -4px -4px/8px 8px round} #main .notice-row h3{grid-area:title;margin:0;font-size:16.5px;line-height:1.45;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical} #main .notice-row small{grid-area:meta} #main .notice-row .source-links{grid-area:src;margin:2px 0 0} #main .notice-row .source-links a{padding:2px 9px;font-size:12px;background:var(--surface)} #main .notice-arrow{flex:0 0 auto} #main[data-view=notices] [data-results]>.notice-row:first-child{background:linear-gradient(140deg,var(--cream),var(--surface) 70%);border:1.5px dashed #e7c9a3;padding:22px 20px;margin-bottom:10px;border-top:1.5px dashed #e7c9a3} :root[data-theme=dark] #main[data-view=notices] [data-results]>.notice-row:first-child{border-color:#6b5638} #main[data-view=notices] [data-results]>.notice-row:first-child::after{display:none} #main[data-view=notices] [data-results]>.notice-row:first-child .letter-number{width:78px;height:78px;font-size:19px;background:var(--surface)} #main[data-view=notices] [data-results]>.notice-row:first-child>div{grid-template-columns:86px minmax(0,1fr)} #main[data-view=notices] [data-results]>.notice-row:first-child h3{font-size:20px} /* songs: a track list on one sheet, rows separated by stitches */ #main .song-row{background:transparent;box-shadow:none;border:0;border-radius:16px;margin:0;position:relative} #main .song-row::after{content:"";position:absolute;left:12px;right:12px;bottom:0;height:2px;background:var(--stitch);opacity:.6} #main .song-row:hover{background:var(--surface);box-shadow:var(--pop)} #main .song-row:hover::after{opacity:0} #main .library-main{background:var(--chip);border-radius:var(--r-l);padding:10px 12px;border:1px solid var(--line-soft);box-shadow:var(--pop)} /* home reel cards: no fixed gaps between title and date */ #main .card h3{min-height:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} #main .card small{display:block;margin-top:2px} /* ================================================================ iteration 2 fixes (screens it2) */ /* contrast: white text needs the deeper chaenna blue (#89A4C9 stays the decorative brand colour) */ :root{--brand-press:#52729c} :root[data-theme=dark]{--brand-press:#5d7cab} body>header nav a[aria-current],:root[data-theme=dark] body>header nav a[aria-current]{background:var(--brand-press)} #main .tabs button small,#main .clip-kinds button small,#main .today-stamp em,#main .month-widget-days i.today{background:var(--brand-press)} #main .song-row [data-selected-play],#main .song-row [data-play]{background:var(--brand-press)} #main .monthly-calendar .day.today .day-number{background:var(--brand-press)} #main .week-strip button[aria-pressed=true]{background:var(--brand-press)} #main .index-link:hover,#main .pagination button:hover{background:var(--brand-press);border-color:var(--brand-press)} /* the songs selection bar is [hidden] until songs are picked; the old display:flex showed an empty bar at the bottom */ .select-bar[hidden],.library-status[hidden]{display:none!important} /* notice date stamp: a perforated postage stamp drawn with a dashed ring (no mask, the text stays crisp) */ #main .notice-row .letter-number{-webkit-mask:none;mask:none;box-shadow:var(--pop);border:2px dashed var(--brand-soft);outline:3px solid var(--surface);outline-offset:-6px;font-size:15px} /* the week strip's 오늘 is a word button, not a round arrow */ #main .week-navigation [data-diary-today]{width:auto;height:34px;padding:0 14px;border-radius:999px;font-family:var(--font-display);font-size:13.5px} /* folio kicker never breaks into a box */ #main .folio-kicker{white-space:nowrap;max-width:100%} @media (max-width:700px){ body>header nav a{padding:6px 12px;min-height:32px;font-size:14px} #main .folio-kicker{font-size:10px;letter-spacing:.08em;padding:6px 12px;gap:8px;margin-bottom:16px} #main .notice-row{padding:14px 6px;gap:10px} #main .notice-row>div{grid-template-columns:56px minmax(0,1fr);column-gap:12px} #main .notice-row .letter-number{width:54px;height:54px;font-size:13px} #main[data-view=notices] [data-results]>.notice-row:first-child{padding:18px 14px} #main[data-view=notices] [data-results]>.notice-row:first-child>div{grid-template-columns:64px minmax(0,1fr)} #main[data-view=notices] [data-results]>.notice-row:first-child .letter-number{width:62px;height:62px;font-size:15px} #main[data-view=notices] [data-results]>.notice-row:first-child h3{font-size:18px} #main .notice-row h3{font-size:15.5px} #main .notice-arrow{display:none} #main .library-main{padding:6px 4px} } /* ================================================================ iteration 3 fixes (screens it3) */ /* fixed sticker track: a spanning description must not widen the sticker column */ #main .page-title{grid-template-columns:72px minmax(0,1fr)} #main .page-title>*{justify-self:start;text-align:left} #main .page-title h1{justify-content:flex-start;width:auto} #main .page-title h1 .title-mark{margin-left:.12em;flex:0 0 auto} #main .folio-credit{white-space:nowrap} @media (max-width:700px){ #main .page-title{grid-template-columns:56px minmax(0,1fr)} #main .page-title h1{font-size:28px} #main .page-title .eyebrow{font-size:10.5px;letter-spacing:.1em} #main .folio-figure figcaption{justify-content:flex-end;padding-left:0} #main .folio-figure figcaption>span{display:none} } @media (max-width:700px){ #main .page-title{grid-template-areas:"st eb" "st h1" "p p"} #main .page-title p{grid-column:1/-1} } /* a page head without a sticker (fallback) keeps one column */ #main .page-title:not(:has(.page-sticker)){grid-template-columns:minmax(0,1fr);grid-template-areas:"eb" "h1" "p"} /* ================================================================ admin */ #main #admin-panel .admin-stats{display:flex;gap:12px;margin:0 0 16px} #main #admin-panel .admin-stats span{display:flex;align-items:baseline;gap:6px;padding:12px 18px;border-radius:18px;background:var(--surface);border:1px solid var(--line-soft);box-shadow:var(--pop);font-family:var(--font-display);color:var(--muted)} #main #admin-panel .admin-stats b{font-family:var(--font-round);font-weight:600;font-size:24px;color:var(--brand-deep)} #main #admin-panel .admin-tabs{display:flex;gap:6px;padding:5px;border-radius:999px;background:var(--mist);border:1px solid var(--line);width:max-content;max-width:100%;overflow-x:auto;margin-bottom:12px} #main #admin-panel .admin-tabs button{border:0;border-radius:999px;padding:9px 18px;background:transparent;color:var(--ink-2);font-family:var(--font-display);font-size:15px;box-shadow:none;transform:none;min-height:0;height:auto} #main #admin-panel .admin-tabs button[aria-pressed=true]{background:var(--surface);color:var(--brand-deep);box-shadow:var(--pop)} #main #admin-panel h2{font-family:var(--font-display);font-weight:400;font-size:22px} #main #admin-panel .admin-card{border-radius:var(--r-m);background:var(--surface);border:1px solid var(--line-soft);box-shadow:var(--pop)} #main #admin-panel .admin-message:empty{display:none} .photo-manager{display:grid;gap:14px} .pm-head h2{margin:0} .pm-head p{margin:4px 0 0;font-size:13.5px} .pm-slots{display:flex;gap:6px;padding:5px;border-radius:999px;background:var(--mist);border:1px solid var(--line);width:max-content;max-width:100%;overflow-x:auto;scrollbar-width:none} .pm-slots button{position:relative;border:0;border-radius:999px;padding:9px 16px;background:transparent;font-family:var(--font-display);font-size:14.5px;color:var(--ink-2);white-space:nowrap;box-shadow:none;transform:none} .pm-slots button[aria-selected=true]{background:var(--surface);color:var(--brand-deep);box-shadow:var(--pop)} .pm-slots button i{position:absolute;top:6px;right:8px;width:7px;height:7px;border-radius:50%;background:#e0867f} .pm-body{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:18px;align-items:start} .pm-stage,.pm-library{background:var(--surface);border-radius:var(--r-l);border:1px solid var(--line-soft);box-shadow:var(--pop);padding:18px} .pm-where{margin:0 0 12px;font-size:13.5px;color:var(--muted);display:flex;align-items:center;gap:8px;flex-wrap:wrap} .pm-badge{font-family:var(--font-display);font-weight:400;font-size:12.5px;padding:3px 10px;border-radius:999px;background:var(--cream);color:#8a5a2b;border:1px dashed #e7c9a3} :root[data-theme=dark] .pm-badge{color:#f0c99b;border-color:#6b5638} .pm-badge.is-live{background:#89a4c933;color:var(--brand-deep);border:0} .pm-frames{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:14px;align-items:end} .pm-frame{margin:0} .pm-crop{position:relative;overflow:hidden;border-radius:16px;background:var(--mist);cursor:crosshair;touch-action:none;box-shadow:0 0 0 1px var(--line);user-select:none} .pm-desktop .pm-crop{max-height:360px} .pm-mobile .pm-crop{max-width:200px;margin-inline:auto;border-radius:22px;box-shadow:0 0 0 6px var(--ink),0 10px 24px -12px #0008} :root[data-theme=dark] .pm-mobile .pm-crop{box-shadow:0 0 0 6px #2b3854,0 10px 24px -12px #000a} .pm-crop img,.pm-crop video{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none} .pm-dot{position:absolute;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;border:3px solid #fff;background:#52729ccc;box-shadow:0 0 0 2px #52729c,0 4px 10px #0006;pointer-events:none} .pm-dot::after{content:"";position:absolute;inset:7px;border-radius:50%;background:#fff} .pm-crop:focus-visible{outline:3px solid var(--brand-ink);outline-offset:4px} .pm-frame figcaption{display:flex;justify-content:space-between;margin-top:8px;font-size:12.5px;color:var(--muted)} .pm-frame figcaption b{font-family:var(--font-display);font-weight:400;color:var(--ink-2)} .pm-mobile figcaption{max-width:200px;margin-inline:auto;margin-top:14px} .pm-hint{font-size:12.5px;margin:12px 0} .pm-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px;margin:0 0 12px} .pm-meta>div{padding:9px 12px;border-radius:12px;background:var(--paper)} .pm-meta dt{font-size:11.5px;color:var(--muted)} .pm-meta dd{margin:2px 0 0;font-size:13.5px;overflow-wrap:anywhere} .pm-meta code{font-size:12px} .pm-actions{display:flex;flex-wrap:wrap;gap:8px} .pm-actions button{border-radius:999px;padding:10px 18px;font-family:var(--font-display);font-size:14.5px;border:1.5px solid var(--line-2);background:var(--surface);color:var(--ink-2)} .pm-actions button.primary{background:var(--brand-press);border-color:var(--brand-press);color:#fff;padding-inline:26px} .pm-actions button:disabled{opacity:.45;cursor:not-allowed;transform:none} .pm-status{min-height:1.4em;margin:10px 0 0;font-size:13.5px;color:var(--brand-ink)} .pm-library-head{display:flex;align-items:center;gap:10px;margin-bottom:12px} .pm-search{flex:1} .pm-search input{width:100%;height:44px;border-radius:999px;padding:0 16px} .pm-library-head small{font-family:var(--font-round);color:var(--muted)} .pm-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px;max-height:560px;overflow:auto;padding:2px} .pm-pick{display:block;width:100%;padding:5px 5px 6px;border-radius:14px;background:var(--paper);border:2px solid transparent;text-align:center;box-shadow:none;transform:none} .pm-pick[aria-pressed=true]{border-color:var(--brand-press);background:var(--mist)} .pm-pick:hover{background:var(--mist)} .pm-thumb{display:block;aspect-ratio:1;border-radius:10px;overflow:hidden;background:var(--mist-2)} .pm-thumb img,.pm-thumb video{width:100%;height:100%;object-fit:cover;display:block} .pm-pick small{display:block;margin-top:5px;font-family:var(--font-round);font-size:11.5px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .pm-more{margin-top:12px;width:100%;border-radius:999px;padding:10px;font-family:var(--font-display)} .pm-empty{padding:30px 0;text-align:center} @media (max-width:900px){.pm-body{grid-template-columns:1fr}} @media (max-width:520px){.pm-frames{grid-template-columns:1fr}.pm-mobile .pm-crop{max-width:170px}.pm-stage,.pm-library{padding:14px}.pm-grid{grid-template-columns:repeat(3,minmax(0,1fr));max-height:420px}} #main #admin-panel .admin-content{max-width:none} #main #admin-panel .admin-content>h2:not(.pm-head h2),#main #admin-panel .admin-card{max-width:900px} .header-me,.header-me:hover{text-decoration:none} .header-me span{text-decoration:none;max-width:12ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* ================================================================ iteration 6 fixes (full matrix it6) */ #main .game-list{display:grid;gap:12px} #main .game-card>a,#main .game-card.is-soon{padding:20px 22px} #main .game-card.is-live{background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r-m);box-shadow:var(--pop)} #main .game-card.is-soon{border:2px dashed var(--line-2);border-radius:var(--r-m)} #main .game-card .game-cta{padding:7px 14px;border-radius:999px;background:var(--mist);color:var(--brand-deep);font-size:14px} #main .game-room-entry{margin-bottom:18px} #main #admin-panel .admin-tabs button{white-space:nowrap} .support-foot .primary,.support-sheet .primary{background:var(--brand-press);border-color:var(--brand-press);border-radius:999px;font-family:var(--font-display)} @media (max-width:700px){ #main .song-row .number{width:26px;height:26px;border-radius:9px;font-size:11.5px;margin-right:6px} } @media (max-width:430px){ body>header nav{gap:0;justify-content:space-between} body>header nav a{padding:6px 8px;font-size:13.5px} } @media (max-width:370px){ body>header nav a{padding:6px 7px;font-size:13px} } #main .song-row:not(.playlist-row){grid-template-columns:36px minmax(0,1fr) auto} @media (max-width:900px){#main .song-row:not(.playlist-row){grid-template-columns:28px minmax(0,1fr)}} @media (max-width:700px){#main .song-row .number{margin-right:0}} /* load problem banner: a soft note card with a clear retry */ .load-banner{margin:12px auto 0;max-width:min(1240px,calc(100% - 28px));border:1.5px dashed #e7c9a3;border-radius:18px;background:var(--cream);padding:12px 16px} :root[data-theme=dark] .load-banner{border-color:#6b5638} .load-banner button{border-radius:999px;border:0;background:var(--brand-press);color:#fff;font-family:var(--font-display);font-weight:400;font-size:14px} /* drawer: rounded inner edge; the reserved scrollbar gutter (refine.css scrollbar-gutter) stays as before */ #drawer{background:var(--surface);border-radius:28px 0 0 28px} #drawer .drawer-sheet{border-radius:0;background:transparent} .drawer-body button[type=submit],.drawer-body .primary,#drawer .account-panel button.primary{background:var(--brand-press);border-color:var(--brand-press);color:#fff;border-radius:999px;font-family:var(--font-display);font-weight:400;font-size:15px} .drawer-links{display:grid;gap:2px} .drawer-links li{border:0!important} .drawer-links a,.drawer-links button,.drawer-row{border:0!important;background:transparent;border-radius:16px;padding:12px 12px!important;margin:0 -12px} .drawer-links a:hover,.drawer-links button:hover,.drawer-row:hover{background:var(--mist)} .auth-tabs button[aria-selected=true],.auth-tabs [aria-pressed=true]{color:var(--brand-deep);border-color:var(--brand)} @media (max-width:700px){#drawer{border-radius:0}} #main .game-list{border:0!important;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))} #main .game-list::before{display:none} #main #hub-outside+.hub-index{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))} /* section headings on home carry the signature butterfly as a tiny mark */ #main .home-folio .index-head h2::before,#main .home-folio .yt>h2::before,#main .home-folio .yt .index-head h2::before{content:"";display:inline-block;width:.9em;height:.9em;margin-right:.35em;vertical-align:-.08em;background:linear-gradient(150deg,#b3a6de,#89a4c9);-webkit-mask:var(--butterfly-mask) center/contain no-repeat;mask:var(--butterfly-mask) center/contain no-repeat} /* letters: a real little envelope (flap + heart seal) instead of a grey box */ #main .letter::before{border:0;width:38px;height:28px;border-radius:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 38 28'%3E%3Crect x='1' y='1' width='36' height='26' rx='5' fill='%23fff' stroke='%23b9cbe6' stroke-width='1.5'/%3E%3Cpath d='M2.5 3.5 19 15.5 35.5 3.5' fill='%23e6eef9' stroke='%23b9cbe6' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M19 19.6c-2.6-1.6-4-2.9-4-4.4a2 2 0 0 1 4-.5 2 2 0 0 1 4 .5c0 1.5-1.4 2.8-4 4.4Z' fill='%23f2a9a1'/%3E%3C/svg%3E") center/contain no-repeat} /* the letters card fills its height with a decorative postcard (no extra link: 모든 소식 is in the head) */ #main .index-letters{display:flex;flex-direction:column} #main .index-letters::after{content:"";flex:1;min-height:0;margin-top:14px;border-radius:16px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 90'%3E%3Cg transform='rotate(6 60 45)'%3E%3Crect x='14' y='10' width='92' height='70' rx='8' fill='%23fff' stroke='%23c6d5ec' stroke-width='2' stroke-dasharray='5 4'/%3E%3Crect x='76' y='18' width='22' height='26' rx='3' fill='%23dbe5f4'/%3E%3Cpath d='M87 25c-1.8-3.4-5-5.6-7.3-4.8-1.6.6-1.4 2.8.3 4.3 1.6 1.4 4.4 1.9 6.6 1.1Zm0 0c1.8-3.4 5-5.6 7.3-4.8 1.6.6 1.4 2.8-.3 4.3-1.6 1.4-4.4 1.9-6.6 1.1Zm0 1.5c-1.4 1.9-2.3 4.8-1.6 6.6.4 1 1.6.8 2 0 .9-2 .6-4.6-.4-6.6Zm0 0c1.4 1.9 2.3 4.8 1.6 6.6-.4 1-1.6.8-2 0-.9-2-.6-4.6.4-6.6Z' fill='%2389a4c9'/%3E%3Cpath d='M24 56h40M24 64h30' stroke='%23c6d5ec' stroke-width='2.4' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E") right 18px bottom 8px/150px auto no-repeat, linear-gradient(160deg,var(--mist) 0,transparent 75%)} :root[data-theme=dark] #main .letter::before{filter:brightness(.85) saturate(.9)} :root[data-theme=dark] #main .index-letters::after{opacity:.55} @media (max-width:860px){#main .index-letters::after{display:none}} #main .game-card.is-soon .game-cta{background:transparent;padding:0;color:var(--muted)} /* ================================================================ run_002 review (operator feedback, screens after_full) */ /* drawer: no empty scrollbar-gutter strip beside the modal (drawer.mjs measures the gutter; the page keeps its width) */ html.drawer-open{scrollbar-gutter:auto;padding-right:var(--drawer-gutter,0px)} /* drawer: compact account block */ #drawer .drawer-head{padding:12px 12px 10px 22px} #drawer .drawer-body{padding-top:6px} #drawer .drawer-account{padding-top:6px} /* ---- home: compact hero without filler labels */ #main .folio{grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding:20px 0 6px;gap:clamp(20px,4vw,56px)} #main .folio-figure{max-width:470px;justify-self:center;width:100%} #main .folio-photo{aspect-ratio:4/5;max-height:540px} #main .folio-text .motion-toggle{margin-top:24px} #main .folio-figure figcaption{justify-content:flex-end;padding-left:0;margin-top:10px} #main .folio-index{margin-top:18px} /* this week: seven day chips; days with a record are buttons that open that day */ #main .week-strip-home{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px} #main .week-day{display:grid;justify-items:center;gap:2px;width:100%;padding:8px 0 9px;border-radius:14px;border:1px solid var(--line-soft);background:var(--paper);color:var(--ink-2);font:inherit;box-shadow:none;transform:none;min-height:0} #main .week-day small{font-family:var(--font-display);font-size:11.5px;color:var(--muted)} #main .week-day b{font-family:var(--font-round);font-weight:600;font-size:17px;line-height:1.1} #main .week-day i{width:6px;height:6px;border-radius:50%;background:transparent} #main .week-day.on i{background:var(--brand-press)} #main .week-day.off i{border:1.5px solid var(--muted);box-sizing:border-box} #main .week-day.sun small,#main .week-day.sun b{color:#c2556b} #main .week-day.sat small,#main .week-day.sat b{color:#3d6fb8} :root[data-theme=dark] #main .week-day.sun small,:root[data-theme=dark] #main .week-day.sun b{color:#f08a98} :root[data-theme=dark] #main .week-day.sat small,:root[data-theme=dark] #main .week-day.sat b{color:#8cb2ec} #main button.week-day{cursor:pointer;background:var(--surface);border-color:var(--line)} #main button.week-day:hover{background:var(--mist);transform:translateY(-2px)} #main .week-day.today{background:var(--brand-press);border-color:var(--brand-press)} #main .week-day.today small,#main .week-day.today b{color:#fff} #main .week-day.today i{background:#fff} #main .week-day.today.off i{border-color:#fff;background:transparent} /* the letters card no longer needs the filler postcard */ #main .index-letters::after{display:none} @media (max-width:700px){ #main .folio{padding-top:10px;gap:14px} #main .folio-word{font-size:clamp(52px,16vw,68px)} #main .folio-ko{font-size:22px;margin-top:2px} #main .folio-lede{margin-top:10px;font-size:14.5px;line-height:1.7} #main .folio-text .motion-toggle{margin-top:12px} #main .folio-figure{max-width:300px;padding:0 0 0 22px} #main .folio-photo{aspect-ratio:5/6;max-height:330px;border-width:5px} #main .folio-inset{width:36%;bottom:6%;left:-6px;padding:5px 5px 16px} #main .folio-figure figcaption{margin-top:6px} #main .week-strip-home{gap:4px} #main .week-day{padding:7px 0 8px;border-radius:12px} #main .week-day b{font-size:15.5px} } /* ---- about: one profile sheet, not a grid of name cards */ #main .about-hero{grid-template-columns:minmax(0,5fr) minmax(0,6fr);grid-template-areas:"art text" "art facts";column-gap:clamp(24px,4vw,56px);row-gap:18px;align-items:start;padding-top:18px} #main .about-hero>.about-text{grid-area:text;align-self:end} #main .about-hero>.about-art{grid-area:art;align-self:center} #main .about-hero>.fact-sheet{grid-area:facts} #main .about-hero[style]{grid-template-areas:"text" "facts"} #main .about-hero h1{margin-top:0} #main .about-lede{border:0;padding:0;margin-top:12px;max-width:34ch} #main .about-art{position:relative;transform:rotate(-2deg);padding:12px;border-radius:10px;background:var(--surface);box-shadow:var(--pop-2)} #main .about-art::before{content:"";position:absolute;top:-14px;left:50%;width:96px;height:26px;transform:translateX(-50%) rotate(-3deg);background:#c6d5ecd9;border-radius:3px;z-index:2} :root[data-theme=dark] #main .about-art::before{background:#4a6187cc} #main .about-art>video,#main .about-art>img{border-radius:6px;aspect-ratio:4/3} #main .about-art .folio-credit{justify-self:end;min-height:0;padding:5px 11px;border-radius:999px;background:var(--chip);border:1px solid var(--line);font-family:var(--font-display);font-size:12.5px;margin-top:8px} /* the four facts on one ruled sheet: label …… value */ #main .fact-sheet.about-facts{display:block;grid-column:auto;margin:0;padding:6px 22px;border-radius:var(--r-m);background:var(--surface);border:1px solid var(--line-soft);box-shadow:var(--pop)} #main .fact-sheet.about-facts>div{display:flex;align-items:center;gap:12px;min-height:58px;padding:0;border:0;border-radius:0;background:none;box-shadow:none} #main .fact-sheet.about-facts>div+div{border-top:1.5px dashed var(--line)} #main .fact-sheet.about-facts dt{flex:0 0 auto;font-family:var(--font-display);font-size:14px;color:var(--muted);margin:0} #main .fact-sheet.about-facts dd{flex:1;display:flex;align-items:center;justify-content:flex-end;gap:10px;margin:0;min-width:0;flex-wrap:wrap} #main .fact-sheet .fact-main{font-size:18px} #main .fact-copy{border-radius:999px;padding:4px 12px;min-height:30px;border:1.5px solid var(--brand-soft);background:var(--paper);color:var(--brand-deep);font-family:var(--font-display);font-size:13px;box-shadow:none;transform:none} #main .fact-copy:hover{background:var(--brand-press);border-color:var(--brand-press);color:#fff} #main .fact-days{font-family:var(--font-display);font-size:12.5px;padding:2px 9px;border-radius:999px;background:var(--cream);color:#8a5a2b} :root[data-theme=dark] #main .fact-days{color:#f0c99b} /* archive numbers: one perforated stamp strip */ #main .about-numbers{margin-top:34px} #main .about-numbers dl{display:flex;gap:0;padding:14px;border-radius:var(--r-l);background:var(--cream);border:1.5px dashed #e7c9a3;justify-content:space-around;flex-wrap:wrap} :root[data-theme=dark] #main .about-numbers dl{border-color:#6b5638} #main .about-numbers dl>div{flex:1 1 120px;display:grid;justify-items:center;gap:4px;padding:10px 6px;border:0!important;border-radius:0;background:none;text-align:center;position:relative} #main .about-numbers dl>div+div::before{content:"";position:absolute;left:0;top:18%;bottom:18%;border-left:1.5px dashed #e7c9a3} #main .about-numbers dd{font-family:var(--font-round);font-weight:600;font-size:clamp(28px,3.4vw,40px);color:var(--brand-deep);font-variant-numeric:tabular-nums;margin:0} #main .about-numbers dt{font-family:var(--font-display);font-size:14px;color:var(--ink-2);letter-spacing:0;font-weight:400} /* channels on about: a compact row of stamps */ #main[data-view=about] .channels{margin-top:30px} #main[data-view=about] .channel-list{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px} #main[data-view=about] .channel-list a{padding:10px 14px;box-shadow:none;border:1px solid var(--line)} #main[data-view=about] .channel-list a::before{width:30px;height:30px;border-radius:10px} #main[data-view=about] .channel-name{font-size:15px} @media (max-width:860px){ #main .about-hero{grid-template-columns:minmax(0,1fr);grid-template-areas:"text" "art" "facts"} #main .about-art{max-width:420px;justify-self:center;transform:rotate(-1.5deg)} } @media (max-width:700px){ #main .about-hero .folio-word{font-size:clamp(50px,15vw,64px)} #main .fact-sheet.about-facts{padding:4px 16px} #main .fact-sheet .fact-main{font-size:16.5px} #main .about-numbers dl{padding:8px} #main .about-numbers dl>div{flex:1 1 40%} #main .about-numbers dl>div:nth-child(3)::before{display:none} } /* ---- games: the room door + real games only */ #main .game-card .game-art{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:15px;color:#fff;background:linear-gradient(150deg,var(--st-a),var(--st-b))} #main .game-card .game-art .icon{width:24px;height:24px} #main .game-card.is-live>a{grid-template-columns:auto minmax(0,1fr) auto;column-gap:16px} #main .game-card.is-live .game-art{grid-row:1/3;grid-column:1;margin:0} #main .game-card.is-live h2,#main .game-card.is-live p{grid-column:2} #main .game-card.is-live .game-cta{grid-column:3;grid-row:1/3} @media (max-width:520px){#main .game-card.is-live>a{grid-template-columns:auto minmax(0,1fr)}#main .game-card.is-live .game-cta{grid-column:1/-1;grid-row:auto;justify-self:start;margin-top:8px}} /* ---- gallery: image-first wall, no tilt (no clipped edges), a quiet loading frame, a random door */ #main .gallery-wall>* .tile-frame{transform:none} #main .gallery-wall .tile-frame{padding:0;border-radius:14px;overflow:hidden;box-shadow:var(--pop);background:var(--mist);position:relative} #main .gallery-wall .tile-frame::before{content:"";position:absolute;left:50%;top:50%;width:34px;height:34px;margin:-17px 0 0 -17px;background:var(--brand-soft);-webkit-mask:var(--butterfly-mask) center/contain no-repeat;mask:var(--butterfly-mask) center/contain no-repeat;opacity:.7} #main .gallery-wall .tile-frame>img,#main .gallery-wall .tile-frame>video{position:relative;z-index:1} #main .gallery-wall>*:hover .tile-frame,#main .gallery-wall>*:focus-within .tile-frame{transform:translateY(-4px);box-shadow:var(--pop-2)} #main .gallery-tools{margin:10px 0 16px;display:flex;justify-content:flex-start} #main .gallery-random{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:9px 18px 9px 14px;border:1.5px dashed var(--brand-soft);background:var(--surface);color:var(--brand-deep);font-family:var(--font-display);font-size:14.5px;box-shadow:none} #main .gallery-random::before{content:"";width:18px;height:18px;background:linear-gradient(150deg,#b3a6de,#89a4c9);-webkit-mask:var(--butterfly-mask) center/contain no-repeat;mask:var(--butterfly-mask) center/contain no-repeat} #main .gallery-random:hover{background:var(--mist);transform:translateY(-2px)} /* viewer: arrows sit on the picture's edges at every size; swipe works on the stage (gallery.js) */ #dialog .lightbox{grid-template-areas:"stage cap";position:relative} #dialog .lightbox-stage{grid-area:stage;touch-action:pan-y} #dialog .lightbox-caption{grid-area:cap} #dialog .lightbox-nav{grid-area:stage;position:static;align-self:center;display:flex;justify-content:space-between;padding:0 12px;pointer-events:none;z-index:2;margin:0;inset:auto} #dialog .lightbox-nav>button{pointer-events:auto;width:46px;height:46px;border-radius:50%;background:#ffffffe6;color:#22314d;border:0;box-shadow:0 6px 18px -6px #0008} #dialog .lightbox-nav>button:disabled{opacity:0;pointer-events:none} @media (max-width:760px){ #dialog .lightbox{grid-template-columns:minmax(0,1fr);grid-template-areas:"stage" "cap"} #dialog .lightbox-stage{min-height:220px} #dialog .lightbox-stage>img,#dialog .lightbox-stage>video{max-height:58vh} #dialog .lightbox-nav>button{width:40px;height:40px} #dialog .lightbox-caption{padding:18px 18px 28px} #dialog .lightbox-related ul{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px} #dialog .lightbox-related li{flex:0 0 160px;scroll-snap-align:start} } /* run_002 pass 2 (screens r2a) */ /* page head without the English eyebrow row */ #main .page-title{grid-template-areas:"st h1" "st p"} #main .page-title p{max-width:60ch} @media (max-width:700px){ #main .page-title{grid-template-areas:"st h1" "p p"} /* phone hero: the wordmark across the top, then the line + pause on the left and the photo on the right, so the week and the letters start inside the first screen without the photo covering the name */ #main .folio{grid-template-columns:minmax(0,1fr) minmax(0,46%);grid-template-areas:"title title" "lede photo" "motion photo";column-gap:12px;row-gap:6px;align-items:start} #main .folio-text{display:contents} #main #folio-title{grid-area:title} #main .folio-lede{grid-area:lede;margin-top:8px;font-size:14px;align-self:start} #main .folio-text .motion-toggle{grid-area:motion;justify-self:start;align-self:end;margin:0 0 4px} #main .folio-figure{grid-area:photo;max-width:none;padding:0;margin:0;justify-self:stretch} #main .folio-photo{aspect-ratio:4/5;max-height:250px;border-width:4px} #main .folio-figure::before{inset:8% -6% -4% 10%} #main .folio-inset{width:44%;left:-18%;bottom:4%;padding:4px 4px 12px} #main .folio-inset::before{width:40px;height:14px;top:-8px} #main .folio-figure figcaption{margin-top:4px} #main .folio-sparkles i:nth-child(2){right:2%} #main .index-head h2{font-size:21px} #main .index-head{flex-wrap:nowrap} #main .index-link{flex:0 0 auto;white-space:nowrap} } /* run_002 pass 3 (screens r2c): dark white-on-blue contrast, compact hub channel rows on phones */ :root[data-theme=dark]{--brand-press:#4a6799} @media (max-width:700px){ #main #hub-outside+.hub-index{gap:8px} #main #hub-outside+.hub-index .hub-row{padding:12px 14px} #main #hub-outside+.hub-index .hub-no{width:36px;height:36px;border-radius:12px;font-size:13px} #main #hub-outside+.hub-index .hub-name{font-size:16px} #main[data-view=about] .channel-list a{padding:8px 12px} } /* day record: no empty part column when a broadcast has no part label (it indented the title by 52px) */ .replay-time:empty{display:none} /* ================================================================ run_004 (user screenshots 2026-10-24 19:57) */ /* ---- 1. optical centring of pill/round controls. Measured in Chrome (results/site_ui/run_004/report.md): Jua Hangul ink sits 0.08em above the centre of its line box, Noto Sans KR Hangul 0.055em below, Fredoka ≈0. Pills use Jua, so their padding moves the ink down by 0.08em and an icon beside the text moves up by the same amount — text, icon and pill share one centre. */ :root{--ink-jua:.08em} body>header nav a{line-height:1.15;padding:calc(7px + var(--ink-jua)) 15px calc(7px - var(--ink-jua))} #main .index-link,#main .folio-credit,.folio-credit,#main .back-link,#main .game-cta,#main .fact-copy,#main .source-links a, #main .tabs button,#main .clip-kinds button,#main .gallery-filters button,#main .pagination button,#main #admin-panel .admin-tabs button, .pm-slots button,.pm-actions button,.lib-sorts>button,.select-actions button,.load-banner button,#main .week-navigation [data-diary-today], #main .calendar-tools button,.header-me{display:inline-flex;align-items:center;justify-content:center;gap:.32em;line-height:1.15;font-family:var(--font-display);font-weight:400} #main .index-link{padding:calc(6px + var(--ink-jua)) 12px calc(6px - var(--ink-jua)) 14px} #main .folio-credit,.folio-credit{padding:calc(5px + var(--ink-jua)) 11px calc(5px - var(--ink-jua))} #main .back-link{padding:calc(7px + var(--ink-jua)) 14px calc(7px - var(--ink-jua)) 10px} #main .game-cta{padding:calc(7px + var(--ink-jua)) 14px calc(7px - var(--ink-jua))} #main .fact-copy{padding:calc(4px + var(--ink-jua)) 12px calc(4px - var(--ink-jua))} #main .source-links a{padding:calc(3px + var(--ink-jua)) 10px calc(3px - var(--ink-jua))} #main .tabs button,#main .clip-kinds button,#main #admin-panel .admin-tabs button,.pm-slots button{padding:calc(9px + var(--ink-jua)) 18px calc(9px - var(--ink-jua))} #main .gallery-filters button{padding:calc(8px + var(--ink-jua)) 16px calc(8px - var(--ink-jua))} #main .pagination button{padding:calc(12px + var(--ink-jua)) 26px calc(12px - var(--ink-jua))} .pm-actions button{padding:calc(10px + var(--ink-jua)) 18px calc(10px - var(--ink-jua))} .lib-sorts>button,.select-actions button,#main .calendar-tools button,#main .week-navigation [data-diary-today]{min-height:40px;padding:calc(2 * var(--ink-jua)) 14px 0} .load-banner button{min-height:44px;padding:calc(2 * var(--ink-jua)) 16px 0} .header-me{padding-top:calc(2 * var(--ink-jua))} /* icons inside those controls: 1em, no stray margins, lifted to the text's ink centre */ body>header nav a .icon,#main .index-link .icon,.folio-credit .icon,#main .back-link .icon,#main .game-cta .icon,#main .source-links a .icon, #main .pagination button .icon,.pm-actions button .icon,#main .calendar-tools button .icon,.header-me>.icon{width:1em;height:1em;flex:none;margin:0;translate:0 calc(-1 * var(--ink-jua))} #main .index-link .icon{width:.95em;height:.95em} /* counters inside tabs (Fredoka digits ≈ centred) */ #main .tabs button small,#main .clip-kinds button small,#main .gallery-filters button sup{display:inline-grid;place-items:center;line-height:1;min-height:1.5em;translate:0 calc(-1 * var(--ink-jua));vertical-align:0;position:static} /* select chevron on song date pickers: one centre for label and chevron */ #main .date-picker summary{display:flex;align-items:center;gap:6px;line-height:1.1} #main .date-picker summary .chevron{display:inline-grid;place-items:center;width:1em;height:1em;line-height:1;translate:0 -.1em} /* round icon buttons: glyph centred in the circle */ .theme-toggle,.drawer-close,.dialog-close,#main .month-stepper button,#main .week-navigation button,#main .notice-arrow,#main .song-row [data-selected-play],#main .song-row .heart,.player-btn{display:inline-grid;place-items:center;padding:0;line-height:1} .theme-toggle .icon,.drawer-close .icon,.dialog-close .icon{width:18px;height:18px;margin:0} /* ---- 2. library: content inside its rounded card, long names wrap or ellipsize, never past the edge */ #main .library-side{padding:16px 16px 14px;overflow:hidden} #main .library-side .lib-side-title{margin:0 0 8px;font-family:var(--font-display);font-size:16px} #main .library-side .lib-side-hint{margin:12px 2px 0;overflow-wrap:anywhere;word-break:keep-all} #main .library-side .lib-side-row{padding:0 10px;font-family:var(--font-display);font-size:14px} #main .library-side .lib-side-row span{min-width:0} #main .lib-list-title h2,#main .lib-list-title small{overflow-wrap:anywhere} .header-me span{min-width:0} #drawer .profile-summary,#drawer .profile-meta{min-width:0;overflow-wrap:anywhere} @media (max-width:1100px){#main .library.is-shelf .library-side{padding:10px 12px}} /* ---- 5. always-available selection: a real checkbox column; batch bar only while something is picked */ #main .song-row .pick-box{width:34px;min-height:44px;margin:0} #main .song-row .pick-box input{width:20px;height:20px;accent-color:var(--brand-press)} #main .song-row[data-picked]{background:var(--mist);box-shadow:inset 3px 0 0 var(--brand-press)} #main .song-row[data-pick-id]:has(.pick-box){cursor:default} .library-dock{bottom:calc(16px + var(--player-space,0px))} /* ---- 7. bottom player: compact bar + big "now playing" view (user references 2026-10-24 20:18) */ html.player-open body{padding-bottom:calc(var(--player-space,0px) + 12px)} html.player-open #toast{bottom:calc(var(--player-space,0px) + 14px)} html.player-expanded{overflow:hidden} #player{position:static;inset:auto;width:auto;max-width:none;margin:0;padding:0;border:0;background:none;box-shadow:none;color:var(--ink);display:contents} #player[hidden]{display:none} /* the bar */ #player .player-bar{position:fixed;z-index:40;left:50%;bottom:calc(10px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);width:min(1200px,calc(100vw - 20px)); display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:12px;min-height:68px;padding:8px 10px;border-radius:22px; background:var(--surface);border:1px solid var(--line);box-shadow:var(--pop-2)} :root[data-theme=dark] #player .player-bar{background:#141c2d} #player .player-now{justify-self:start;display:flex;align-items:center;gap:12px;min-width:0;max-width:100%;padding:4px 10px 4px 4px;border:0;border-radius:16px;background:transparent;color:inherit;text-align:left;box-shadow:none;transform:none;cursor:pointer;font:inherit} #player .player-now:hover{background:var(--mist)} #player .player-now:focus-visible{outline:3px solid var(--brand-ink);outline-offset:2px} #player .player-slot{flex:0 0 auto;width:80px;height:45px;border-radius:10px;background:#0b1220} #player .player-meta{display:grid;min-width:0;gap:2px} #player .player-meta strong{font-family:var(--font-body);font-weight:700;font-size:14.5px;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink)} #player .player-meta small{font-family:var(--font-round);font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #player .player-steps{display:flex;align-items:center;justify-content:center;gap:6px} #player .player-tools{justify-self:end;display:flex;align-items:center;gap:4px} #player .player-pos{min-width:3.4em;margin-right:4px;text-align:right;font-family:var(--font-round);font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums} #player .player-btn{display:inline-grid;place-items:center;width:40px;height:40px;padding:0;border-radius:50%;border:0;background:transparent;color:var(--ink-2);box-shadow:none;transform:none;line-height:1;text-decoration:none} #player .player-btn .icon{width:20px;height:20px;margin:0} #player .player-step{width:44px;height:44px} #player .player-step .icon{width:22px;height:22px} #player .player-btn:hover:not(:disabled){background:var(--mist);color:var(--ink)} #player .player-btn[aria-pressed=true]{color:var(--brand-press);background:#89a4c926} :root[data-theme=dark] #player .player-btn[aria-pressed=true]{color:#cfe0fa;background:#89a4c933} #player .player-btn:disabled{opacity:.32;cursor:default} #player .player-btn:focus-visible,#player .player-open:focus-visible,#player .player-chip:focus-visible,#player .player-jump:focus-visible,#player .player-mini:focus-visible{outline:3px solid var(--brand-ink);outline-offset:2px} /* the honest centre button: opens the official player (play/pause live there) */ #player .player-open{display:inline-flex;align-items:center;gap:7px;height:44px;padding:calc(2 * var(--ink-jua)) 18px 0 14px;border:0;border-radius:999px;background:var(--brand-press);color:#fff;font-family:var(--font-display);font-size:14.5px;box-shadow:0 8px 16px -10px #2f4a74;transform:none} #player .player-open .icon{width:20px;height:20px;translate:0 calc(-1 * var(--ink-jua))} #player .player-open[hidden]{display:none} #player .player-open:hover{filter:brightness(1.08)} /* the official frame: one element, placed over the mini slot or the stage */ #player .player-media{position:fixed;z-index:41;left:0;top:0;width:0;height:0;border-radius:10px;overflow:hidden;background:#000;transition:left .25s var(--ease),top .25s var(--ease),width .25s var(--ease),height .25s var(--ease),border-radius .25s} #player .player-media.is-mini{pointer-events:none} #player .player-media:not(.is-mini){border-radius:18px;box-shadow:var(--pop-2)} #player .player-media iframe{display:block;width:100%;height:100%;border:0} @media (prefers-reduced-motion:reduce){#player .player-media{transition:none}} /* the big view */ #player .player-view{position:fixed;z-index:39;left:0;right:0;top:0;bottom:0;padding:18px max(18px,calc((100vw - 1240px)/2)) calc(var(--player-space,90px) + 12px); display:grid;grid-template-columns:minmax(0,1.55fr) minmax(300px,1fr);grid-template-rows:auto minmax(0,1fr);gap:14px 28px;background:var(--paper); background-image:radial-gradient(900px 520px at 8% -6%,#dfe8f7 0,transparent 70%),radial-gradient(760px 480px at 100% 4%,#ece6f8 0,transparent 68%)} :root[data-theme=dark] #player .player-view{background:#0b111c;background-image:radial-gradient(900px 520px at 8% -6%,#1b2742 0,transparent 70%),radial-gradient(760px 480px at 100% 4%,#231f3b 0,transparent 68%)} #player .player-view[hidden]{display:none} #player .player-view-head{grid-column:1/-1;display:flex;align-items:center;gap:10px;min-height:44px} #player .player-grabber{display:none} #player .player-collapse{background:var(--chip);border:1px solid var(--line);box-shadow:var(--pop)} #player .player-view-main{min-height:0;display:flex;flex-direction:column;gap:14px;overflow:auto;padding:2px} #player .player-stage{width:100%;aspect-ratio:16/9;max-height:calc(100vh - var(--player-space,90px) - 230px);border-radius:18px;background:#0b1220} #player .player-view-info{display:grid;gap:4px} #player .player-view-info strong{font-family:var(--font-display);font-weight:400;font-size:clamp(20px,2.2vw,26px);line-height:1.3;color:var(--ink)} #player .player-view-info small{font-family:var(--font-round);font-size:13px;color:var(--muted)} #player .player-view-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px} #player .player-chip{display:inline-flex;align-items:center;gap:6px;min-height:38px;padding:calc(2 * var(--ink-jua)) 14px 0 12px;border-radius:999px;border:1.5px solid var(--brand-soft);background:var(--surface);color:var(--brand-deep);font-family:var(--font-display);font-size:14px;text-decoration:none;box-shadow:none;transform:none} #player .player-chip .icon{width:17px;height:17px;translate:0 calc(-1 * var(--ink-jua))} #player .player-chip:hover{background:var(--mist)} #player .player-queue{min-height:0;display:flex;flex-direction:column;border-radius:22px;background:var(--surface);border:1px solid var(--line-soft);box-shadow:var(--pop);overflow:hidden} :root[data-theme=dark] #player .player-queue{background:#141c2d} #player .player-queue-head{display:grid;gap:2px;padding:16px 18px 10px;border-bottom:1px solid var(--line-soft)} #player .player-queue-head h3{margin:0;font-family:var(--font-display);font-weight:400;font-size:18px} #player .player-queue-head small{font-size:12.5px;color:var(--muted)} #player .player-queue-list{list-style:none;margin:0;padding:8px;overflow:auto;overscroll-behavior:contain;flex:1;min-height:0} #player .player-queue-list li{display:flex;align-items:center;gap:4px;border-radius:14px} #player .player-queue-list li.is-now{background:var(--mist)} #player .player-jump{flex:1;min-width:0;display:flex;align-items:center;gap:10px;padding:7px 8px;border:0;border-radius:14px;background:transparent;color:var(--ink);text-align:left;box-shadow:none;transform:none;font:inherit} #player .player-jump:hover:not([aria-disabled=true]){background:var(--mist)} #player .player-jump[aria-disabled=true]{cursor:default} #player .player-qthumb{position:relative;flex:0 0 auto;display:grid;place-items:center;width:56px;height:32px;border-radius:8px;overflow:hidden;background:var(--mist-2);color:var(--brand-ink)} #player .player-qthumb img{width:100%;height:100%;object-fit:cover} #player .player-qthumb .icon{width:18px;height:18px} #player .player-qthumb i{position:absolute;inset:0;display:grid;place-items:center;background:#22314d99;color:#fff} #player .player-qtext{display:grid;min-width:0} #player .player-t{font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #player .player-qtext small{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #player li.is-now .player-t{color:var(--brand-press)} :root[data-theme=dark] #player li.is-now .player-t{color:#cfe0fa} #player .player-qtools{display:flex;gap:0;flex:0 0 auto;opacity:.75} #player li:hover .player-qtools,#player li:focus-within .player-qtools{opacity:1} #player .player-mini{display:inline-grid;place-items:center;width:32px;height:32px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--muted);box-shadow:none;transform:none;line-height:1} #player .player-mini .icon{width:16px;height:16px} #player .player-mini:hover:not(:disabled){background:var(--surface);color:var(--ink)} #player .player-mini:disabled{opacity:.25} @media (max-width:980px){#player .player-open-label{display:none}#player .player-open{padding:0 12px}} /* phones: two-row bar; the big view is a full-height sheet (video, title, then the queue scrolling on its own) */ @media (max-width:700px){ #player .player-bar{width:calc(100vw - 12px);bottom:calc(6px + env(safe-area-inset-bottom,0px));grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"now tools" "steps steps";gap:4px 6px;padding:6px 6px 6px 4px;border-radius:20px} #player .player-now{grid-area:now;gap:9px;padding:3px 6px 3px 3px} #player .player-slot{width:64px;height:36px;border-radius:8px} #player .player-tools{grid-area:tools;gap:0} #player .player-pos{display:none} #player .player-tools .player-btn{width:38px;height:38px} #player .player-steps{grid-area:steps;gap:10px} #player .player-view{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr);gap:10px;padding:8px 12px calc(var(--player-space,120px) + 8px)} #player .player-view-head{justify-content:space-between;min-height:40px} #player .player-grabber{display:block;width:44px;height:5px;border-radius:3px;background:var(--line-2);margin:0 auto;order:1} #player .player-collapse{order:0} #player .player-view-main{overflow:visible;gap:10px} #player .player-stage{max-height:none;border-radius:14px} #player .player-view-info strong{font-size:19px} #player .player-queue{border-radius:18px} } @media (max-width:370px){#player .player-steps{gap:4px}#player .player-tools .player-btn{width:34px;height:34px}} /* desktop: the big view sits under the header, so the menu stays usable (navigating closes the view, the frame stays) */ @media (min-width:701px){#player .player-view{top:72px;padding-top:14px}#player .player-stage{max-height:calc(100vh - 72px - var(--player-space,90px) - 210px)}} #player .player-jump{justify-content:flex-start} #player .player-qtext{justify-items:start;text-align:left} #player .player-now{justify-content:flex-start} /* the official frame fills its placed box (style.css gave #media iframe a 12px top margin and a fixed ratio) */ #player #media iframe{margin:0;aspect-ratio:auto;width:100%;height:100%;border-radius:0} /* run_004 review 20:36 — queue rows: fixed columns (thumbnail | flexible text | fixed actions); bar artwork */ #player .player-queue-list li{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:4px;padding:0 4px 0 0} #player .player-jump{display:grid;grid-template-columns:56px minmax(0,1fr);justify-content:stretch;justify-items:start;align-items:center;column-gap:10px;width:100%;padding:7px 8px;text-align:left} #player .player-qthumb{width:56px;height:32px;justify-self:start} #player .player-qtext{width:100%;min-width:0;justify-items:start;text-align:left} #player .player-t,#player .player-qtext small{display:block;width:100%;text-align:left} #player .player-qtools{display:grid;grid-template-columns:repeat(3,32px);gap:0;justify-items:center} #player .player-qtools span.player-mini{visibility:hidden} #player .player-slot{position:relative;z-index:1;display:grid;place-items:center;overflow:hidden;background:var(--mist-2);color:var(--brand-ink)} #player .player-slot img{width:100%;height:100%;object-fit:cover;display:block} #player .player-slot .icon{width:22px;height:22px} /* collapsed: the official frame stays loaded but parked (hidden) behind the bar's thumbnail */ #player .player-media.is-mini{z-index:38;visibility:hidden} /* run_004 — clip/replay card grid: every title keeps a two-line box (still clamped at two), so a one-line title's "date · 다시보기" line sits on the same baseline as its two-line neighbours. Scoped to the video card grid only. */ #main .cards>.card h3{min-height:calc(2em * 1.45);min-height:2lh} /* run_005 — the whole bar opens the big view: its empty area is clickable (player.js), the artwork/title button stays the keyboard control and carries a small "open" chevron; the central 플레이어 pill is gone. Controls keep their own cursor. */ #player .player-bar{cursor:pointer} #player .player-bar:hover{box-shadow:0 10px 34px rgba(37,52,90,.18)} #player .player-bar :is(button,a){cursor:pointer} #player .player-bar button:disabled{cursor:default} #player .player-bar .player-pos{cursor:pointer} #player .player-hint{display:grid;place-items:center;flex:0 0 auto;width:22px;height:22px;margin-left:2px;border-radius:999px;color:var(--muted);transition:transform .2s var(--ease),color .2s} #player .player-hint .icon{width:16px;height:16px} #player .player-now:hover .player-hint,#player .player-bar:hover .player-hint{color:var(--brand-ink)} #player.is-expanded .player-hint{transform:rotate(180deg)} /* ChaennaMusic (extensions/chaenna_music/) — real transport in the bar, only while the extension bridge is bound: play/pause, elapsed / seek / total under the centre buttons, volume beside the tools. Hidden without the bridge. */ #player .player-bar{grid-template-areas:"now steps tools"} #player .player-now{grid-area:now} #player .player-steps{grid-area:steps} #player .player-tools{grid-area:tools} #player .player-progress{grid-area:progress;display:grid;grid-template-columns:auto minmax(120px,1fr) auto;align-items:center;gap:8px;min-width:min(440px,40vw);cursor:default} #player .player-progress[hidden],#player .player-volume[hidden],#player .player-toggle[hidden]{display:none} #player.has-music .player-bar{grid-template-areas:"now steps tools" "now progress tools";row-gap:0;padding-top:6px;padding-bottom:6px} #player .player-time{font-family:var(--font-round);font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;min-width:3.2em;text-align:center} #player .player-time[hidden],#player .player-seek[hidden]{display:none} #player .player-seek,#player .player-volume input{width:100%;height:24px;margin:0;accent-color:var(--brand-press);cursor:pointer} #player .player-music-status{grid-column:1/-1;font-size:12px;color:var(--muted);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #player .player-music-status:empty{display:none} #player .player-toggle{width:46px;height:46px;background:var(--brand-press);color:#fff} #player .player-toggle .icon{width:22px;height:22px} #player .player-toggle:hover:not(:disabled){background:var(--brand-press);color:#fff;filter:brightness(1.08)} #player .player-toggle:disabled{opacity:.45} #player .player-volume{display:flex;align-items:center;gap:4px;width:118px;margin-right:2px;color:var(--ink-2);cursor:default} #player .player-volume .icon{flex:0 0 auto;width:18px;height:18px} @media (max-width:700px){ #player.has-music .player-bar{grid-template-areas:"now tools" "steps steps" "progress progress";row-gap:2px} #player .player-progress{min-width:0;padding:0 6px 2px} #player .player-volume{display:none} #player .player-toggle{width:44px;height:44px} } /* ChaennaMusic install guide (#chaenna-music, music_guide.mjs) and the notice shown when a song needs the extension */ .music-guide .music-guide-status{margin:14px 0 6px;padding:10px 14px;border-radius:14px;background:var(--mist);color:var(--ink);font-size:14px} .music-guide .music-steps{display:grid;gap:14px;padding-left:1.4em} .music-guide .music-steps li strong{font-family:var(--font-display);font-weight:400;font-size:16.5px} .music-guide .music-steps p{margin:6px 0 0} .music-guide .music-hash{font-size:12px;color:var(--muted);overflow-wrap:anywhere} .music-guide .music-hash code{font-size:11.5px} .music-guide .music-copy-list{list-style:none;padding:0;margin:8px 0 0;display:grid;gap:8px} .music-guide .music-copy-list li{display:flex;flex-wrap:wrap;align-items:center;gap:8px} .music-guide .music-copy-list li>span{min-width:4.5em;font-weight:700} .music-guide .music-copy-list code{padding:4px 8px;border-radius:8px;background:var(--mist);font-size:13px} .music-guide .music-copy{min-height:36px;padding:4px 12px;border-radius:999px;font-size:13px} /* run_011: the short, centred install sheet — eyebrow, title, one sentence, one install button, a quiet text link */ #dialog .music-install{display:grid;justify-items:center;gap:10px;padding:8px 12px 4px;text-align:center} #dialog .music-install-eyebrow{margin:0;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--brand-ink)} #dialog .music-install h2{margin:0;padding:0 40px;font-size:22px;line-height:1.35;word-break:keep-all} @media (max-width:480px){#dialog .music-install h2{padding:0 32px;font-size:20px}} #dialog .music-install-lede{max-width:24em;margin:2px 0 6px;font-size:14px;line-height:1.65;color:var(--ink-2);word-break:keep-all} #dialog .music-install-go{box-sizing:border-box;min-height:48px;margin:0;padding:0 26px;border:0;border-radius:999px;background:var(--brand-press);color:#fff;font:inherit;font-size:15px;font-weight:700;line-height:1;box-shadow:0 6px 16px -8px var(--brand-press);cursor:pointer} #dialog .music-install-go:hover{filter:brightness(1.08)} #dialog .music-install-recheck{min-height:44px;margin:0;padding:0 12px;border:0;background:none;color:var(--muted);font:inherit;font-size:13px;text-decoration:underline;text-underline-offset:3px;cursor:pointer} #dialog .music-install-recheck:hover{color:var(--ink)} #dialog .music-install-status{min-height:1.2em;margin:0;font-size:13px;color:var(--muted)} #dialog .music-install-status:empty{display:none} #dialog:has(.music-install){width:min(420px,calc(100vw - 24px))} .music-guide .eyebrow{text-transform:none;letter-spacing:.04em} /* the product name is exactly "ChaennaMusic" */ .music-guide a.button.primary,.music-guide a.button.primary:visited{color:#fff;text-decoration:none} /* ===================================================================== run_006 — UI polish (user screenshots 1–8) Targeted fixes only; no layout redesign. */ /* A. header "내 공간" (user correction: keep the existing icon and text exactly; fix only their alignment). A later shared rule zeroed the icon margin, so the icon sat 5px from the left edge while the text ended 15px from the right; the text ink also sat ~0.5px below the icon centre. Balanced insets and a small optical lift; desktop only (phones keep their existing icon-only button). */ @media (min-width:701px){ .header-me{padding-left:11px;padding-right:12px;gap:6px} .header-me>span{translate:0 -0.5px} } /* B. home YouTube: plain channel name, a short gap to the first video, and every title keeps a two-line box so the dates sit on one baseline in each row and across both channel cards. Thumbnails keep their 16:9 crop. */ #main .yt-channel-name{margin:0 0 12px;padding:0;border:0 !important;font-family:var(--font-display);font-size:18px;font-weight:400;line-height:1.35;color:var(--ink)} #main .yt-item .yt-title{min-height:calc(2em * 1.55)} #main .yt-item.is-lead .yt-title{min-height:calc(2em * 1.55)} /* C. text navigation and source links: no pill box (no border, no fill, no shadow), quiet text + icon, a transparent 44px target, a visible focus ring and an underline on hover. Primary buttons, play/like and tabs are untouched. */ #main .index-link,#main .refrain-text .index-link{min-height:44px;padding:0 4px;margin:0 -4px;border:0;border-radius:8px;background:none;box-shadow:none;color:var(--brand-ink);gap:2px} #main .index-link:hover{background:none;border-color:transparent;color:var(--brand-press);text-decoration:underline;text-underline-offset:4px} #main .index-link:focus-visible,#main .folio-credit:focus-visible,#main .folio-colophon a:focus-visible,#main .source-links a:focus-visible{outline:3px solid var(--brand-ink);outline-offset:2px} #main .folio-credit,#main .about-art .folio-credit{min-height:44px;padding:0 6px;border:0;border-radius:8px;background:none;box-shadow:none;color:var(--ink-2);display:inline-flex;align-items:center;gap:4px} #main .folio-credit:hover{text-decoration:underline;text-underline-offset:4px;color:var(--brand-press)} /* a credit drawn over a picture stays readable without a box: a soft glow behind the text */ #main .refrain-art .folio-credit,#main .folio-figure figcaption .folio-credit,#main .about-art .folio-credit{color:#fff;text-shadow:0 1px 2px rgba(10,16,30,.85),0 0 8px rgba(10,16,30,.6)} #main .folio-figure figcaption .folio-credit{color:var(--ink-2);text-shadow:none} #main .folio-colophon{padding:0;border:0;background:none;box-shadow:none;border-radius:0;gap:10px} #main .folio-colophon a{min-height:44px;padding:0 4px} #main .folio-colophon a:hover{text-decoration:underline;text-underline-offset:4px;color:var(--brand-press)} #main .notice-row .source-links a,#main .source-links a{min-height:32px;padding:0 4px;border:0;border-radius:6px;background:none;box-shadow:none;color:var(--ink-2)} #main .source-links a:hover{text-decoration:underline;text-underline-offset:3px;color:var(--brand-press)} #main .source-links{gap:4px 12px} /* D. diary month: a thin line around each day cell, drawn as an overlay so no cell or the calendar changes size. */ #main .monthly-calendar .day{position:relative} #main .monthly-calendar .day::after{content:'';position:absolute;inset:0;border-right:1px solid var(--cal-line);border-bottom:1px solid var(--cal-line);pointer-events:none;z-index:3} #main .monthly-calendar .day:nth-child(7n)::after{border-right:0} #main .monthly-calendar{--cal-line:rgba(34,49,77,.12)} :root[data-theme=dark] #main .monthly-calendar{--cal-line:rgba(207,224,250,.10)} /* E1. segmented controls (다시보기/클립, 모든 노래/내 보관함): no clipping of the selected segment (overflow was cutting its shadow, which made it look off-centre), equal insets, and a hairline ring instead of a drop shadow. */ #main .tabs,#main .clip-kinds{overflow:visible;padding:4px;gap:4px} #main .tabs button.active,#main .tabs button[aria-pressed=true],#main .clip-kinds button[aria-pressed=true]{box-shadow:0 0 0 1px var(--line),0 1px 2px rgba(34,49,77,.08)} #main .tabs button small,#main .clip-kinds button small{min-width:2.2em;padding:0 7px} /* E2. likes list: the same inner padding on every side of the card; a calm empty state (no heavy dashed frame). */ #main .library.is-shelf .library-main{padding:22px 24px} #main .library.is-shelf .lib-list-head{margin-bottom:12px} #main .library.is-shelf .empty{border:1px solid var(--line-soft);border-radius:var(--r-m);padding:32px 20px;margin:4px 0 0;background:var(--surface)} #main .library.is-shelf .empty h3{margin:10px 0 6px} #main .library.is-shelf .empty p{margin:0 auto} @media (max-width:700px){#main .library.is-shelf .library-main{padding:16px 14px}} /* E3. drawer rows (SOOP·네이버 연결, 문의하기, HADES, 모든 게임): one icon column, centred on the row's whole text block, with the same right edge for links, the 문의하기 button and the fold's chevron. */ .drawer-links :is(a,button),.drawer-row,.drawer-fold>summary{grid-template-columns:minmax(0,1fr) 24px;column-gap:12px} .drawer-fold>summary{padding:10px 0} /* the 문의하기