/* THE FA 기술·개발자산 포트폴리오 전용 스타일
   - technology/index.html 에서만 불러옵니다.
   - 모든 규칙을 .tech-portfolio 아래 tp- 접두어 클래스로 한정해 사이트 공통 CSS(styles.css)와 충돌하지 않습니다.
   - 색·크기·배치는 원본 포트폴리오(2026-09-17)를 그대로 따릅니다. */

.tech-portfolio {
  --tp-ink: #151718; --tp-muted: #697178; --tp-line: #e7e9e8; --tp-paper: #f6f7f5; --tp-card: #fff;
  --tp-gold: #f7b928; --tp-gold2: #fff7df; --tp-navy: #172133;
  --tp-shadow: 0 8px 28px rgba(20, 24, 28, .06);
  --tp-sticky: 77px; /* 사이트 공통 헤더 높이 */
  background: var(--tp-paper);
  color: var(--tp-ink);
  font-family: Pretendard, "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  overflow-wrap: normal;
}
.tech-portfolio a { color: inherit; }
.tech-portfolio h1, .tech-portfolio h2, .tech-portfolio h3, .tech-portfolio p { margin: 0; }
.tech-portfolio .tp-wrap { width: min(1500px, calc(100% - 36px)); margin: auto; }

/* ---------- 포트폴리오 목차 바 (사이트 헤더 바로 아래) ---------- */
.tech-portfolio .tp-bar {
  position: sticky; top: var(--tp-sticky); z-index: 30;
  background: rgba(246, 247, 245, .92);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--tp-line);
}
.tech-portfolio .tp-bar-in { display: flex; align-items: center; justify-content: flex-start; padding: 10px 0; gap: 20px; }
.tech-portfolio .tp-nav { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-start; }
.tech-portfolio .tp-nav a {
  text-decoration: none; font-size: 12px; font-weight: 800; color: #525a60;
  padding: 7px 10px; border-radius: 999px; border: 1px solid transparent;
}
.tech-portfolio .tp-nav a:hover { background: #fff; border-color: var(--tp-line); color: #111; }
.tech-portfolio .tp-asset-section,
.tech-portfolio .tp-info-section { scroll-margin-top: calc(var(--tp-sticky) + 80px); }

/* ---------- Hero ---------- */
.tech-portfolio .tp-hero { padding: 64px 0 36px; }
.tech-portfolio .tp-hero-grid { display: grid; grid-template-columns: 1.45fr .75fr; gap: 22px; }
.tech-portfolio .tp-hero-main,
.tech-portfolio .tp-hero-side { background: #fff; border: 1px solid var(--tp-line); border-radius: 24px; box-shadow: var(--tp-shadow); }
.tech-portfolio .tp-hero-main { padding: 38px 40px; position: relative; overflow: hidden; }
.tech-portfolio .tp-hero-main::after {
  content: ""; position: absolute; right: -90px; top: -120px; width: 360px; height: 360px; border-radius: 50%;
  background: radial-gradient(circle, var(--tp-gold2), transparent 68%);
}
.tech-portfolio .tp-kicker { font-size: 12px; font-weight: 900; letter-spacing: .16em; color: #936400; text-transform: uppercase; }
.tech-portfolio .tp-hero h1 {
  font-size: clamp(34px, 5vw, 68px); line-height: 1.03; letter-spacing: -.05em; font-weight: 800;
  margin: 13px 0 18px; max-width: 950px; position: relative; z-index: 1;
}
.tech-portfolio .tp-hero-main > p { font-size: 17px; color: #535b61; max-width: 900px; position: relative; z-index: 1; }
.tech-portfolio .tp-hero-note { margin-top: 24px; display: flex; gap: 10px; flex-wrap: wrap; position: relative; z-index: 1; }
.tech-portfolio .tp-hero-note span { font-size: 12px; font-weight: 800; padding: 8px 11px; border: 1px solid var(--tp-line); border-radius: 9px; background: #fafafa; }
.tech-portfolio .tp-hero-side { padding: 28px; display: flex; flex-direction: column; justify-content: space-between; }
.tech-portfolio .tp-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tech-portfolio .tp-metric { padding: 18px; border: 1px solid var(--tp-line); border-radius: 16px; background: #fafbfa; }
.tech-portfolio .tp-metric strong { font-size: 31px; display: block; letter-spacing: -.04em; line-height: 1.55; }
.tech-portfolio .tp-metric span { font-size: 11px; font-weight: 800; color: var(--tp-muted); }
.tech-portfolio .tp-source-note { font-size: 12px; color: var(--tp-muted); padding-top: 20px; }

/* ---------- 검색·필터 ---------- */
.tech-portfolio .tp-toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 8px 0 30px; }
.tech-portfolio .tp-search {
  flex: 1; min-width: 250px; border: 1px solid var(--tp-line); background: #fff; border-radius: 12px;
  padding: 12px 14px; font: inherit; color: inherit; outline: none;
}
.tech-portfolio .tp-search:focus { border-color: #b7a15c; box-shadow: 0 0 0 3px rgba(247, 185, 40, .13); }
.tech-portfolio .tp-filters { display: flex; gap: 7px; flex-wrap: wrap; }
.tech-portfolio .tp-filters button {
  border: 1px solid var(--tp-line); background: #fff; color: var(--tp-ink); border-radius: 10px;
  padding: 10px 12px; font-weight: 800; font-size: 12px; font-family: inherit; line-height: 1.55; cursor: pointer;
}
.tech-portfolio .tp-filters button.active { background: var(--tp-navy); color: #fff; border-color: var(--tp-navy); }

/* ---------- 자산 섹션·카드 ---------- */
.tech-portfolio .tp-asset-section { margin: 0 0 44px; }
.tech-portfolio .tp-section-heading { display: grid; grid-template-columns: 1fr auto; gap: 5px 20px; align-items: end; margin: 0 0 15px; }
.tech-portfolio .tp-section-heading > div { display: flex; gap: 11px; align-items: center; }
.tech-portfolio .tp-section-no { font-size: 11px; font-weight: 900; color: #fff; background: var(--tp-navy); border-radius: 7px; padding: 5px 7px; line-height: 1.55; }
.tech-portfolio .tp-section-heading h2 { font-size: 25px; letter-spacing: -.03em; font-weight: 800; line-height: 1.55; }
.tech-portfolio .tp-section-heading p { grid-column: 1 / 2; margin: 0 0 0 38px; font-size: 13px; color: var(--tp-muted); }
.tech-portfolio .tp-section-heading .tp-count { grid-column: 2; grid-row: 1 / 3; font-size: 12px; color: #7b8287; font-weight: 800; }
.tech-portfolio .tp-asset-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.tech-portfolio .tp-asset-card,
.tech-portfolio .tp-candidate-card {
  background: var(--tp-card); border: 1px solid var(--tp-line); border-radius: 17px; padding: 18px;
  box-shadow: 0 2px 7px rgba(20, 24, 28, .025); transition: .18s ease;
}
.tech-portfolio .tp-asset-card:hover,
.tech-portfolio .tp-candidate-card:hover { transform: translateY(-2px); box-shadow: var(--tp-shadow); border-color: #d5d8d5; }
.tech-portfolio .tp-asset-card.hidden { display: none; }
.tech-portfolio .tp-asset-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 13px; }
.tech-portfolio .tp-status { display: inline-flex; align-items: center; font-size: 10px; font-weight: 900; border-radius: 999px; padding: 5px 8px; border: 1px solid; line-height: 1.55; }
.tech-portfolio .tp-status.runtime { color: #126449; background: #eaf7f1; border-color: #bfe5d5; }
.tech-portfolio .tp-status.qa { color: #225a99; background: #edf4fb; border-color: #c7d9ef; }
.tech-portfolio .tp-status.dev { color: #9b5b12; background: #fff7e9; border-color: #f2d7ae; }
.tech-portfolio .tp-status.reg { color: #9b2e2e; background: #fff0f0; border-color: #efc3c3; }
.tech-portfolio .tp-status.prop { color: #666; background: #f4f4f4; border-color: #ddd; }
.tech-portfolio .tp-status.recovered { color: #6c5016; background: #fff7db; border-color: #ead38a; }
.tech-portfolio .tp-status.research { color: #5d4598; background: #f4f0ff; border-color: #d6c8f5; }
.tech-portfolio .tp-asset-card h3,
.tech-portfolio .tp-candidate-card h3 { font-size: 17px; margin: 0 0 6px; letter-spacing: -.025em; font-weight: 800; line-height: 1.55; }
.tech-portfolio .tp-asset-key { font: 600 9.5px/1.4 ui-monospace, SFMono-Regular, Consolas, monospace; color: #9aa0a4; margin: 0 0 11px; overflow-wrap: anywhere; }
.tech-portfolio .tp-desc { font-size: 13px; color: #4c5459; margin: 0 0 13px; }
.tech-portfolio .tp-effect { padding: 11px 12px; border-radius: 10px; background: #f8f9f7; font-size: 12px; color: #555d61; }
.tech-portfolio .tp-effect span { display: block; font-size: 9px; font-weight: 900; letter-spacing: .08em; color: #a27400; margin-bottom: 3px; text-transform: uppercase; }
.tech-portfolio .tp-difficulty { display: inline-flex; align-items: center; gap: 3px; font-size: 10px; color: #767d81; }
.tech-portfolio .tp-difficulty i { width: 6px; height: 6px; border-radius: 50%; background: #e4e6e4; display: block; }
.tech-portfolio .tp-difficulty i.on { background: #34393d; }
.tech-portfolio .tp-difficulty b { margin-left: 5px; font-weight: 900; }

/* ---------- 회수·연구 후보 ---------- */
.tech-portfolio .tp-candidate-zone { padding: 34px; border: 1px solid #ded9cc; background: #fffdf8; border-radius: 24px; margin: 52px 0; }
.tech-portfolio .tp-candidate-zone h2 { margin: 0 0 6px; font-size: 28px; font-weight: 800; line-height: 1.55; }
.tech-portfolio .tp-candidate-zone > .tp-lead { margin: 0 0 20px; color: #6b6a65; font-size: 13px; }
.tech-portfolio .tp-candidate-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 11px; }
.tech-portfolio .tp-candidate-card .tp-desc { margin: 0 0 13px; }
.tech-portfolio details { margin-top: 18px; border-top: 1px solid #e9e2d3; padding-top: 14px; }
.tech-portfolio summary { cursor: pointer; font-weight: 900; font-size: 13px; }
.tech-portfolio .tp-candidate-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.tech-portfolio .tp-candidate-tags span { font: 600 10px ui-monospace, SFMono-Regular, Consolas, monospace; background: #fff; border: 1px solid #e6dfd1; padding: 7px 8px; border-radius: 8px; }

/* ---------- 서비스·인프라·도구 ---------- */
.tech-portfolio .tp-info-section { margin: 58px 0; }
.tech-portfolio .tp-info-head { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 16px; }
.tech-portfolio .tp-info-head h2 { font-size: 28px; margin: 0; font-weight: 800; line-height: 1.55; }
.tech-portfolio .tp-info-head p { color: var(--tp-muted); font-size: 13px; margin: 0; text-align: right; }
.tech-portfolio .tp-table-wrap { overflow: auto; background: #fff; border: 1px solid var(--tp-line); border-radius: 18px; box-shadow: 0 2px 7px rgba(0, 0, 0, .02); }
.tech-portfolio table { border-collapse: collapse; width: 100%; min-width: 920px; }
.tech-portfolio th,
.tech-portfolio td { text-align: left; padding: 13px 15px; border-bottom: 1px solid #eef0ee; font-size: 12px; vertical-align: top; }
.tech-portfolio th { font-size: 10px; letter-spacing: .08em; color: #888f93; background: #fafbfa; text-transform: uppercase; }
.tech-portfolio tr:last-child td { border-bottom: 0; }
.tech-portfolio td a { text-decoration: none; font-weight: 800; color: #345c8a; }
.tech-portfolio td a span { margin-left: 5px; }
.tech-portfolio .tp-private { font-weight: 700; color: #9aa0a4; }
.tech-portfolio .tp-domain-status { font-size: 10px; font-weight: 900; border-radius: 999px; padding: 4px 7px; background: #f3f4f3; border: 1px solid #dedfdd; white-space: nowrap; }
.tech-portfolio .tp-tool-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.tech-portfolio .tp-tool-card { background: #fff; border: 1px solid var(--tp-line); border-radius: 14px; padding: 15px; }
.tech-portfolio .tp-tool-card strong { display: block; font-size: 13px; margin-bottom: 4px; }
.tech-portfolio .tp-tool-card span { font-size: 11px; color: var(--tp-muted); }

/* ---------- Asset Governance ---------- */
.tech-portfolio .tp-method { background: var(--tp-navy); color: #fff; border-radius: 22px; padding: 28px 32px; margin: 58px 0 30px; display: grid; grid-template-columns: 1fr 1.6fr; gap: 26px; }
.tech-portfolio .tp-method h2 { font-size: 25px; margin: 0 0 8px; font-weight: 800; line-height: 1.55; }
.tech-portfolio .tp-method p { color: #cbd2dd; font-size: 12px; margin: 0; }
.tech-portfolio .tp-method ol { margin: 0; padding-left: 20px; color: #e3e7ed; font-size: 12px; display: grid; gap: 7px; }

.tech-portfolio .tp-footer { padding: 25px 0 45px; border-top: 1px solid var(--tp-line); color: #8b9195; font-size: 11px; }
.tech-portfolio .tp-footer-row { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }

/* ---------- 반응형 (원본 기준점 1150 / 820px) ---------- */
@media (max-width: 1150px) {
  .tech-portfolio .tp-asset-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tech-portfolio .tp-candidate-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tech-portfolio .tp-tool-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  /* 모바일에서는 목차 바를 숨기고 사이트 공통 헤더·메뉴만 사용합니다 */
  .tech-portfolio .tp-bar { display: none; }
  .tech-portfolio .tp-asset-section, .tech-portfolio .tp-info-section { scroll-margin-top: calc(var(--tp-sticky) + 12px); }
  .tech-portfolio .tp-hero-grid { grid-template-columns: 1fr; }
  .tech-portfolio .tp-hero-main { padding: 28px; }
  .tech-portfolio .tp-asset-grid { grid-template-columns: 1fr; }
  .tech-portfolio .tp-candidate-grid { grid-template-columns: 1fr; }
  .tech-portfolio .tp-tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tech-portfolio .tp-method { grid-template-columns: 1fr; }
  .tech-portfolio .tp-section-heading { display: block; }
  .tech-portfolio .tp-section-heading p { margin: 5px 0; }
  .tech-portfolio .tp-section-heading .tp-count { display: block; margin-top: 5px; }
  .tech-portfolio .tp-info-head { display: block; }
  .tech-portfolio .tp-info-head p { text-align: left; margin-top: 4px; }
}
@media print {
  .site-header, .site-footer, .tech-portfolio .tp-bar, .tech-portfolio .tp-toolbar { display: none; }
  .tech-portfolio { background: #fff; }
  .tech-portfolio .tp-wrap { width: 96%; }
  .tech-portfolio .tp-asset-card, .tech-portfolio .tp-candidate-card, .tech-portfolio .tp-table-wrap { box-shadow: none; }
  .tech-portfolio .tp-asset-section { break-inside: avoid; }
}