/* Home and project pages. Text belongs in src/templates/, not in CSS.
   Planning-note look: one white sheet (.page) on a light gray background (--bg in common.css), centered column,
   green highlighter on section titles, dashed note rules between sections, solid action buttons.
   Spacing follows the Refactoring UI scale (4/8/12/16/24/32/48/64px): tight inside a group, wide between groups.
   Type follows its scale (14/16/18/20/24/30px + 64px name). */
.page {
  --column: 720px; --box-padding: 48px;
  --text-display: 4rem; --text-project: 1.875rem; --text-title: 1.5rem; --text-lead: 1.25rem; --text-body: 1.125rem; --text-meta: 1rem;
  --gap-tight: 4px; --gap-group: 8px; --gap-block: 24px; --gap-actions: 32px; --section-gap: 64px;
  --line-heading: 1.2; --line-compact: 1.5; --line-text: 1.6;
  --note-rule: 1px dashed rgba(32, 33, 31, .28);
  position: relative; z-index: 1; box-sizing: border-box; width: min(calc(var(--column) + 2 * var(--box-padding)), calc(100% - 32px)); margin: 40px auto; padding: 64px var(--box-padding); border: 1px solid var(--line); border-radius: 12px; background: #fff; text-align: center;
}

/* Whole-pixel line boxes (avoids 28.8px-style half pixels, including fluid mobile sizes) where CSS round() is supported. */
@supports (line-height: round(1.2em, 1px)) {
  .page { --line-heading: round(1.2em, 1px); --line-compact: round(1.5em, 1px); --line-text: round(1.6em, 1px); }
}

/* Intro: identity group (name, role, school) is tight; statement and buttons are separate blocks. */
.intro h1 { margin: 0; color: var(--accent-deep); font-family: var(--font-display); font-size: var(--text-display); font-weight: 800; line-height: 1; letter-spacing: var(--tracking-heading); }
.intro-role { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 12px 0 0; color: var(--ink); font-size: var(--text-title); font-weight: 800; line-height: var(--line-heading); }
.intro-role-divider { width: 1px; height: 1em; background: rgba(32, 33, 31, .3); }
.intro-school { margin: var(--gap-tight) 0 0; color: var(--muted); font-size: var(--text-meta); font-weight: 500; line-height: var(--line-compact); }
.intro-statement { max-width: 30em; margin: var(--gap-block) auto 0; color: var(--body-ink); font-size: var(--text-lead); font-weight: 500; line-height: var(--line-text); text-wrap: balance; }
.summary-line { display: block; }
.intro-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: var(--gap-actions); }

