@charset "UTF-8";
:root { color-scheme: light; --ink: #23392f; --muted: #5e6c61; --paper: #f8f9f4; --line: #dfe5db; font-family: Inter, Pretendard, "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif; color: var(--ink); background: var(--paper); font-synthesis: none; }
* { box-sizing: border-box; }
body { margin: 0; }
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 3px solid #b06d48; outline-offset: 3px; }
header, main, footer { width: min(100% - 48px, 1000px); margin: auto; }
header { height: 68px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.brand { font-size: 23px; font-weight: 750; letter-spacing: -1px; }
nav { display: flex; gap: 24px; font-size: 13px; }
nav a { padding: 14px 0; }
.section-heading { display: flex; align-items: center; justify-content: space-between; padding: 24px 0 18px; gap: 12px; }
.section-heading h1 { font-size: 19px; font-weight: 650; margin: 0; }
.section-heading h1 span { margin-left: 6px; font-size: 11px; font-weight: 500; color: var(--muted); }
.section-heading p { font-size: 12px; color: var(--muted); margin: 0; }
.project-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.project-card { border-radius: 16px; padding: 20px 22px 6px; border: 1px solid #23392f0b; }
.sage { background: #e9efe4; }
.peach { background: #f6eae2; }
.lavender { background: #eaeaf3; }
.sand { background: #f1ecdf; }
.app-heading { display: flex; gap: 13px; align-items: center; }
.app-heading img { width: 52px; height: 52px; border-radius: 13px; object-fit: cover; }
.app-heading h2 { font-size: 20px; font-weight: 650; letter-spacing: -.6px; margin: 0 0 5px; }
.category { font-size: 11px; color: var(--muted); }
.description { font-size: 13px; color: var(--muted); line-height: 1.7; min-height: 44px; margin: 15px 0 12px; }
.card-links { border-top: 1px solid #23392f1c; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.card-links a { display: inline-flex; align-items: center; min-height: 44px; font-size: 12px; white-space: nowrap; }
.primary-link { font-weight: 650; }
.store-links { display: flex; gap: 16px; color: #465a4c; }
footer { margin-top: 28px; padding: 20px 0 28px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 11px; color: var(--muted); flex-wrap: wrap; }
footer a { display: inline-flex; align-items: center; min-height: 32px; }
.developer-links { display: flex; gap: 16px; }
.skip { position: absolute; left: 12px; top: -100px; z-index: 99; padding: 14px; background: #fff; }
.skip:focus { top: 10px; }
@media (max-width: 700px) { header, main, footer { width: calc(100% - 32px); } header { height: 60px; } .brand { font-size: 21px; } nav { gap: 20px; font-size: 12px; } .section-heading { padding: 22px 0 16px; } .section-heading p { font-size: 11px; } .project-grid { grid-template-columns: 1fr; gap: 12px; } .project-card { padding: 18px 18px 4px; } .description { min-height: 0; margin: 13px 0 10px; } footer { margin-top: 22px; gap: 6px 18px; } }
@media (max-width: 350px) { .store-links { gap: 10px; } .card-links a { font-size: 11px; } .section-heading p { font-size: 10px; } }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto; } }