/* 목업 D 공용: 메인과 프로젝트 상세 페이지가 함께 쓴다 */
  /* B의 담백한 한 단 + C의 벤토와 사례 아코디언 + A의 카드. 밝은 테마가 기본, 다크 지원 */
  :root { --accent: #8b85ff; --accent-ink: #0b0b1a; --cover-strength: 70%; --cover-ink: #ffffff; }
  html.light { --accent: #4f46e5; --accent-ink: #ffffff; --cover-strength: 26%; --cover-ink: #111214; }
  .wrap { width: min(100% - 2.5rem, 60rem); }

  /* 헤더 (B) */
  .top { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--surface) 78%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid transparent; transition: border-color var(--t-smooth) var(--ease-out); }
  .top.is-scrolled { border-bottom-color: var(--hairline); }
  .top .wrap { display: flex; align-items: center; height: 4rem; gap: 1.6rem; }
  .brand { font-weight: 800; letter-spacing: 0.04em; font-size: 1.05rem; }
  .top nav { margin-left: auto; display: flex; gap: 1.5rem; align-items: center; font-size: 0.9rem; color: var(--fg-muted); }
  .top nav a { transition: color var(--t-fast) var(--ease-out); }
  @media (hover: hover) { .top nav a:hover { color: var(--fg); } }
  .top nav .sep { width: 1px; height: 1rem; background: var(--border); }
  .top nav .sm { display: none; }
  @media (max-width: 640px) {
    .top .wrap { gap: 0.8rem; }
    .top nav { gap: 0.85rem; font-size: 0.84rem; }
    .top nav .lg { display: none; }
    .top nav .sm { display: inline; }
  }
  .tile-link { color: inherit; transition: border-color var(--t-fast) var(--ease-out); }
  @media (hover: hover) { .tile-link:hover { border-color: var(--accent); } }
  .hero-picks { display: flex; flex-wrap: wrap; gap: 0.5rem 1.2rem; margin-top: 1.4rem; font-size: 0.9rem; color: var(--fg-muted); }
  .hero-picks a { color: var(--fg); border-bottom: 1px solid var(--border); }
  @media (hover: hover) { .hero-picks a:hover { border-color: var(--accent); } }

  section { scroll-margin-top: 5rem; }

  /* 소개 (B의 구성 + C의 헤드라인) */
  .hero { padding-block: 4.5rem 3rem; }
  .who { display: flex; align-items: center; gap: 0.9rem; }
  .avatar { width: 3.5rem; height: 3.5rem; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #fff;
    background: conic-gradient(from 200deg, #4f46e5, #14b8a6, #4f46e5); }
  .who b { display: block; font-size: 1rem; }
  .who span { color: var(--fg-muted); font-size: 0.88rem; }
  .hero h1 { margin-top: 2rem; font-size: clamp(2rem, 4.6vw, 3.2rem); line-height: 1.2; letter-spacing: -0.035em; font-weight: 800; max-width: 17em; }
  .hero h1 em { font-style: normal; color: var(--accent); }
  .intro { margin-top: 1.4rem; display: grid; gap: 0.9rem; color: var(--fg-subtle); font-size: 1.04rem; line-height: 1.85; }
  .intro strong { color: var(--fg); font-weight: 700; }
  .contact { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.4rem; margin-top: 1.8rem; font-size: 0.9rem; color: var(--fg-subtle); }
  .contact .btn { font-size: 0.85rem; padding: 0.55rem 1rem; }

  /* 숫자 벤토 (C) */
  .bento { display: grid; gap: 0.8rem; grid-template-columns: 1fr; }
  @media (min-width: 560px) { .bento { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 880px) { .bento { grid-template-columns: repeat(4, 1fr); } }
  .tile { border: 1px solid var(--border); border-radius: var(--r-2xl); background: var(--card); padding: 1.15rem 1.2rem; display: flex; flex-direction: column; gap: 0.35rem; }
  html.light .tile { box-shadow: 0 1px 2px #0000000a; }
  .tile .k { font-size: 0.75rem; color: var(--fg-muted); }
  .tile .v { font-size: 1.9rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
  .tile .v small { font-size: 0.85rem; font-weight: 600; color: var(--fg-subtle); margin-left: 0.2rem; }
  .tile p { color: var(--fg-subtle); font-size: 0.85rem; }

  /* 섹션 머리 */
  .head { margin-block: 5rem 1.4rem; display: flex; flex-wrap: wrap; align-items: end; gap: 0.8rem 2rem; }
  .head h2 { font-size: 1.45rem; letter-spacing: -0.02em; }
  .head p { color: var(--fg-subtle); font-size: 0.93rem; margin-top: 0.3rem; }

  /* 카드 (A) */
  .cards { display: grid; gap: 1rem; grid-template-columns: 1fr; }
  @media (min-width: 700px) { .cards { grid-template-columns: repeat(2, 1fr); } }
  .card { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--r-2xl); background: var(--card); overflow: hidden;
    transition: transform var(--t-smooth) var(--ease-out), box-shadow var(--t-smooth) var(--ease-out), border-color var(--t-smooth) var(--ease-out); }
  html.light .card { box-shadow: 0 1px 2px #0000000a; }
  @media (hover: hover) { .card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); box-shadow: 0 16px 36px var(--shadow); } }
  .cover { position: relative; aspect-ratio: 1200 / 460; padding: 1.1rem 1.3rem; display: flex; flex-direction: column; justify-content: flex-end; color: var(--cover-ink);
    background:
      radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--c1) var(--cover-strength), transparent), transparent 60%),
      radial-gradient(120% 140% at 100% 100%, color-mix(in srgb, var(--c2) var(--cover-strength), transparent), transparent 62%),
      var(--surface-raised);
    border-bottom: 1px solid var(--hairline); }
  .cover .glyph { position: absolute; right: 1rem; top: 0.9rem; width: 2.8rem; height: 2.8rem; border-radius: 0.8rem; display: grid; place-items: center; font-weight: 800;
    background: color-mix(in srgb, var(--surface-raised) 55%, transparent); border: 1px solid var(--border); backdrop-filter: blur(6px); }
  .cover strong { font-size: 1.4rem; letter-spacing: -0.03em; font-weight: 800; line-height: 1.1; }
  .cover em { font-style: normal; font-size: 0.8rem; opacity: 0.8; }
  .card-body { padding: 1.1rem 1.3rem 1.2rem; display: flex; flex-direction: column; gap: 0.7rem; flex: 1; }
  .card-body > p { color: var(--fg-subtle); font-size: 0.92rem; }
  .decision { font-size: 0.87rem; color: var(--fg-subtle); padding: 0.65rem 0.8rem; border-radius: var(--r-xl); background: var(--fill); }
  .decision b { color: var(--fg); margin-right: 0.35rem; }
  .tags { display: flex; flex-wrap: wrap; gap: 0.35rem; }
  .card-foot { margin-top: auto; display: flex; align-items: center; gap: 0.5rem; padding-top: 0.3rem; font-size: 0.85rem; }
  .card-foot a { margin-left: auto; color: var(--accent); font-weight: 600; }

  /* 오픈소스 목록 (B) */
  .oss { border-top: 1px solid var(--border); }
  .oss li { display: grid; grid-template-columns: 11rem 1fr auto; gap: 1rem; padding-block: 0.9rem; border-bottom: 1px solid var(--hairline); font-size: 0.93rem; align-items: baseline; }
  .oss b { font-weight: 700; }
  .oss span { color: var(--fg-subtle); }
  .oss em { font-style: normal; color: var(--fg-muted); font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 0.88rem; }
  @media (max-width: 640px) { .oss li { grid-template-columns: 1fr auto; } .oss span { grid-column: 1 / -1; grid-row: 2; } }

  /* 사례 한 줄 목록 (C 필터 + 경력기술서 링크) */
  .filters { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-left: auto; }
  .filters button { font: inherit; font-size: 0.8rem; padding: 0.35rem 0.8rem; border-radius: var(--r-pill); border: 1px solid var(--border); background: transparent; color: var(--fg-subtle); cursor: pointer; }
  .filters button[aria-pressed="true"] { background: var(--fg); color: var(--surface); border-color: transparent; }
  .case { border-top: 1px solid var(--border); }
  .case:last-child { border-bottom: 1px solid var(--border); }
  .case[hidden] { display: none; }
  .case-row { color: inherit; text-decoration: none; display: grid; grid-template-columns: 1fr auto; gap: 0.3rem 1rem; padding: 1.2rem 0.1rem; }
  .case-title { font-size: 1.08rem; font-weight: 700; letter-spacing: -0.015em; }
  .case-sub { grid-column: 1; color: var(--fg-muted); font-size: 0.86rem; }
  .case-line { grid-column: 1; margin: 0.2rem 0 0; color: var(--fg-subtle); font-size: 0.94rem; }
  .crit { grid-column: 1; display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.15rem; }
  .crit span { font-size: 0.7rem; font-weight: 700; padding: 0.1rem 0.5rem; border-radius: var(--r-pill); color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
  .case-meta { grid-row: 1 / span 4; grid-column: 2; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 0.5rem; }
  .case-link { font-size: 0.82rem; font-weight: 600; color: var(--accent); text-decoration: none; white-space: nowrap; }
  .case-link::after { content: " \2192"; }
  @media (hover: hover) { .case-row:hover .case-title { color: var(--accent); } .case-row:hover .case-link { text-decoration: underline; text-underline-offset: 3px; } }
  .case-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
  .case-line { display: block; }
  @media (max-width: 640px) { .case-row { grid-template-columns: 1fr; } .case-meta { grid-row: auto; grid-column: 1; flex-direction: row; justify-content: space-between; align-items: center; } }

  footer { margin-top: 6rem; padding-block: 2.5rem 6rem; border-top: 1px solid var(--hairline); color: var(--fg-muted); font-size: 0.88rem; }
  footer .wrap { display: flex; flex-wrap: wrap; gap: 0.6rem 1.6rem; }

/* 카드 표지: 실제 앱 화면 + 아이콘 */
.cover--shot { padding: 0; justify-content: flex-start; background: var(--surface-raised); overflow: hidden; }
.cover--shot img.shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform 0.7s var(--ease-out); }
@media (hover: hover) { .card:hover .cover--shot img.shot { transform: scale(1.03); } }
.card-id { display: flex; align-items: center; gap: 0.75rem; }
.card-id img, .card-id .glyph-icon { width: 2.6rem; height: 2.6rem; border-radius: 0.7rem; flex: none; }
.card-id .glyph-icon { display: grid; place-items: center; font-weight: 800; font-size: 0.9rem; color: #fff; background: linear-gradient(135deg, #a21caf, #ea580c); }
.card-id strong { display: block; font-size: 1.15rem; letter-spacing: -0.02em; font-weight: 800; line-height: 1.2; }
.card-id em { font-style: normal; font-size: 0.84rem; color: var(--fg-muted); }
.cover--code { padding: 0; justify-content: center; background: #16131d; }
.cover--code pre { margin: 0; padding: 1.4rem 1.6rem; font-family: var(--font-mono); font-size: 0.86rem; line-height: 1.9; color: #f3e8ff; white-space: pre; overflow: hidden; }
.cover--code .c { color: #a98bc4; }

/* 카드 안 결정 요약: 상황 → 선택 → 감수 */
.decision-mini { margin: 0; line-height: 1.7; font-size: 0.86rem; color: var(--fg-subtle); padding: 0.75rem 0.85rem; border-radius: var(--r-xl); background: var(--fill); }
.decision-mini b { color: var(--fg); font-weight: 700; }

/* 오픈소스 행 펼침 */
.oss details { border-bottom: 1px solid var(--hairline); }
.oss summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 11rem 1fr auto 1.4rem; gap: 1rem; padding-block: 0.9rem; font-size: 0.93rem; align-items: baseline; }
.oss summary::-webkit-details-marker { display: none; }
.oss summary b { font-weight: 700; }
.oss summary span { color: var(--fg-subtle); }
.oss summary em { font-style: normal; color: var(--fg-muted); font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 0.88rem; }
.oss summary i { font-style: normal; color: var(--fg-muted); transition: transform var(--t-smooth) var(--ease-out); justify-self: end; }
.oss details[open] summary i { transform: rotate(45deg); }
.oss .oss-body { padding: 0 0 1.1rem 12rem; display: grid; gap: 0.6rem; color: var(--fg-subtle); font-size: 0.92rem; }
.oss .oss-body p b { color: var(--fg); }
@media (max-width: 640px) {
  .oss summary { grid-template-columns: 1fr auto 1.2rem; }
  .oss summary span { grid-column: 1 / -1; grid-row: 2; }
  .oss .oss-body { padding-left: 0; }
}

/* ---------- 프로젝트 상세 ---------- */
.crumb { padding-top: 2.2rem; font-size: 0.88rem; color: var(--fg-muted); }
.crumb a { color: var(--fg-subtle); }
@media (hover: hover) { .crumb a:hover { color: var(--accent); } }
.p-hero { padding-block: 1.6rem 2.4rem; display: grid; gap: 1.4rem; }
.p-id { display: flex; align-items: center; gap: 1.1rem; }
.p-id img { width: 4.5rem; height: 4.5rem; border-radius: 1.1rem; box-shadow: 0 10px 28px var(--shadow); }
.p-id .glyph-icon { width: 4.5rem; height: 4.5rem; border-radius: 1.1rem; display: grid; place-items: center; font-weight: 800; font-size: 1.4rem; color: #fff; background: linear-gradient(135deg, #a21caf, #ea580c); }
.p-id h1 { font-size: clamp(2rem, 4vw, 2.8rem); letter-spacing: -0.035em; font-weight: 800; line-height: 1.1; }
.p-id p { color: var(--fg-subtle); margin-top: 0.3rem; }
.p-lead { font-size: 1.12rem; line-height: 1.85; color: var(--fg-subtle); }
.p-lead strong { color: var(--fg); }
.p-meta { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.p-links { display: flex; flex-wrap: wrap; gap: 0.6rem; }

.browser { border: 1px solid var(--border); border-radius: var(--r-2xl); overflow: hidden; background: var(--card); box-shadow: 0 24px 60px var(--shadow); }
.browser-bar { display: flex; align-items: center; gap: 0.4rem; padding: 0.6rem 0.9rem; border-bottom: 1px solid var(--hairline); background: var(--surface-raised); }
.browser-bar i { width: 0.65rem; height: 0.65rem; border-radius: 50%; background: var(--border); }
.browser-bar span { margin-left: 0.8rem; flex: 1; font-size: 0.78rem; color: var(--fg-muted); background: var(--fill); border-radius: var(--r-pill); padding: 0.25rem 0.8rem; max-width: 22rem; }
.browser-bar a { font-size: 0.78rem; color: var(--accent); font-weight: 600; }
.browser .scroll { max-height: 34rem; overflow-y: auto; }
.browser img { width: 100%; }
figure { margin: 0; }
figcaption { margin-top: 0.6rem; font-size: 0.82rem; color: var(--fg-muted); }

.facts { display: grid; gap: 0.8rem; grid-template-columns: repeat(2, 1fr); margin-top: 2.4rem; }
@media (min-width: 760px) { .facts { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 760px) { .facts:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, 1fr); } }

.why { margin-top: 4.5rem; display: grid; gap: 0.9rem; }
.why h2, .p-section h2 { font-size: 1.45rem; letter-spacing: -0.02em; }
.why p { color: var(--fg-subtle); line-height: 1.85; }
.why blockquote, blockquote.quote { margin: 0.3rem 0 0; padding: 0.9rem 1.1rem; border-radius: var(--r-xl); background: var(--fill); color: var(--fg); font-size: 0.95rem; }
.why blockquote small, blockquote.quote small { display: block; margin-top: 0.35rem; color: var(--fg-muted); font-size: 0.78rem; }

.p-section { margin-top: 4.5rem; }
.p-section > p { color: var(--fg-subtle); margin-top: 0.4rem; }
.dec { margin-top: 1.6rem; display: grid; gap: 1.2rem; }
.dec-item { border: 1px solid var(--border); border-radius: var(--r-2xl); background: var(--card); padding: 1.5rem 1.6rem; display: grid; gap: 1.1rem; }
html.light .dec-item { box-shadow: 0 1px 2px #0000000a; }
.dec-head { display: flex; gap: 0.9rem; align-items: baseline; }
.dec-no { flex: none; font-family: var(--font-mono); font-size: 0.8rem; font-weight: 700; color: var(--accent); }
.dec-head h3 { font-size: 1.15rem; letter-spacing: -0.015em; line-height: 1.4; }
.dec-q { color: var(--fg-subtle); font-size: 0.95rem; }
.dec-grid { display: grid; gap: 0.75rem; margin: 0; }
.dec-grid > div { display: grid; grid-template-columns: 7rem 1fr; gap: 1rem; }
.dec-grid dt { font-size: 0.78rem; font-weight: 700; color: var(--fg-muted); padding-top: 0.2rem; }
.dec-grid dd { margin: 0; font-size: 0.94rem; color: var(--fg-subtle); line-height: 1.75; }
.dec-grid .pick dt { color: var(--accent); }
.dec-grid .pick dd { color: var(--fg); }
.dec-grid .cost dd { color: var(--fg); }
@media (max-width: 640px) { .dec-grid > div { grid-template-columns: 1fr; gap: 0.15rem; } .dec-item { padding: 1.2rem; } }
.dec-item figure img { border-radius: var(--r-xl); border: 1px solid var(--hairline); }

.gallery { margin-top: 1.4rem; display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 760px) { .gallery { grid-template-columns: repeat(2, 1fr); } }
.gallery img { border-radius: var(--r-xl); border: 1px solid var(--border); }

.learn { margin-top: 1.2rem; display: grid; gap: 0.6rem; }
.learn li { display: flex; gap: 0.6rem; align-items: baseline; color: var(--fg-subtle); font-size: 0.94rem; }

.pager { margin-top: 5rem; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.pager a { border: 1px solid var(--border); border-radius: var(--r-2xl); padding: 1rem 1.2rem; display: grid; gap: 0.2rem; transition: border-color var(--t-fast) var(--ease-out); }
.pager a small { color: var(--fg-muted); font-size: 0.78rem; }
.pager a b { font-size: 1rem; }
.pager a:last-child { text-align: right; }
@media (hover: hover) { .pager a:hover { border-color: var(--accent); } }

.flow { margin: 0; padding: 1.3rem 1.4rem; font-family: var(--font-mono); font-size: 0.86rem; line-height: 1.9; color: var(--fg); overflow-x: auto; background: var(--card); }
.flow .c { color: var(--fg-muted); }
.dec-item figure img { width: 100%; max-height: 26rem; object-fit: cover; object-position: top center; }

/* 에이전트가 쓴 초안 답: 본인 확인 전까지 표시 */
.draft { display: inline-block; margin-right: 0.35rem; padding: 0.05rem 0.45rem; border: 1px dashed var(--accent); border-radius: var(--r-pill); color: var(--accent); font-size: 0.7rem; font-weight: 700; vertical-align: 0.1em; }
.learn li p { color: var(--fg-subtle); line-height: 1.8; }

/* 일하는 방식: 네 기준별 배운 점 */
.principles { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 760px) { .principles { grid-template-columns: repeat(2, 1fr); } }
.pr { border: 1px solid var(--border); border-radius: var(--r-2xl); background: var(--card); padding: 1.3rem 1.4rem; }
.pr h3 { font-size: 0.8rem; font-weight: 700; color: var(--accent); letter-spacing: 0.02em; }
.pr ul { margin-top: 0.8rem; display: grid; gap: 0.9rem; }
.pr li { display: grid; gap: 0.25rem; }
.pr li p { color: var(--fg); font-size: 0.97rem; line-height: 1.65; }
.pr li a { font-size: 0.8rem; color: var(--fg-muted); text-decoration: none; }
@media (hover: hover) { .pr li a:hover { color: var(--accent); } }

/* 그 밖의 사내 작업 */
.etc-head { margin-top: 2.6rem; font-size: 1.05rem; letter-spacing: -0.01em; }
.etc { margin-top: 0.8rem; display: grid; gap: 0; }
.etc li { display: grid; grid-template-columns: 13rem 9rem 1fr; gap: 0.3rem 1rem; padding: 0.85rem 0.1rem; border-top: 1px solid var(--hairline); font-size: 0.92rem; }
.etc li em { font-style: normal; color: var(--fg-muted); font-size: 0.84rem; }
.etc li span { color: var(--fg-subtle); }
@media (max-width: 760px) { .etc li { grid-template-columns: 1fr auto; } .etc li span { grid-column: 1 / -1; } }

/* 회사 사례 상세 */
.glyph-icon--work { background: linear-gradient(135deg, #4338ca, #7c3aed) !important; font-size: 1.1rem !important; }
.chip--org { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
figure.diagram img { width: 100%; max-height: none; object-fit: contain; background: #fff; padding: 0.8rem; border-radius: var(--r-xl); border: 1px solid var(--hairline); }
.top-fig { margin-top: 2.4rem; }

/* 개인 프로젝트 본문: 칸 대신 짧은 이야기 */
.story { margin-top: 4.5rem; display: grid; gap: 0.9rem; }
.story h2 { font-size: 1.45rem; letter-spacing: -0.02em; }
.story p { color: var(--fg-subtle); line-height: 1.85; }
.story figure { margin-top: 0.6rem; }
.story figure:not(.diagram) img { width: 100%; max-height: 26rem; object-fit: cover; object-position: top center; border-radius: var(--r-xl); border: 1px solid var(--hairline); }
.also { display: grid; gap: 0.8rem; }
.also li { position: relative; padding-left: 1.1rem; color: var(--fg-subtle); line-height: 1.85; }
.also li::before { content: ""; position: absolute; left: 0; top: 0.9em; width: 0.45rem; height: 1px; background: var(--fg-muted); }
.also li b, .story p b { color: var(--fg); font-weight: 650; }

/* 줄바꿈: 마지막 줄에 한두 낱말만 남지 않게, 하이픈 낱말은 끊지 않음 */
p, dd, li, figcaption { text-wrap: pretty; }
.nw { white-space: nowrap; }

/* 소개 문단: 넓은 화면에서는 문장마다 줄을 바꾼다 */
@media (max-width: 999px) { .br-lg { display: none; } }

/* 회사 사례 한 장면 */
.browser.shot { margin-top: 2rem; max-width: 40rem; }
.browser.shot .scroll { max-height: 22rem; }
.shot-cap { margin-top: 0.6rem; font-size: 0.82rem; color: var(--fg-muted); }