@charset "UTF-8";
:root { --paper:#fbf7f2; --ink:#38272c; --muted:#7a646a; --berry:#923c53; --rose:#ecd5d8; --line:#e4d8d3; --serif:Georgia,"Times New Roman",serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:110px; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:"PingFang SC","Microsoft YaHei","Noto Sans CJK SC",system-ui,sans-serif; -webkit-font-smoothing:antialiased; }
[hidden] { display:none !important; }
::selection { background:#efd0d8; color:var(--ink); }
a { color:inherit; text-decoration:none; }
button { font:inherit; color:inherit; cursor:pointer; }
button:disabled { opacity:.45; cursor:default; }
a,button { -webkit-tap-highlight-color:transparent; }
a:focus-visible,button:focus-visible,summary:focus-visible { outline:3px solid var(--berry); outline-offset:5px; }
img { display:block; max-width:100%; }
figure,h1,h2,h3,p,dl,dd { margin:0; }
.wrap { width:min(1160px,calc(100% - 96px)); margin-inline:auto; }
.section { padding-block:100px; }
.eyebrow { font-size:10px; letter-spacing:2.2px; line-height:1.6; font-weight:600; color:var(--berry); }
h2 { font-size:30px; letter-spacing:-1px; line-height:1.6; font-weight:600; }
.text-link { display:inline-flex; gap:18px; align-items:center; font-size:13px; font-weight:600; padding:10px 0; border:0; background:transparent; }
.text-link:hover,.source-link:hover,.video-source:hover { color:var(--berry); text-decoration:underline; text-underline-offset:5px; }
.button { min-height:48px; display:inline-flex; align-items:center; justify-content:center; gap:30px; padding:14px 24px; font-size:13px; border:1px solid var(--berry); border-radius:3px; transition:background .2s,transform .2s; }
.primary { color:var(--paper); background:var(--berry); }
.primary:hover { background:#743044; transform:translateY(-2px); }
.secondary { background:transparent; color:var(--berry); }
.skip-link { position:fixed; left:12px; top:12px; padding:12px; background:var(--paper); z-index:100; transform:translateY(-160%); }
.skip-link:focus { transform:none; }
.header { position:sticky; top:0; background:rgba(251,247,242,.96); backdrop-filter:blur(12px); z-index:20; border-bottom:1px solid var(--line); }
.header-inner { min-height:90px; display:flex; align-items:center; justify-content:space-between; gap:30px; }
.brand { display:flex; align-items:center; gap:11px; font-size:12px; font-weight:800; letter-spacing:1.5px; line-height:1.4; }
.brand-flower { color:var(--berry); font-size:44px; font-weight:400; line-height:1; }
.brand-dot { color:var(--berry); }
nav { display:flex; gap:36px; font-size:13px; }
nav a { padding:12px 0; position:relative; }
nav a:hover { color:var(--berry); }
nav a::after { content:""; position:absolute; bottom:6px; left:0; width:100%; height:1px; background:var(--berry); transform:scaleX(0); transition:transform .2s; }
nav a:hover::after { transform:scaleX(1); }
.saved-link { border:1px solid var(--line); border-radius:30px; padding:11px 15px; font-size:11px; white-space:nowrap; display:flex; align-items:center; gap:8px; }
.saved-link>span:first-child { color:var(--berry); font-size:19px; line-height:1; }
.saved-link>span:last-child { font-size:10px; background:var(--rose); border-radius:50%; min-width:19px; min-height:19px; display:grid; place-items:center; }
.hero { display:grid; grid-template-columns:1fr .94fr; gap:78px; align-items:center; padding-top:65px; padding-bottom:64px; }
.hero-copy { padding-bottom:10px; }
.small-star { font-size:17px; margin-right:9px; vertical-align:middle; }
.hero-script { font-family:var(--serif); font-style:italic; font-size:36px; color:var(--berry); margin-top:34px; margin-bottom:13px; }
h1 { font-size:clamp(44px,4.7vw,65px); font-weight:650; line-height:1.35; letter-spacing:-2px; }
.underlined { position:relative; display:inline-block; }
.underlined::after { content:""; position:absolute; width:105%; height:10px; bottom:2px; left:-2px; background:#e9b8c5; border-radius:50%; z-index:-1; transform:rotate(-3deg); }
.hero-description { font-size:14px; line-height:2; color:var(--muted); margin-top:25px; }
.hero-actions { display:flex; align-items:center; gap:26px; margin-top:30px; }
.hero-note { display:flex; align-items:center; gap:14px; border-top:1px solid var(--line); margin-top:42px; padding-top:23px; }
.hero-note>span { color:var(--berry); font-size:30px; }
.hero-note p { font-size:11px; line-height:1.9; color:var(--muted); }
.hero-note p span { font-size:9px; letter-spacing:.7px; }
.hero-photo { position:relative; margin-right:14px; }
.photo-frame { position:relative; padding:10px; background:#fffdf9; box-shadow:8px 9px 0 #ebdfd9; transform:rotate(2deg); }
.photo-frame img { width:100%; height:520px; object-fit:cover; object-position:50% 44%; }
.photo-label { position:absolute; bottom:30px; left:29px; color:#fff; font-size:34px; letter-spacing:1px; font-family:var(--serif); text-shadow:0 1px 8px #38272c66; }
.photo-label span { display:block; font-family:system-ui,sans-serif; font-size:12px; letter-spacing:4px; margin-top:6px; }
.photo-sticker { position:absolute; top:28px; right:-34px; width:113px; height:113px; display:flex; flex-direction:column; align-items:center; justify-content:center; border-radius:50%; border:1px solid #c3aaa8; background:#f3eddb; color:var(--berry); transform:rotate(13deg); font-family:var(--serif); font-size:16px; line-height:1.25; box-shadow:4px 4px 0 #38272c0b; }
.photo-sticker em { font-size:24px; }
.hero-photo figcaption { display:flex; justify-content:space-between; gap:10px; font-size:8px; letter-spacing:.8px; margin-top:24px; color:var(--muted); }
.photo-spark { position:absolute; font-size:85px; left:-45px; bottom:32px; color:var(--berry); line-height:1; }
.ribbon { overflow:hidden; border-block:1px solid #d6bec3; background:#efdde1; padding:17px 0; }
.ribbon>div { display:flex; align-items:center; justify-content:center; gap:38px; white-space:nowrap; font-size:13px; letter-spacing:2px; color:var(--berry); width:max-content; min-width:100%; }
.ribbon span { font-size:20px; }
.about { display:grid; grid-template-columns:.8fr 1.2fr; gap:80px; align-items:center; }
.section-intro h2 { margin-top:18px; }
.section-intro>p:last-child { font-size:13px; line-height:2; color:var(--muted); margin-top:21px; }
.profile-card { background:#f3ede5; border:1px solid var(--line); padding:31px 35px; position:relative; }
.profile-heading { display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #dcd0c8; padding-bottom:21px; }
.profile-korean { font-size:11px; color:var(--muted); margin-bottom:7px; letter-spacing:3px; }
.profile-heading h3 { font-size:24px; font-weight:600; }
.profile-heading h3 span { display:block; margin-top:8px; font-size:9px; font-weight:500; letter-spacing:2px; }
.profile-flower { color:var(--berry); font-size:57px; line-height:1; }
.profile-facts { display:grid; grid-template-columns:repeat(4,1fr); gap:15px; margin-block:24px; }
.profile-facts dt { font-size:10px; color:var(--muted); margin-bottom:9px; }
.profile-facts dd { font-size:13px; font-weight:600; }
.profile-description { font-size:12px; line-height:1.9; color:var(--muted); }
.source-link { display:inline-block; margin-top:17px; font-size:10px; color:var(--muted); }
.guide { border-block:1px solid var(--line); padding-block:34px 40px; }
.guide-title { display:flex; align-items:center; justify-content:space-between; margin-bottom:29px; }
.guide-title h2 { font-size:20px; }
.guide-grid { display:grid; grid-template-columns:repeat(3,1fr); }
.guide-item { display:flex; gap:20px; padding-inline:27px; border-right:1px solid var(--line); }
.guide-item:first-child { padding-left:0; }
.guide-item:last-child { padding-right:0; border-right:0; }
.step-number { font-family:var(--serif); font-style:italic; font-size:36px; color:#bd8292; line-height:1; }
.guide-item h3 { font-size:14px; font-weight:600; }
.guide-item p { font-size:12px; line-height:1.85; color:var(--muted); margin-top:10px; }
.guide-action { display:flex; justify-content:space-between; align-items:center; gap:15px; margin-top:18px; font-size:11px; color:var(--berry); font-weight:600; }
.guide-item:hover .guide-action { text-decoration:underline; text-underline-offset:4px; }
.section-top { display:flex; align-items:end; justify-content:space-between; gap:20px; }
.section-top h2 { margin-top:15px; }
.section-description { font-size:12px; line-height:1.9; color:var(--muted); margin-top:13px; }
.random-button { white-space:nowrap; border-bottom:1px solid #c6a4ae; margin-bottom:8px; }
.watch-toolbar { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-block:29px; }
.filters { display:flex; gap:8px; flex-wrap:wrap; }
.filters button { border:1px solid var(--line); background:transparent; padding:10px 17px; border-radius:30px; font-size:11px; min-height:40px; }
.filters button[aria-pressed="true"] { background:var(--berry); border-color:var(--berry); color:var(--paper); }
.filters button:hover { border-color:var(--berry); }
.filters button span { opacity:.75; font-size:10px; margin-left:5px; }
.result-count { font-size:10px; color:var(--muted); white-space:nowrap; }
.video-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:36px 26px; margin-top:29px; }
.video-card { min-width:0; border:1px solid var(--line); background:#fffaf5; transition:box-shadow .2s,transform .2s; scroll-margin-top:120px; }
.video-card:hover { transform:translateY(-3px); box-shadow:0 10px 25px #38272c0b; }
.video-card.picked { outline:3px solid var(--berry); outline-offset:5px; }
.video-cover { height:238px; padding:21px 25px; position:relative; display:flex; flex-direction:column; justify-content:space-between; overflow:hidden; }
.cover-caption { font-size:8px; letter-spacing:1.7px; position:relative; z-index:1; }
.cover-title { font-family:var(--serif); font-size:49px; letter-spacing:-2px; line-height:1; position:relative; z-index:1; }
.cover-title i { font-weight:400; }
.cover-bottom { display:flex; justify-content:space-between; align-items:center; font-size:9px; letter-spacing:2px; position:relative; z-index:1; }
.play-circle { display:grid; place-items:center; width:29px; height:29px; border:1px solid currentColor; border-radius:50%; font-size:18px; }
.video-cover:hover .play-circle { background:#ffffff55; }
.cover-love { color:#793147; background:#e9c7d0; }
.love-heart { position:absolute; font-family:var(--serif); font-size:210px; line-height:1; transform:rotate(-15deg); right:-22px; top:25px; color:#c28698; }
.cover-iam { color:#f3eadf; background:#516e65; }
.cover-iam .cover-title { font-size:70px; }
.cover-orbit { position:absolute; width:260px; height:125px; border:1px solid #dce2b7a6; border-radius:50%; transform:rotate(-38deg); top:52px; right:-40px; }
.cover-orbit::after { content:"✧"; position:absolute; right:20px; top:-26px; font-size:62px; color:#dce2b7; }
.cover-after { background:#efe0ae; color:#805142; }
.cover-burst { position:absolute; font-size:198px; line-height:1; right:-24px; top:14px; color:#d59471; transform:rotate(18deg); }
.cover-eleven { background:#4a384a; color:#f3dfd8; }
.cover-eleven .cover-title { font-size:41px; letter-spacing:2px; }
.eleven-number { position:absolute; font-family:var(--serif); font-size:235px; line-height:1; color:#6e536e; right:4px; top:-18px; letter-spacing:-25px; }
.cover-stage { background:#e6dfd4; color:#51404a; }
.cover-stage .cover-title { font-size:45px; }
.stage-star { position:absolute; font-size:194px; top:9px; right:-2px; color:#b5a2ae; line-height:1; }
.cover-daily { background:#d5e2df; color:#36594f; }
.daily-flower { position:absolute; font-size:180px; right:-15px; top:30px; color:#a2bcb0; line-height:1; }
.video-body { padding:20px 23px 22px; }
.video-meta { display:flex; align-items:center; justify-content:space-between; font-size:9px; color:var(--muted); }
.video-meta>span { color:var(--berry); background:#f2e5e7; border-radius:3px; padding:4px 7px; }
.video-title-row { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:8px; min-height:44px; }
.video-title-row h3 { font-size:17px; font-weight:600; }
.save-button { flex-shrink:0; display:grid; place-items:center; width:44px; height:44px; border:0; background:transparent; font-size:25px; color:var(--berry); border-radius:50%; }
.save-button:hover { background:#f2e5e7; }
.save-button[aria-pressed="true"] { color:var(--berry); }
.video-body>p { font-size:12px; color:var(--muted); line-height:1.9; margin-top:6px; min-height:46px; }
.video-source { display:inline-block; color:var(--muted); font-size:10px; margin-top:22px; }
.empty-state { text-align:center; padding:60px 20px; background:#f3ede5; border:1px dashed #c5a4ad; }
.empty-state>span { font-size:45px; color:var(--berry); }
.empty-state h3 { margin-top:12px; font-size:19px; }
.empty-state p { font-size:12px; line-height:1.9; color:var(--muted); margin:15px 0 25px; }
.watch-note { margin-top:25px; font-size:10px; line-height:1.8; color:var(--muted); }
.watch-note span { margin-left:8px; }
.birthday { background:#eee1e2; border:1px solid #e1cdcf; display:grid; grid-template-columns:1.2fr .8fr; padding:51px 55px; align-items:center; gap:35px; }
.birthday-copy h2 { font-size:28px; line-height:1.7; margin-block:16px; }
.birthday-copy>p:not(.eyebrow) { font-size:12px; line-height:1.9; color:var(--muted); }
.birthday-copy .text-link { margin-top:19px; color:var(--berry); }
.birthday-date { border-left:1px solid #d8c1c6; text-align:center; padding-left:30px; position:relative; }
.birthday-date>p:first-of-type { font-size:12px; letter-spacing:4px; color:var(--berry); }
.date-number { font-family:var(--serif); font-size:86px; letter-spacing:-5px; color:var(--berry); margin-top:7px; }
.date-number span { font-size:48px; padding:0 8px; vertical-align:15px; }
#birthday-countdown { font-size:12px; margin-top:8px; color:var(--berry); }
.birthday-small { font-size:8px; letter-spacing:2px; color:var(--muted); display:block; margin-top:25px; }
.birthday-flower { position:absolute; top:-15px; right:-5px; font-size:38px; color:var(--berry); transform:rotate(15deg); }
.official { display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center; }
.official h2 { font-size:27px; margin-top:17px; }
.official>div>p:last-child { font-size:13px; line-height:1.9; color:var(--muted); margin-top:16px; }
.official-links a { display:flex; align-items:center; gap:20px; padding:20px 0; border-bottom:1px solid var(--line); }
.official-links a:first-child { border-top:1px solid var(--line); }
.official-links a>span:first-child { font-size:11px; color:var(--berry); font-family:var(--serif); }
.official-links a>div { flex:1; font-size:14px; }
.official-links a small { display:block; font-size:10px; margin-top:6px; color:var(--muted); }
.official-links a:hover { color:var(--berry); }
.official-links a>span:last-child { font-size:20px; }
.footer { border-top:1px solid var(--line); padding-top:40px; }
.footer-main { display:flex; align-items:center; justify-content:space-between; gap:25px; }
.footer-brand { font-family:var(--serif); font-style:italic; font-size:26px; color:var(--berry); white-space:nowrap; }
.footer-brand>span { margin-left:12px; font-size:20px; }
.footer-main>p { font-size:10px; line-height:1.9; color:var(--muted); flex:1; margin-left:40px; }
.back-top { font-size:10px; white-space:nowrap; }
details { color:var(--muted); margin-top:28px; font-size:10px; line-height:1.9; }
summary { cursor:pointer; width:fit-content; }
details p { margin-top:10px; max-width:850px; }
details a { text-decoration:underline; text-underline-offset:3px; }
.footer-bottom { display:flex; justify-content:space-between; gap:15px; font-size:8px; letter-spacing:1.3px; padding-block:28px; margin-top:25px; border-top:1px solid var(--line); color:var(--muted); }
.toast { position:fixed; bottom:25px; left:50%; transform:translate(-50%,20px); background:var(--ink); color:var(--paper); padding:14px 22px; border-radius:4px; font-size:12px; z-index:30; opacity:0; pointer-events:none; transition:opacity .2s,transform .2s; width:max-content; max-width:calc(100% - 32px); line-height:1.7; }
.toast.visible { opacity:1; transform:translate(-50%,0); }
@media (min-width:1450px) { .hero { padding-block:85px; } .photo-frame img { height:565px; } }
@media (max-width:1050px) {
  .wrap { width:calc(100% - 64px); }
  .hero { gap:45px; }
  .hero-script { font-size:31px; }
  h1 { font-size:49px; }
  .hero-actions { gap:17px; }
  .hero-actions .button { padding-inline:17px; gap:16px; }
  .photo-frame img { height:470px; }
  .photo-sticker { right:-20px; width:94px; height:94px; font-size:14px; }
  .photo-sticker em { font-size:21px; }
  .hero-photo figcaption { font-size:7px; letter-spacing:0; }
  .about { gap:40px; }
  .profile-card { padding:28px; }
  .profile-facts { grid-template-columns:repeat(2,1fr); gap:22px; }
  .guide-item { gap:12px; padding-inline:20px; }
  .video-cover { height:215px; padding-inline:20px; }
  .cover-title { font-size:43px; }
  .cover-eleven .cover-title { font-size:33px; }
  .cover-stage .cover-title { font-size:38px; }
  .video-body { padding-inline:18px; }
  .birthday { padding:40px; }
  .birthday-copy h2 { font-size:25px; }
  .date-number { font-size:72px; }
  .official { gap:40px; }
  .official h2 { font-size:24px; }
}
@media (max-width:760px) {
  html { scroll-padding-top:95px; }
  .wrap { width:calc(100% - 40px); }
  .section { padding-block:65px; }
  .header-inner { min-height:75px; gap:15px; flex-wrap:wrap; }
  .brand { font-size:9px; gap:6px; }
  .brand-flower { font-size:34px; }
  nav { gap:19px; font-size:11px; }
  .saved-link { display:none; }
  .hero { padding-top:35px; padding-bottom:45px; grid-template-columns:1fr; gap:40px; }
  .hero-copy { padding:0; }
  .eyebrow { font-size:9px; letter-spacing:1.5px; }
  .hero-script { font-size:32px; margin-top:22px; }
  h1 { font-size:52px; letter-spacing:-1.5px; }
  .hero-description { font-size:13px; margin-top:19px; }
  .hero-actions { gap:23px; margin-top:24px; }
  .hero-actions .button { font-size:12px; padding-inline:19px; }
  .hero-note { margin-top:28px; padding-top:18px; }
  .hero-photo { width:min(430px,calc(100% - 20px)); margin-inline:auto; }
  .photo-frame img { height:440px; }
  .photo-sticker { right:-12px; top:20px; }
  .photo-spark { left:-20px; bottom:38px; font-size:65px; }
  .hero-photo figcaption { font-size:7px; margin-top:21px; }
  .ribbon { padding-block:13px; }
  .ribbon>div { font-size:10px; gap:25px; }
  .about { grid-template-columns:1fr; gap:30px; }
  h2 { font-size:25px; letter-spacing:-.7px; }
  .section-intro h2 { margin-top:12px; }
  .section-intro>p:last-child { margin-top:14px; }
  .profile-card { padding:26px; }
  .guide-title { display:block; margin-bottom:24px; }
  .guide-title h2 { margin-top:12px; }
  .guide-grid { grid-template-columns:1fr; gap:0; }
  .guide-item { padding:22px 0; border-right:0; border-bottom:1px solid var(--line); gap:23px; }
  .guide-item:first-child { padding-top:0; }
  .guide-item:last-child { padding-bottom:0; border-bottom:0; }
  .step-number { font-size:33px; }
  .guide-action { margin-top:12px; }
  .section-top { align-items:start; flex-direction:column; gap:12px; }
  .section-top h2 { margin-top:12px; }
  .random-button { margin:0; padding:8px 0; }
  .section-description { margin-top:18px; }
  .watch-toolbar { flex-direction:column; align-items:start; gap:13px; margin-block:23px; }
  .filters { gap:7px; }
  .filters button { padding:9px 14px; }
  .video-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px 15px; margin-top:23px; }
  .video-cover { height:205px; padding:16px; }
  .cover-caption { font-size:6px; letter-spacing:1px; }
  .cover-title { font-size:40px; }
  .cover-stage .cover-title { font-size:34px; }
  .cover-eleven .cover-title { font-size:27px; letter-spacing:0; }
  .cover-iam .cover-title { font-size:52px; }
  .cover-bottom { font-size:6px; letter-spacing:1px; }
  .video-body { padding:15px; }
  .video-title-row h3 { font-size:14px; }
  .video-meta { font-size:8px; }
  .video-body>p { font-size:11px; }
  .video-source { font-size:9px; margin-top:15px; }
  .birthday { padding:30px 26px; grid-template-columns:1fr; gap:30px; }
  .birthday-copy h2 { font-size:22px; }
  .birthday-date { border-left:0; border-top:1px solid #d8c1c6; padding:30px 0 0; }
  .birthday-flower { top:23px; right:5px; }
  .date-number { font-size:90px; }
  .official { grid-template-columns:1fr; gap:25px; }
  .official h2 { font-size:24px; }
  .footer { padding-top:30px; }
  .footer-main { flex-wrap:wrap; gap:22px; }
  .footer-brand { font-size:25px; }
  .footer-main>p { margin-left:0; flex:auto; width:100%; order:3; }
  .footer-bottom { font-size:7px; letter-spacing:.6px; flex-wrap:wrap; }
  .footer-bottom>span:nth-child(2) { display:none; }
}
@media (max-width:430px) {
  nav { gap:13px; }
  .video-grid { grid-template-columns:1fr; gap:25px; }
  .video-cover { height:245px; padding:23px 27px; }
  .cover-caption { font-size:9px; letter-spacing:1.5px; }
  .cover-title { font-size:53px; }
  .cover-stage .cover-title { font-size:47px; }
  .cover-eleven .cover-title { font-size:43px; letter-spacing:2px; }
  .cover-iam .cover-title { font-size:74px; }
  .cover-bottom { font-size:9px; letter-spacing:2px; }
  .video-body { padding:20px 23px; }
  .video-title-row h3 { font-size:18px; }
  .video-meta { font-size:10px; }
  .video-body>p { font-size:12px; }
  .video-source { font-size:10px; }
  .hero-photo { width:calc(100% - 20px); }
  .photo-frame img { height:400px; }
  .photo-label { font-size:29px; }
  .hero-note p { font-size:10px; }
  .hero-note p span { font-size:8px; }
}
@media (max-width:360px) { h1 { font-size:44px; } .hero-actions { gap:14px; } .hero-actions .button { padding-inline:13px; } .text-link { font-size:11px; gap:10px; } nav { gap:10px; font-size:10px; } .brand { font-size:8px; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { transition:none !important; animation:none !important; } }