/* 포트폴리오(/portfolio)와 공개 사본이 같이 쓴다. 공개 사본은 이 파일을 옆에 portfolio.css로 둔다.
   배치: 머리글 → 소개(히어로·결과 숫자·사례 카드·흐름·기술·연락) / 운영(요약 4칸·저장소 표·상시 작업 묶음) */
:root {
  --pf-bg: #fbfaf7; --pf-paper: #ffffff; --pf-ink: #191b1a; --pf-muted: #686d69; --pf-line: #e2e1db; --pf-soft: #f1f0ea;
  --pf-gold: #8f6a0f; --pf-gold-soft: #f4ecd6; --pf-ok: #2c805a; --pf-warn: #a96d14; --pf-bad: #c4362d; --pf-bad-soft: #fbe9e7;
  --pf-sans: "IBM Plex Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --pf-mono: "IBM Plex Mono", ui-monospace, "SF Mono", monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --pf-bg: #111312; --pf-paper: #181b1a; --pf-ink: #ebedeb; --pf-muted: #9ca29e; --pf-line: #2b302e; --pf-soft: #202422;
    --pf-gold: #dcb55c; --pf-gold-soft: #2d2716; --pf-ok: #5ec491; --pf-warn: #e3a74c; --pf-bad: #ff6c61; --pf-bad-soft: #3a1c19;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --pf-bg: #111312; --pf-paper: #181b1a; --pf-ink: #ebedeb; --pf-muted: #9ca29e; --pf-line: #2b302e; --pf-soft: #202422;
  --pf-gold: #dcb55c; --pf-gold-soft: #2d2716; --pf-ok: #5ec491; --pf-warn: #e3a74c; --pf-bad: #ff6c61; --pf-bad-soft: #3a1c19;
  color-scheme: dark;
}

html, body { margin: 0; background: var(--pf-bg); }
.pf-page, .pf-page * { box-sizing: border-box; }
.pf-page [hidden] { display: none !important; }
.pf-page {
  max-width: 68rem; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px;
  padding-block: 20px 72px;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
  color: var(--pf-ink); font-family: var(--pf-sans); font-size: 15px; line-height: 1.6;
}
.pf-page h1, .pf-page h2, .pf-page h3 { margin: 0; text-wrap: balance; }
.pf-page p { margin: 0; }
.pf-page button { font: inherit; color: inherit; }
.pf-page :focus-visible { outline: 2px solid var(--pf-gold); outline-offset: 2px; }
.pf-kicker { font-family: var(--pf-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--pf-muted); }
.pf-muted { color: var(--pf-muted); font-size: 13.5px; }

.pf-hdr { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-bottom: 14px; border-bottom: 1px solid var(--pf-line); }
.pf-brand { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.pf-brand b { font-size: 18px; letter-spacing: -0.02em; }
.pf-brand a, .pf-brand span { font-size: 12.5px; color: var(--pf-muted); }
.pf-tabs { display: inline-flex; border: 1px solid var(--pf-line); border-radius: 999px; padding: 3px; gap: 2px; background: var(--pf-paper); }
.pf-tabs button { border: 0; background: transparent; padding: 6px 16px; border-radius: 999px; font-size: 13.5px; color: var(--pf-muted); cursor: pointer; }
.pf-tabs button[aria-selected="true"] { background: var(--pf-ink); color: var(--pf-paper); }
.pf-alert { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--pf-bad); margin-left: 6px; vertical-align: 2px; }

.pf-intro { display: grid; gap: 34px; }
.pf-hero { display: grid; gap: 12px; padding-top: 8px; }
.pf-hero h1 { font-size: clamp(28px, 4.6vw, 46px); line-height: 1.15; letter-spacing: -0.035em; font-weight: 700; }
.pf-hero h1 em { font-style: normal; color: var(--pf-gold); }
.pf-lede { max-width: 38rem; color: var(--pf-muted); font-size: 16px; }
.pf-results { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 10px; border-block: 1px solid var(--pf-line); }
.pf-results div { padding: 14px 16px 14px 0; min-width: 0; }
.pf-results div + div { padding-left: 16px; border-left: 1px solid var(--pf-line); }
.pf-results strong { display: block; font: 600 clamp(20px, 2.6vw, 26px)/1.2 var(--pf-mono); color: var(--pf-gold); font-variant-numeric: tabular-nums; }
.pf-results span { font-size: 13px; color: var(--pf-muted); }

