@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;600;700;800;900&family=Outfit:wght@400;500;600;700;800&display=swap');
:root { color-scheme: dark; --bg:#171611; --surface:#1d1c16; --text:#f4f0e5; --muted:#b8b4a8; --line:#dcd6c5; --rule:#48453a; --cell-border:#817b6b; --yellow:#f5cb46; --green:#82c68a; --red:#ee7467; --today:#85847d; --blank:#26251f; --shadow:#080806; --ink:#171611; --cell:12px; --cell-gap:4px; --font:'Outfit','Noto Sans KR',system-ui,sans-serif; }
:root[data-theme='light'] { color-scheme:light; --bg:#f6f3e9; --surface:#fbf8ef; --text:#222119; --muted:#706b5e; --line:#353229; --rule:#d7d0bf; --cell-border:#8b826e; --yellow:#e2ad13; --green:#4c9e5b; --red:#d85447; --today:#93918a; --blank:#eae5d7; --shadow:#d1c9b8; }
* { box-sizing:border-box; }
html { scroll-padding-top:24px; }
body { margin:0; background:var(--bg); color:var(--text); font-family:var(--font); -webkit-font-smoothing:antialiased; }
button,input { font:inherit; }
button,a,input { -webkit-tap-highlight-color:transparent; }
button { color:inherit; cursor:pointer; }
a { color:inherit; text-decoration:none; }
button { border:0; }
button:focus-visible,a:focus-visible,input:focus-visible,[tabindex]:focus-visible { outline:2px solid var(--yellow); outline-offset:5px; }
button:disabled { cursor:default; }
[hidden] { display:none!important; }
svg { width:20px; height:20px; display:block; flex:none; }
h1,h2,h3,p,dl,dd { margin:0; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link { position:fixed; top:12px; left:20px; padding:12px 18px; background:var(--yellow); color:var(--ink); z-index:10; clip-path:inset(50%); }
.skip-link:focus { clip-path:none; }
.page-shell { width:calc(100% - 96px); max-width:1800px; margin-inline:auto; }
.site-header { min-height:94px; display:flex; align-items:center; justify-content:space-between; gap:24px; border-bottom:1px solid var(--rule); }
.wordmark { font-size:28px; font-weight:800; letter-spacing:-1.1px; white-space:nowrap; text-align:left; }
.wordmark span,h1 span,.archive-heading h2 span,.about-dialog h2 span { color:var(--yellow); }
.site-header nav { display:flex; align-items:center; gap:28px; font-size:14px; }
.site-header nav>a:hover,.text-button:hover { color:var(--yellow); }
.text-button { display:inline-flex; align-items:center; gap:7px; background:none; padding:0; }
.github-link { display:inline-flex; align-items:center; gap:9px; }
.github-link svg { width:18px; height:18px; }
.icon-button { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; padding:6px; background:none; border:1px solid var(--rule); border-radius:50%; }
.icon-button:hover { border-color:var(--yellow); color:var(--yellow); }
.portal-header,.upper-stack { width:100%; max-width:680px; margin-inline:auto; }
.intro { padding-top:34px; }
h1 { font-size:46px; font-weight:900; line-height:1.3; letter-spacing:-2.2px; word-break:keep-all; }
#intro-heading { text-align:left; }
.intro-note { margin-top:16px; color:var(--muted); font-size:14px; line-height:1.8; word-break:keep-all; }
.featured-carousel { margin-top:26px; }
.featured-build { position:relative; isolation:isolate; border:2px solid var(--line); border-radius:18px; background:var(--surface); box-shadow:5px 5px 0 var(--shadow); overflow:hidden; }
.featured-build.has-slide { width:100%; min-width:0; aspect-ratio:2.5; min-height:234px; touch-action:pan-y pinch-zoom; }
.featured-empty { min-height:210px; position:relative; display:flex; flex-direction:column; justify-content:flex-end; padding:28px; }
.featured-empty h2 { color:var(--yellow); font-size:27px; line-height:1.4; letter-spacing:-.8px; font-weight:800; }
.featured-empty p { color:var(--muted); font-size:15px; line-height:1.7; margin-top:9px; }
.media-glyph { font-family:monospace; font-size:28px; color:var(--rule); position:absolute; left:28px; top:24px; }
.featured-link { display:block; position:absolute; inset:0; }
.featured-link .project-media { height:100%; min-height:0; aspect-ratio:auto; }
.featured-link.is-entering { z-index:1; will-change:opacity,transform; }
.featured-link.is-leaving { pointer-events:none; will-change:opacity,transform; }
.featured-link .fallback-copy strong { font-size:32px; }
.featured-link .fallback-copy p { font-size:16px; }
.featured-link:hover .fallback-copy strong { text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:7px; }
.carousel-controls { display:flex; align-items:center; justify-content:space-between; padding-top:14px; gap:12px; }
.carousel-buttons,.carousel-dots { display:flex; align-items:center; gap:8px; }
.carousel-dots { flex-wrap:wrap; max-width:calc(100% - 140px); }
.carousel-dot { width:24px; height:24px; background:transparent; padding:7px; }
.carousel-dot::after { content:''; display:block; width:10px; height:10px; background:var(--rule); border-radius:50%; }
.carousel-dot[aria-pressed='true']::after { background:var(--yellow); }
.carousel-position { font-size:11px; font-variant-numeric:tabular-nums; color:var(--muted); padding-left:5px; }
.build-stats { display:grid; grid-template-columns:1fr 1fr 1.25fr; gap:20px; padding:31px 0 25px; }
.stat { border-right:1px solid var(--rule); }
.stat:last-child { border:0; }
.stat dt { font-size:13px; color:var(--muted); margin-bottom:6px; }
.stat dd { font-size:35px; line-height:1.15; font-weight:600; font-variant-numeric:tabular-nums; letter-spacing:-1px; }
.stat dd span { font-size:14px; font-weight:500; margin-left:6px; }
.stat-success dd { color:var(--green); }
.stat-failure dd { color:var(--red); }
.stat-tokens dd { font-size:29px; padding-top:4px; }
.calendar-panel { width:100%; padding:22px 22px 18px; border:1px solid var(--rule); border-radius:16px; background:var(--bg); box-shadow:4px 4px 0 var(--shadow); }
.calendar-heading { display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; gap:15px; }
.calendar-heading h2 { font-size:16px; font-weight:700; }
.calendar-heading>span { color:var(--muted); font-size:11px; }
.calendar-matrix { min-width:0; }
.weekdays { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:8px; margin-bottom:9px; color:var(--muted); font-size:11px; text-align:center; }
.weekdays span { line-height:18px; }
.calendar-scroll { min-width:0; }
.calendar-weeks { display:grid; gap:8px; width:100%; }
.calendar-week { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:8px; min-width:0; }
.calendar-cell { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; min-width:0; min-height:62px; aspect-ratio:1.32; padding:8px 4px; color:var(--muted); border:1px solid var(--cell-border); border-radius:9px; font-variant-numeric:tabular-nums; }
.calendar-day-number { font-size:23px; line-height:1; font-weight:600; letter-spacing:-.7px; }
.calendar-date { font-size:10px; line-height:1.2; }
a.calendar-cell { transition:transform .15s ease,outline-color .15s ease; }
a.calendar-cell:hover { outline:1px solid var(--text); outline-offset:2px; transform:translateY(-2px); }
.cell-success { background:var(--green); border-color:var(--green); }
.cell-failure { background:var(--red); border-color:var(--red); }
.cell-today { background:var(--today); border-color:var(--today); }
.calendar-cell.cell-success,.calendar-cell.cell-failure,.calendar-cell.cell-today { color:var(--ink); }
.calendar-cell.cell-today { outline:1px solid var(--text); outline-offset:2px; }
.cell-future,.cell-blank { background:var(--bg); border-color:var(--cell-border); }
.calendar-legend { display:flex; justify-content:flex-end; align-items:center; gap:14px; list-style:none; padding:0; margin:18px 0 0; font-size:10px; color:var(--muted); }
.calendar-legend li { display:flex; align-items:center; gap:5px; }
.calendar-legend i { display:block; width:9px; height:9px; border:1px solid var(--cell-border); border-radius:2px; }
.archive-toolbar { margin-top:26px; }
.search-field { display:flex; align-items:center; gap:10px; width:100%; border-bottom:1px solid var(--line); padding:12px 1px; }
.search-field svg { color:var(--muted); width:18px; height:18px; }
.search-field input { width:100%; border:0; color:var(--text); background:transparent; outline:none; font-size:15px; }
.search-field input::placeholder { color:var(--muted); }
.search-field:focus-within { border-color:var(--yellow); }
.search-field input:focus-visible { outline:none; }
.filters { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.filters button { background:none; border:1px solid var(--rule); padding:7px 14px; border-radius:20px; font-size:12px; white-space:nowrap; }
.filters button[aria-pressed='true'] { background:var(--yellow); color:var(--ink); border-color:var(--yellow); font-weight:700; }
.filters button:hover { border-color:var(--yellow); }
.archive { margin-top:43px; }
.archive-heading { display:flex; align-items:baseline; gap:18px; width:100%; max-width:680px; margin:0 auto 24px; }
.archive-heading h2 { font-size:26px; font-weight:800; letter-spacing:-.8px; }
.archive-heading p { font-size:12px; color:var(--muted); }
.build-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.announcement-card { position:relative; background:var(--surface); border:2px solid var(--line); border-radius:17px; box-shadow:5px 5px 0 var(--shadow); display:flex; flex-direction:column; min-width:0; overflow:hidden; content-visibility:auto; contain-intrinsic-size:auto 360px; }
.announcement-card:hover { border-color:var(--yellow); }
.announcement-card.is-failure:hover { border-color:var(--red); }
.placeholder-card { border-style:dashed; border-color:var(--rule); background:var(--bg); box-shadow:none; }
.placeholder-card:hover { border-color:var(--rule); }
.placeholder-card.is-today { border-color:var(--today); }
.placeholder-card.is-today:hover { border-color:var(--today); }
.placeholder-card .card-date { color:var(--muted); }
.placeholder-card .outcome { color:var(--muted); }
.placeholder-media { display:flex; flex-direction:column; justify-content:flex-end; padding:28px; background-image:radial-gradient(var(--rule) .6px,transparent .6px); background-size:12px 12px; }
.placeholder-copy { position:relative; background:var(--bg); }
.placeholder-copy h3 { font-size:25px; font-weight:700; line-height:1.4; letter-spacing:-.7px; word-break:keep-all; }
.placeholder-copy p { margin-top:10px; color:var(--muted); font-size:13px; line-height:1.7; word-break:keep-all; }
.announcement-main { display:flex; flex-direction:column; flex:1; }
.card-heading { display:flex; justify-content:space-between; align-items:center; gap:14px; padding:22px 20px 18px; }
.day-stamp { display:inline-flex; align-items:baseline; gap:7px; white-space:nowrap; color:var(--yellow); line-height:1; }
.day-word { font-size:14px; font-weight:500; font-style:italic; letter-spacing:-.2px; }
.day-number { font-size:52px; font-weight:800; letter-spacing:-2.5px; font-variant-numeric:tabular-nums; }
.placeholder-card .day-stamp { color:var(--text); }
.placeholder-card.is-today .day-stamp { color:var(--yellow); }
.is-failure .day-stamp { color:var(--red); }
.card-date { display:flex; flex-direction:column; align-items:flex-end; gap:8px; min-width:0; font-size:11px; font-weight:500; font-variant-numeric:tabular-nums; color:var(--muted); }
.card-date time { white-space:nowrap; }
.outcome { border:1px solid currentColor; padding:3px 9px; border-radius:12px; font-size:10px; }
.outcome-success { color:var(--green); }
.outcome-failure { color:var(--red); }
.project-media { position:relative; min-width:0; overflow:hidden; }
.announcement-card .project-media { aspect-ratio:1.6; min-height:185px; }
.fallback-media { background-image:radial-gradient(var(--rule) .6px,transparent .6px); background-size:12px 12px; display:flex; align-items:flex-end; padding:28px; }
.fallback-copy { position:relative; z-index:1; width:100%; }
.fallback-copy strong { color:var(--yellow); font-size:25px; font-weight:800; letter-spacing:-.8px; line-height:1.35; word-break:keep-all; background:var(--surface); box-shadow:7px 0 var(--surface),-4px 0 var(--surface); }
.fallback-copy p { margin-top:10px; font-size:13px; line-height:1.7; color:var(--muted); background:var(--surface); word-break:keep-all; }
.failure-media .fallback-copy strong { color:var(--red); }
.failure-media .media-glyph { color:var(--red); opacity:.6; font-size:34px; }
.image-media img { display:block; width:100%; height:100%; object-fit:cover; background:var(--blank); }
.image-caption { position:absolute; inset:auto 0 0; padding:45px 22px 20px; background:linear-gradient(transparent,rgba(0,0,0,.87)); color:#fff8e7; }
.image-caption strong { font-size:24px; font-weight:800; }
.image-caption p { font-size:12px; line-height:1.6; margin-top:6px; }
.card-info { padding:17px 20px; margin-top:auto; }
.card-meta { display:flex; align-items:baseline; gap:12px; color:var(--muted); font-size:11px; line-height:1.5; }
.card-tokens { margin-top:10px; color:var(--muted); font-size:10px; }
.card-links { display:flex; align-items:center; flex-wrap:wrap; gap:16px; border-top:1px solid var(--rule); padding:13px 20px; }
.release-link { display:inline-flex; align-items:center; gap:5px; font-size:12px; }
.release-link svg { width:15px; height:15px; }
.release-link:hover { color:var(--yellow); }
.empty-state { max-width:680px; padding:33px 0 40px; color:var(--muted); }
.empty-symbol { display:block; color:var(--rule); font:36px monospace; margin-bottom:16px; }
.empty-state h3 { font-size:19px; color:var(--text); font-weight:600; }
.empty-state p { margin-top:10px; font-size:14px; line-height:1.8; }
.outline-button { display:inline-flex; align-items:center; justify-content:center; gap:10px; border:1px solid var(--line); border-radius:24px; padding:10px 18px; background:transparent; font-size:13px; box-shadow:3px 3px 0 var(--shadow); }
.outline-button:hover { border-color:var(--yellow); color:var(--yellow); }
.empty-state .outline-button { margin-top:22px; }
.load-more { display:flex; justify-content:center; margin-top:32px; padding:12px 0; }
.load-error { padding:25px 0; color:var(--red); }
.load-error button { margin-top:18px; }
.site-footer { display:flex; align-items:center; justify-content:space-between; gap:20px; border-top:1px solid var(--rule); padding:27px 0 32px; margin-top:38px; font-size:12px; color:var(--muted); }
.site-footer nav { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:12px 20px; }
.privacy-link { font-weight:700; color:var(--text); }
.site-footer .privacy-link:hover,.admin-footer .privacy-link:hover { color:var(--yellow); }
.admin-footer .privacy-link { margin-left:24px; }
@media(max-width:759px) { .site-footer { flex-wrap:wrap; } .site-footer nav { gap:12px 16px; } }
.demo-banner { border:1px dashed var(--yellow); color:var(--yellow); padding:12px 16px; margin-top:22px; font-size:13px; }
.about-dialog { width:min(580px,calc(100% - 40px)); background:var(--surface); color:var(--text); padding:0; border:2px solid var(--line); border-radius:20px; box-shadow:7px 7px 0 var(--shadow); }
.about-dialog::backdrop { background:rgba(0,0,0,.72); backdrop-filter:blur(5px); }
.dialog-content { position:relative; padding:42px 32px 32px; }
.dialog-close { position:absolute; right:18px; top:16px; }
.about-dialog h2 { font-size:28px; margin-bottom:22px; }
.about-dialog p { color:var(--muted); font-size:15px; line-height:1.9; margin-bottom:18px; word-break:keep-all; }
.detail-shell { max-width:1000px; }
.back-link { display:inline-flex; align-items:center; gap:8px; margin-top:32px; color:var(--muted); font-size:13px; }
.detail-content { padding:28px 0; }
.detail-kicker { display:flex; gap:16px; align-items:center; font-size:13px; margin-bottom:20px; }
.detail-title { font-size:42px; line-height:1.35; color:var(--yellow); font-weight:800; letter-spacing:-1.3px; word-break:keep-all; }
.detail-title.failure-title { color:var(--red); }
.detail-lead { margin-top:18px; font-size:18px; color:var(--muted); line-height:1.8; }
.detail-media { margin-top:30px; border:2px solid var(--line); border-radius:18px; overflow:hidden; }
.detail-media .project-media { min-height:260px; aspect-ratio:1.8; }
.detail-media .fallback-copy strong { font-size:34px; }
.detail-facts { display:flex; flex-wrap:wrap; gap:12px 28px; border-block:1px solid var(--rule); margin-top:26px; padding:20px 0; font-size:13px; }
.detail-facts dt { color:var(--muted); margin-bottom:8px; }
.detail-actions { display:flex; flex-wrap:wrap; gap:18px; margin:24px 0 32px; }
.detail-actions .release-link { font-size:15px; border-bottom:2px solid var(--yellow); padding-bottom:6px; }
.detail-body { max-width:720px; font-size:16px; line-height:1.95; }
.detail-body p { margin-bottom:20px; color:var(--muted); white-space:pre-line; }
.detail-body h2 { font-size:23px; margin:28px 0 16px; }
@media(min-width:1520px) { .build-list { grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media(max-width:1159px) { .build-list { grid-template-columns:repeat(2,minmax(0,1fr)); } .page-shell { width:calc(100% - 64px); } }
@media(max-width:759px) { .page-shell { width:calc(100% - 40px); } .site-header { min-height:77px; gap:16px; } .wordmark { font-size:24px; letter-spacing:-.8px; } .site-header nav { gap:14px; } .desktop-nav,.github-label { display:none; } .intro { padding-top:30px; } h1 { font-size:clamp(27px,5.6vw,42px); line-height:1.4; letter-spacing:-1.4px; } .featured-carousel { margin-top:23px; } .featured-empty { min-height:198px; padding:24px; } .featured-empty h2 { font-size:22px; } .featured-empty p { font-size:13px; } .featured-link .project-media { min-height:210px; aspect-ratio:1.75; } .featured-link .fallback-copy strong { font-size:27px; } .featured-link .fallback-copy p { font-size:14px; } .build-stats { gap:16px; padding:28px 0 23px; } .stat dt { font-size:11px; } .stat dd { font-size:31px; } .stat-tokens dd { font-size:24px; } .calendar-panel { padding:16px 15px 13px; } .calendar-heading>span { font-size:10px; } .archive-toolbar { margin-top:23px; } .filters { gap:7px; } .filters button { padding:7px 12px; font-size:11px; } .archive { margin-top:34px; } .archive-heading { justify-content:space-between; gap:8px; margin-bottom:20px; } .archive-heading h2 { font-size:23px; } .archive-heading p { font-size:10px; } .build-list { grid-template-columns:1fr; gap:24px; } .announcement-card .project-media { min-height:200px; } .site-footer { align-items:flex-start; font-size:10px; gap:12px; } .site-footer svg { width:14px; height:14px; } .detail-title { font-size:31px; } .detail-lead { font-size:16px; } .detail-media .project-media { min-height:230px; aspect-ratio:1.5; } .detail-media .fallback-copy strong { font-size:27px; } }
@media(max-width:359px) { .page-shell { width:calc(100% - 32px); } .wordmark { font-size:21px; } .site-header nav { gap:9px; } h1 { font-size:25px; } .stat-tokens dd { font-size:20px; } .filters button { padding:6px 10px; } .calendar-legend { gap:10px; } }
@media(max-width:759px) { .calendar-heading { margin-bottom:17px; } .weekdays,.calendar-week { gap:5px; } .calendar-weeks { gap:6px; } .calendar-cell { min-height:53px; aspect-ratio:auto; gap:5px; padding:8px 2px; border-radius:6px; } .calendar-day-number { font-size:18px; letter-spacing:-.4px; } .calendar-date { font-size:9px; } .calendar-legend { margin-top:16px; gap:13px; } }
@media(prefers-reduced-motion:reduce) { a.calendar-cell { transition:none; } a.calendar-cell:hover { transform:none; } }
@media(max-width:759px) { .featured-build.has-slide { aspect-ratio:1.75; min-height:214px; } .featured-link .project-media { min-height:0; aspect-ratio:auto; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }
@media(max-width:759px) { .intro-note { font-size:13px; } }

.card-community{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;padding:0 20px 16px}.card-community .card-links{padding:0;border:0}.reactions{display:flex;align-items:center;gap:4px}.reactions button{display:inline-flex;align-items:center;gap:6px;background:transparent;border:1px solid var(--rule);border-radius:4px;padding:7px 9px;font-size:11px;color:var(--muted);min-width:47px}.reactions svg{width:15px;height:15px}.reactions button:hover{color:var(--text);border-color:var(--yellow)}.reactions button[aria-pressed=true]{color:var(--yellow);border-color:var(--yellow);background:color-mix(in srgb,var(--yellow) 8%,transparent)}.reactions .reaction-message:not(.sr-only){max-width:180px;font-size:10px;color:var(--red)}.detail-actions .reactions{margin-left:auto}