/* Buttons used for contact and play links */
.action { display: inline-flex; align-items: center; justify-content: center; gap: var(--gap-group); min-height: 52px; padding: 0 24px; border: 1.5px solid var(--ink); border-radius: 8px; background: #fff; color: var(--ink); font-size: var(--text-body); font-weight: 800; line-height: var(--line-compact); text-decoration: none; white-space: nowrap; }
.action img { width: 18px; height: 18px; }
.action-primary { border-color: var(--accent-deep); background: var(--accent-deep); color: #fff; }

/* Sections: the largest gap separates sections; the title sits close to its content. */
.section { margin-top: var(--section-gap); padding-top: var(--section-gap); border-top: var(--note-rule); }
.section-title { margin: 0 0 var(--gap-block); color: var(--ink); font-size: var(--text-project); font-weight: 800; line-height: var(--line-heading); letter-spacing: var(--tracking-heading); }
/* Highlighter stroke (assets/icons/marker.svg): border-image keeps the slanted pen ends (20 units, drawn .7em wide) and stretches
   only the straight middle, so short and long titles get the same ends. One stroke per line if a title ever wraps. */
.marker { padding: 0 .3em; border: 0 solid transparent; border-image: url("../icons/marker.svg") 0 20 fill / 0 .7em stretch; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
/* Key words inside the intro sentence: no padding so the particles stay attached; the stroke reaches past the word instead. */
.intro-statement .marker { padding: 0; border-image-outset: 0 .15em; }
/* The four key words step in the site green from lighter to deeper, in sentence order (아이디어 → 재미). */
.marker-step-1 { border-image-source: url("../icons/marker-step-1.svg"); }
.marker-step-2 { border-image-source: url("../icons/marker-step-2.svg"); }
.marker-step-3 { border-image-source: url("../icons/marker-step-3.svg"); }
.marker-step-4 { border-image-source: url("../icons/marker-step-4.svg"); }

/* Awards: scannable 2 x 2 list */
/* Awards (2026-10-16 user choice, mockup 2 "액정 카드 4장"): each award is a small LCD card like the game screen above (same
   greens and faint grid, glass edge): a pixel game item (assets/images/awards/*.png: Nikoichu's CC0 1-bit icons in the LCD greens, already scaled 3x to 48px, centred) then the award name in the site's bold type and
   the year (screen's pixel font NeoDunggeunmo, declared in games.css, which the home page loads) with the event in one line. All four
   cards look the same (2026-10-16 user request: the grand prize is no longer inverted). */
.award-list { --award-ink: #0f380f; --award-face: #9bbc0f; --award-edge: #8bac0f; --award-grid: rgba(15, 56, 15, .03); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 16px; margin: 0; padding: 0; list-style: none; text-align: center; }
.award-card { position: relative; display: grid; align-content: start; gap: var(--gap-tight); padding: 24px; border-radius: 8px; background: repeating-linear-gradient(0deg, var(--award-grid) 0 1px, transparent 1px 4px), repeating-linear-gradient(90deg, var(--award-grid) 0 1px, transparent 1px 4px), var(--award-face); color: var(--award-ink); }
.award-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 2px var(--award-edge), inset 0 6px 12px rgba(15, 56, 15, .4); pointer-events: none; }
.award-top { display: flex; justify-content: center; margin-bottom: var(--gap-group); }
.award-icon { display: block; width: 48px; height: 48px; image-rendering: pixelated; }
/* The event reads in the site's type; only the year keeps the screen's pixel font, at the start of the same line. */
.award-event { font-size: var(--text-body); font-weight: 500; line-height: var(--line-compact); word-break: keep-all; }
.award-year { font-family: "NeoDunggeunmo", var(--font-body); font-weight: 400; font-synthesis: none; }
/* 22px (phone 20px): one step under the project titles, so the card text stays big without levelling with them. */
.award-name { font-size: 1.375rem; font-weight: 800; line-height: var(--line-heading); letter-spacing: var(--tracking-heading); word-break: keep-all; }

/* Projects: image / heading group (title, meta, award) / buttons */
.project-image-link { display: block; }
.project-image { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border: 1px solid var(--line); border-radius: 8px; }
.project-title { margin: var(--gap-block) 0 0; color: var(--ink); font-size: var(--text-title); font-weight: 800; line-height: var(--line-heading); letter-spacing: var(--tracking-heading); }
.project-meta { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; margin: var(--gap-group) 0 0; color: var(--body-ink); font-size: var(--text-meta); font-weight: 500; line-height: var(--line-compact); word-break: keep-all; }
.project-meta > span:not(.meta-sep) { white-space: nowrap; }
.meta-sep { margin: 0 12px; color: rgba(32, 33, 31, .3); font-weight: 500; }
.project-award { display: block; width: fit-content; max-width: 100%; margin: var(--gap-group) auto 0; padding: 0 .4em; border: 0 solid transparent; border-image: url("../icons/marker.svg") 0 20 fill / 0 .7em stretch; color: var(--accent-deep); font-size: var(--text-body); font-weight: 800; line-height: var(--line-compact); }
.project-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: var(--gap-actions); }

/* Projects (2026-10-14 user choice "썸네일 탭 + 큰 카드"): small title pictures as tabs above one large card
   (project-tabs.js). Nothing of the other cards shows: they share the card's place, hidden, so the section keeps the tallest
   card's height and a change of card happens in place. Without the script the tabs stay hidden and the cards follow one another. */
.ptabs { --tab-speed: 24;  /* 조정값: 탭이 넘칠 때 탭 줄이 1초에 흐르는 거리(px) */ }
/* The row keeps 8px of padding for the focus ring and the chosen picture's outline; equal negative margins keep it out of
   the section's rhythm (title → pictures --gap-block, pictures → card --gap-actions, like every section). */
.ptabs-list { margin: -8px 0 calc(var(--gap-actions) - 8px); padding: 8px; overflow-x: auto; scrollbar-width: none; }
.ptabs-track { display: flex; gap: 12px; }
.ptabs-list::-webkit-scrollbar { display: none; }
.ptabs-list.is-dragging { cursor: grabbing; user-select: none; }
/* Centred while they fit; once there are more than fit, the row scrolls from its first tab. */
.ptabs-tab:first-child { margin-left: auto; }
.ptabs-tab:last-child { margin-right: auto; }
.ptabs-tab { display: grid; gap: var(--gap-group); flex: 0 1 160px; min-width: 112px; padding: 0; border: 0; background: none; color: var(--muted); font: inherit; font-size: var(--text-meta); font-weight: 800; line-height: var(--line-compact); cursor: pointer; }
.ptabs-tab img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border: 1px solid var(--line); border-radius: 8px; opacity: .8; }
.ptabs-tab span { word-break: keep-all; overflow-wrap: anywhere; text-wrap: balance; }
.ptabs-tab[aria-selected="true"] { color: var(--accent-deep); }
.ptabs-tab[aria-selected="true"] img { outline: 2px solid var(--accent-deep); outline-offset: 2px; opacity: 1; }
/* More tabs than fit: the row flows sideways on its own (project-tabs.js moves .ptabs-track) and fades out at both edges. */
.ptabs-list.is-looping { overflow: hidden; touch-action: pan-y; -webkit-mask-image: linear-gradient(90deg, transparent, #000 32px, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(90deg, transparent, #000 32px, #000 calc(100% - 32px), transparent); }
.ptabs-list.is-looping .ptabs-track { width: max-content; will-change: transform; }
.ptabs-list.is-looping .ptabs-tab { flex: none; width: 136px; margin: 0; }
.ptabs:not(.is-ready) .project + .project { margin-top: var(--section-gap); padding-top: var(--section-gap); border-top: var(--note-rule); }
.ptabs.is-ready .ptabs-cards { display: grid; touch-action: pan-y; }
.ptabs.is-ready .ptabs-cards > .project { grid-area: 1 / 1; }
.ptabs.is-ready .ptabs-cards > .project:not(.is-current) { visibility: hidden; opacity: 0; }

/* Release app (출시 앱): same layout as a project, with a status badge under its info line */
.release-status { display: block; width: fit-content; margin: 12px auto 0; padding: var(--gap-tight) 12px; border: 1.5px solid var(--accent-deep); border-radius: 999px; color: var(--accent-deep); font-size: var(--text-meta); font-weight: 800; line-height: var(--line-compact); }
.release-image.project-image { aspect-ratio: auto; }
.release-icon + .project-title { margin-top: var(--gap-block); }
.release-icon { display: block; width: 128px; height: 128px; margin: 0 auto; border: 1px solid var(--line); border-radius: 22.5%; box-shadow: 0 6px 16px rgba(31, 41, 36, .12); }

/* Project detail page */
.project-page { padding-top: 16px; }
.home-link { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1.5px solid var(--ink); border-radius: 50%; background: #fff; }
.home-link img { width: 20px; height: 20px; }
.project-detail { margin-top: var(--gap-block); }
.project-detail h1 { margin: 0; color: var(--ink); font-size: 2.25rem; font-weight: 800; line-height: var(--line-heading); letter-spacing: var(--tracking-heading); }
.project-detail .project-meta { margin-top: 12px; font-variant-numeric: tabular-nums; }
.period-badge img, .period-label { display: none; }
.project-media { margin: 48px 0 0; }
.project-media video { display: block; width: 100%; height: auto; border-radius: 8px; background: #000; }
.play-link { display: flex; align-items: center; justify-content: center; gap: .3em; min-height: 52px; margin-top: var(--gap-block); border-radius: 8px; background: var(--accent-deep); color: #fff; font-size: var(--text-body); font-weight: 800; line-height: var(--line-compact); text-decoration: none; }

@media (max-width: 640px) {
  .ptabs-list.is-looping .ptabs-tab { width: 120px; }
  .page { --box-padding: 20px; --text-display: 2.75rem; --text-project: 1.5rem; --text-title: 1.25rem; --text-lead: 1.125rem; --text-body: 1rem; --text-meta: .875rem; --gap-block: 16px; --gap-actions: 24px; --section-gap: 48px; width: calc(100% - 16px); margin: 8px auto 24px; padding: 48px var(--box-padding); border-radius: 10px; }
  .intro-role { margin-top: 8px; }
  .meta-sep { margin: 0 3px; }
  .release-icon { width: 112px; height: 112px; }
  /* Keep the project info line on one line on phones: text scales with the screen width. */
  .project-meta { flex-wrap: nowrap; font-size: clamp(.75rem, 3.6vw, var(--text-meta)); letter-spacing: -.02em; }
  .intro-actions .action { flex: 1 1 100%; }
  .award-list { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .award-card { padding: 16px; }
  .award-name { font-size: 1.125rem; }
  .project-actions .action { flex: 1 1 0; }
  .project-detail h1 { font-size: 1.875rem; }
  /* Detail pages add a development period; on phones it moves to its own line under 행사 / 역할 / 팀. */
  .project-detail .project-meta { flex-wrap: wrap; }
  .project-detail .project-meta > :nth-last-child(2) { display: none; }
  .project-period { display: flex; flex-basis: 100%; justify-content: center; margin-top: var(--gap-group); }
  /* Secondary to the 행사 / 역할 / 팀 line: same size, lighter color, quiet pill. */
  .period-badge { display: inline-flex; align-items: center; gap: var(--gap-group); padding: var(--gap-tight) 12px; border: 1px solid var(--line); border-radius: 999px; background: #f6f7f5; color: var(--muted); font-size: inherit; font-weight: 500; line-height: var(--line-compact); }
  .period-badge img { display: block; width: 14px; height: 14px; }
  .period-label { display: inline; margin-right: 2px; }
}
@media (prefers-reduced-motion: no-preference) {
  .action, .home-link, .play-link { transition: var(--action-transition); }
  /* A new card fades in and rises a little in its own place; the old one fades out. */
  .ptabs.is-ready .ptabs-cards > .project { transition: opacity .22s ease, translate .26s cubic-bezier(.2, .7, .2, 1), visibility 0s linear .22s; }
  .ptabs.is-ready .ptabs-cards > .project.is-current { transition-delay: 0s; }
  .ptabs.is-ready .ptabs-cards > .project:not(.is-current) { translate: 0 8px; }
  .ptabs-tab img { transition: opacity 160ms ease; }
  .project-image { transition: opacity 160ms ease; }
}
@media (hover: hover) and (pointer: fine) {
  .action:hover { background: #dce8df; text-decoration: none; }
  .action-primary:hover, .play-link:hover { background: #163b32; color: #fff; text-decoration: none; }
  .home-link:hover { background: #dce8df; }
  .ptabs-tab:hover img { opacity: 1; }
  .project-image-link:hover .project-image { opacity: .9; }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .action:hover, .home-link:hover { transform: translateY(-2px); }
  .action:active, .play-link:active, .home-link:active { transform: scale(.98); }
}
.action:active, .home-link:active { background: #dce8df; }
.action-primary:active, .play-link:active { background: #163b32; }