.pf-sec { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.pf-sec-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pf-sec-h h2 { font-size: 19px; letter-spacing: -0.02em; }
.pf-sec-h small { color: var(--pf-muted); font-size: 12.5px; }

.pf-cases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.pf-case { background: var(--pf-paper); border: 1px solid var(--pf-line); border-radius: 12px; overflow: hidden; display: grid; grid-template-rows: auto 1fr; min-width: 0; }
.pf-case.wide { grid-column: 1 / -1; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); grid-template-rows: auto; }
.pf-shot { aspect-ratio: 16 / 5; max-width: 100%; background: var(--pf-soft); display: grid; place-items: center; border-bottom: 1px solid var(--pf-line); }
.pf-case.wide .pf-shot { aspect-ratio: auto; height: 100%; min-height: 10rem; border-bottom: 0; border-right: 1px solid var(--pf-line); }
.pf-shot svg { width: 70%; max-width: 280px; height: auto; }
.pf-mark { fill: var(--pf-gold); }
.pf-node { fill: var(--pf-paper); stroke: var(--pf-gold); stroke-width: 1.5; }
.pf-edge { stroke: var(--pf-gold); stroke-width: 1; opacity: 0.5; }
.pf-case-body { padding: 14px 16px 16px; display: grid; gap: 10px; align-content: start; min-width: 0; }
.pf-case-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.pf-case h3 { font-size: 16.5px; letter-spacing: -0.02em; }
.pf-tag { font-family: var(--pf-mono); font-size: 11px; color: var(--pf-muted); }
.pf-case dl { margin: 0; display: grid; grid-template-columns: 3.6em minmax(0, 1fr); gap: 4px 10px; font-size: 13.5px; }
.pf-case dt { color: var(--pf-muted); }
.pf-case dd { margin: 0; overflow-wrap: anywhere; }
.pf-num { font-family: var(--pf-mono); color: var(--pf-gold); font-weight: 600; font-variant-numeric: tabular-nums; }
.pf-more summary { color: var(--pf-gold); font-size: 13px; cursor: pointer; list-style: none; }
.pf-more summary::-webkit-details-marker { display: none; }
.pf-more .when-open, .pf-more[open] .when-closed { display: none; }
.pf-more[open] .when-open { display: inline; }
.pf-more ul { margin: 8px 0 0; padding: 10px 0 0 1.1em; border-top: 1px dashed var(--pf-line); font-size: 13.5px; color: var(--pf-muted); }

.pf-flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.pf-flow li { padding: 12px 12px 12px 0; min-width: 0; font-size: 13.5px; }
.pf-flow li + li { padding-left: 12px; border-left: 1px solid var(--pf-line); }
.pf-flow b { display: block; font: 500 12px/1.4 var(--pf-mono); color: var(--pf-gold); }
.pf-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pf-chips span { font-size: 13px; border: 1px solid var(--pf-line); border-radius: 999px; padding: 4px 12px; background: var(--pf-paper); }
.pf-contact { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; font-size: 14px; padding-top: 18px; border-top: 1px solid var(--pf-line); }
.pf-contact a { color: var(--pf-ink); text-decoration-color: var(--pf-gold); text-underline-offset: 3px; }
.pf-addr { font-family: var(--pf-mono); font-size: 13px; user-select: all; }
.pf-copy, .pf-write { border: 1px solid var(--pf-line); background: var(--pf-paper); border-radius: 6px; padding: 3px 9px; font-size: 12px; cursor: pointer; }
.pf-write { border-color: var(--pf-gold); color: var(--pf-gold); background: transparent; }
.pf-foot { font-size: 12px; color: var(--pf-muted); }
.pf-empty { border: 1.5px dashed var(--pf-line); border-radius: 12px; padding: 22px; text-align: center; color: var(--pf-muted); font-size: 14px; }

.pf-ops { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; align-content: start; }
.pf-banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 14px; border-radius: 10px; font-size: 13.5px; }
.pf-banner.warn { background: var(--pf-gold-soft); color: var(--pf-warn); }
.pf-banner.bad { background: var(--pf-bad-soft); color: var(--pf-bad); }
.pf-banner.ok { background: var(--pf-soft); color: var(--pf-ok); }
.pf-banner button { border: 1px solid currentColor; background: transparent; border-radius: 6px; padding: 4px 10px; font-size: 12.5px; cursor: pointer; color: inherit; }
.pf-banner button[disabled] { opacity: 0.6; cursor: wait; }
.pf-stat4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.pf-stat4 div { background: var(--pf-paper); border: 1px solid var(--pf-line); border-radius: 10px; padding: 12px 14px; min-width: 0; }
.pf-stat4 strong { display: block; font: 600 22px/1.2 var(--pf-mono); font-variant-numeric: tabular-nums; }
.pf-stat4 span { font-size: 12.5px; color: var(--pf-muted); }
.pf-stat4 .is-bad strong { color: var(--pf-bad); }
.pf-stat4 .is-warn strong { color: var(--pf-warn); }
.pf-tbl { overflow-x: auto; background: var(--pf-paper); border: 1px solid var(--pf-line); border-radius: 10px; }
.pf-tbl table { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 34rem; }
.pf-tbl th, .pf-tbl td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--pf-line); vertical-align: middle; }
.pf-tbl tr:last-child td { border-bottom: 0; }
.pf-tbl th { font-size: 11.5px; color: var(--pf-muted); font-weight: 500; background: var(--pf-soft); }
.pf-tbl td.mono { font-family: var(--pf-mono); font-size: 12.5px; }
.pf-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; background: var(--pf-ok); }
.pf-dot.idle { background: var(--pf-line); }
.pf-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-items: start; }
.pf-grp { background: var(--pf-paper); border: 1px solid var(--pf-line); border-radius: 10px; min-width: 0; }
.pf-grp summary { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 12px 14px; cursor: pointer; list-style: none; }
.pf-grp summary::-webkit-details-marker { display: none; }
.pf-grp b { font-size: 14px; }
.pf-st { font-size: 12.5px; color: var(--pf-ok); }
.pf-st.bad { color: var(--pf-bad); }
.pf-st.warn { color: var(--pf-warn); }
.pf-grp ul { margin: 0; padding: 0 14px 12px 30px; font-size: 12.5px; font-family: var(--pf-mono); color: var(--pf-muted); max-height: 12rem; overflow: auto; }
.pf-grp li.bad { color: var(--pf-bad); }
.pf-grp li.warn { color: var(--pf-warn); }
.pf-activity { font-size: 13px; color: var(--pf-muted); }
.pf-activity b { color: var(--pf-ink); font-family: var(--pf-mono); font-weight: 500; }
.pf-toast { position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); background: var(--pf-ink); color: var(--pf-paper);
  padding: 9px 16px; border-radius: 8px; font-size: 13.5px; max-width: calc(100% - 32px); z-index: 20; }

@media (max-width: 820px) {
  .pf-cases, .pf-groups { grid-template-columns: 1fr; }
  .pf-case.wide { grid-template-columns: 1fr; }
  .pf-case.wide .pf-shot { aspect-ratio: 16 / 5; height: auto; min-height: 0; border-right: 0; border-bottom: 1px solid var(--pf-line); }
  .pf-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pf-flow li { border-top: 1px solid var(--pf-line); }
  .pf-flow li:nth-child(odd) { padding-left: 0; border-left: 0; }
  .pf-stat4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .pf-results { grid-template-columns: 1fr; }
  .pf-results div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--pf-line); }
}