:root {
  --bg:#727272; --panel:#d2d2d2; --panel2:#dedede; --panel3:#eeeeee;
  --ink:#0f0f0f; --sub:#333; --muted:#5b5b5b; --red:#af0000;
  --accent-gradient:linear-gradient(135deg,#af0000 0%,#af0000 100%);
  --line:rgba(20,20,20,.22); --rail:rgba(20,20,20,.38);
  --bg-image: url("homo_ruens_assets/background/main-background.jpg");
}* {box-sizing:border-box}html {scroll-behavior:smooth}body {margin:0;background:#727272;color:var(--ink);font-family:Pretendard,SUIT,"Noto Sans KR",Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;word-break:keep-all;line-height:1.55}body.lock {overflow:hidden}button {font:inherit}.page {max-width:1240px;margin:0 auto;padding:28px 24px 70px}.brand {display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit}.mark {width:34px;height:34px;background:#111;position:relative}.mark:after {content:"";position:absolute;right:-4px;top:-4px;width:8px;height:8px;border-radius:50%;background:var(--accent-gradient);border:2px solid #727272}.brand b {display:block;font-size:18px;letter-spacing:-.045em}.brand span span {display:block;color:#5a5a5a;font-size:13px}.tab {border:0;background:transparent;color:#555;padding:10px 16px;font-size:13px;font-weight:850;cursor:pointer}.tab.active {background:#111;color:#fff}.panel {display:none}.panel.active {display:block}.guide, .matrix, .timeline-shell, .placeholder {background:#d2d2d2;box-shadow:0 22px 54px rgba(0,0,0,.12)}.section-head {padding:28px 30px 24px;display:flex;justify-content:space-between;align-items:flex-end;gap:20px;background:#d2d2d2}.section-head h2 {margin:0;font-size:clamp(26px,3.5vw,46px);line-height:1.08;letter-spacing:-.075em}.section-head p {margin:10px 0 0;color:#333;max-width:780px}.rule {color:#555;font-size:13px;font-weight:850;white-space:nowrap}.matrix {margin-bottom:34px}.matrix-row {position:relative;display:grid;grid-template-columns:230px 1fr;background:#d2d2d2;min-height:224px}.matrix-row + .matrix-row:before {content:"";position:absolute;left:30px;right:30px;top:0;border-top:1px dotted var(--line)}.axis {position:relative;padding:26px 24px 24px 30px;display:flex;flex-direction:column}.axis:after {content:"";position:absolute;right:0;top:26px;bottom:26px;border-right:1px dotted var(--line)}.axis h3 {margin:0 0 6px;font-size:25px;line-height:1.05;letter-spacing:-.065em}.axis h3 span, .axis-sub {color:var(--red)}.axis-sub {font-size:13px;font-weight:900;margin-bottom:auto}.axis p {margin:58px 0 0;color:#444;font-size:13px}.cards {padding:20px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.project-card {position:relative;min-height:184px;border:0;background:#dedede;text-align:left;cursor:pointer;padding:0;overflow:hidden;transition:.18s}.project-card:hover {background:#eeeeee;transform:translateY(-2px);box-shadow:0 16px 40px rgba(0,0,0,.13)}.front, .hover {position:absolute;inset:0;padding:20px;display:flex;flex-direction:column;justify-content:space-between;transition:.18s;z-index:2}.hover {opacity:0;transform:translateY(8px);background:#eee}.project-card:hover .front {opacity:0;transform:translateY(-8px)}.project-card:hover .hover {opacity:1;transform:translateY(0)}.front strong {color:var(--red);font-size:24px;line-height:1.08;font-weight:950;letter-spacing:-.062em;max-width:calc(100% - 74px)}.front b {margin-top:12px;font-size:18px;line-height:1.24;letter-spacing:-.05em}.front em, .hover em {font-style:normal;color:#444;font-size:13px;line-height:1.45}.hover b {color:var(--red);font-size:17px;line-height:1.25;letter-spacing:-.05em;padding-right:76px}.hover i {font-style:normal;color:var(--red);font-size:12px;font-weight:900}.timeline-shell {background:#d2d2d2}.timeline-row {position:relative;display:grid;grid-template-columns:238px 1fr;min-height:260px;background:#d2d2d2}.timeline-row + .timeline-row:before {content:"";position:absolute;left:30px;right:30px;top:0;border-top:1px dotted var(--line)}.phase {position:relative;padding:30px 26px;display:flex;flex-direction:column;justify-content:center}.phase:after {content:"";position:absolute;right:0;top:24px;bottom:24px;border-right:1px dotted var(--line)}.phase strong {color:var(--red);font-size:40px;line-height:.9;letter-spacing:-.08em}.phase span {display:block;margin-top:10px;font-size:20px;font-weight:950;line-height:1.15;letter-spacing:-.06em}.phase small {display:block;margin-top:9px;color:#444;font-size:13px;line-height:1.35;font-weight:700;letter-spacing:-.04em}.timeline-right {padding:22px 26px 24px;display:grid;grid-template-rows:auto 1fr 1fr;gap:12px;min-width:0}.year-header {display:grid;grid-auto-flow:column;grid-auto-columns:1fr;padding-left:82px;color:#555;font-size:14px;font-weight:950;letter-spacing:-.04em}.year-header span {text-align:center}.lane {display:grid;grid-template-columns:70px 1fr;gap:12px;align-items:center;min-height:86px}.lane-label {color:#555;font-size:12px;font-weight:950;line-height:1.1}.dot {width:15px;height:15px;border-radius:50%;background:var(--accent-gradient);box-shadow:0 0 0 5px #d2d2d2,0 0 0 6px rgba(20,20,20,.28);transition:.16s}.side .dot {width:13px;height:13px}.lane-event:hover .dot {transform:scale(1.16);box-shadow:0 0 0 5px #d2d2d2,0 0 0 8px var(--red)}.placeholder {padding:clamp(30px,5vw,54px)}.placeholder h2 {margin:0;font-size:clamp(28px,4vw,50px);letter-spacing:-.075em;line-height:1.08}.placeholder p {color:#333;max-width:760px}.modal-root {position:fixed;inset:0;z-index:100;display:none}.modal-root.open {display:block}.backdrop {position:absolute;inset:0;background:rgba(16,16,16,.46);backdrop-filter:blur(7px)}.modal {position:absolute;inset:44px 34px 24px;max-width:1180px;margin:0 auto;background:#d1d1d1;box-shadow:0 36px 120px rgba(0,0,0,.48);overflow:hidden;display:grid;grid-template-rows:auto 1fr}.modal-top {display:flex;justify-content:space-between;gap:20px;padding:26px 30px;background:#d9d9d9}.modal-kicker {color:var(--red);font-size:13px;font-weight:950;margin-bottom:8px}.modal h2 {margin:0;font-size:clamp(27px,3.7vw,50px);line-height:1.08;letter-spacing:-.075em;max-width:760px}.modal-pill {margin-top:12px;display:inline-flex;background:#cecece;color:var(--red);padding:8px 12px;font-weight:950;font-size:14px}.close {border:0;background:#c4c4c4;color:#111;width:42px;height:42px;cursor:pointer;font-size:24px}.close:hover {background:#111;color:#fff}.project-body {min-height:0;overflow:auto;display:grid;grid-template-columns:.92fr 1.08fr;background:#bebebe}.info {padding:28px 30px 34px;background:#d9d9d9}.lead {margin:0 0 24px;color:#333;font-size:16px}.info-grid {display:grid;gap:12px}.info-card {background:#dedede;padding:18px}.info-card h3 {margin:0 0 7px;color:var(--red);font-size:15px}.info-card p {margin:0;color:#333;font-size:14px}.tags {display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}.tag {display:inline-flex;align-items:center;min-height:27px;padding:0 9px;background:#cecece;color:var(--red);font-size:12px;font-weight:850}.gallery {padding:28px 30px 34px;background:#bebebe}.gallery-head h3 {margin:0;font-size:23px;letter-spacing:-.055em}.gallery-head p {margin:4px 0 16px;color:#555;font-size:13px}.viewer {background:#dedede;overflow:hidden}.viewer-main {min-height:310px;background:#c9c9c9;display:grid;place-items:center;padding:26px}.frame {width:min(100%,520px);min-height:238px;background:#e2e2e2;padding:22px;display:grid;align-content:center;gap:10px;text-align:center}.asset-type {justify-self:center;background:#cecece;color:var(--red);padding:7px 11px;font-size:12px;font-weight:950}.asset-title {font-size:clamp(22px,3vw,34px);line-height:1.1;letter-spacing:-.07em;font-weight:950}.asset-desc {color:#333;max-width:430px;margin:0 auto;font-size:14px}.asset-placeholder {margin-top:6px;color:#555;font-size:12px}.thumbs {display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:12px;background:#d4d4d4}.thumb {border:0;background:#dedede;padding:13px;min-height:86px;cursor:pointer;text-align:left}.thumb.active, .thumb:hover {background:#eeeeee;box-shadow:0 8px 22px rgba(0,0,0,.08)}.thumb b {display:block;color:var(--red);font-size:12px;margin-bottom:4px}.thumb span {display:block;color:#333;font-size:13px;line-height:1.34}.modal-note {margin-top:14px;background:#d0d0d0;padding:15px;color:#333;font-size:13px}footer {margin-top:22px;color:#5a5a5a;font-size:12px;display:flex;flex-direction:column;align-items:flex-start;gap:6px;letter-spacing:.03em}footer .footer-desc {color:#8a8a8a;font-size:11px;letter-spacing:.01em;line-height:1.5}
@media(max-width:1020px){.hero, .matrix-row, .timeline-row, .project-body {grid-template-columns:1fr}.axis:after, .phase:after {right:30px;left:30px;top:auto;bottom:0;border-right:0;border-bottom:1px dotted var(--line)}.cards {grid-template-columns:1fr 1fr}}
@media(max-width:700px){.page {padding:20px 14px 46px}.topbar {position:static;margin:0 0 22px;padding:0;background:transparent;flex-direction:column;align-items:flex-start}.tab {white-space:nowrap}.cards, .thumbs {grid-template-columns:1fr}.section-head {flex-direction:column;align-items:flex-start}.timeline-right {overflow-x:auto}.year-header, .lane {min-width:760px}.modal {inset:10px}}/* ===== v18 fix: equal year columns, no overlap ===== */
.timeline-row.equal-row {
  position: relative;
  display: grid;
  grid-template-columns: 238px 1fr;
  min-height: 282px;
  background: #d2d2d2;
}.timeline-row.equal-row + .timeline-row.equal-row::before {
  content: "";
  position: absolute;
  left: 30px;
  right: 30px;
  top: 0;
  border-top: 1px dotted var(--line);
}.timeline-right.equal-grid {
  padding: 22px 26px 24px;
  display: grid;
  grid-template-rows: auto 1fr 1fr;
  gap: 12px;
  min-width: 0;
}.timeline-right.equal-grid .year-header {
  display: grid;
  grid-template-columns: repeat(var(--year-count), minmax(0, 1fr));
  padding-left: 82px;
  color: #555;
  font-size: 14px;
  font-weight: 950;
  letter-spacing: -0.04em;
}.timeline-right.equal-grid .year-header span {
  text-align: center;
}.equal-grid .lane {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 12px;
  align-items: center;
  min-height: 92px;
}.equal-grid .lane-label {
  color: #555;
  font-size: 12px;
  font-weight: 950;
  line-height: 1.1;
}.lane-cells {
  display: grid;
  grid-template-columns: repeat(var(--year-count), minmax(0, 1fr));
  min-height: 92px;
  position: relative;
  border-top: 1px solid var(--rail);
}.side .lane-cells {
  border-top: 1px dotted rgba(20,20,20,.42);
}.year-cell {
  position: relative;
  min-width: 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 4px;
  padding-top: 0;
}.year-cell + .year-cell {
  border-left: 1px dotted var(--line);
}.grid-event {
  width: min(96px, 48%);
  min-width: 54px;
  transform: translateY(-10px);
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  display: grid;
  justify-items: center;
  gap: 8px;
  color: #fff;
}.year-cell:has(.grid-event:nth-child(3)) .grid-event {
  width: 31%;
  min-width: 46px;
}.grid-event .dot {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--accent-gradient);
  box-shadow: 0 0 0 5px #d2d2d2, 0 0 0 6px rgba(20,20,20,.28);
  transition: .16s;
  flex: 0 0 auto;
}.side .grid-event .dot {
  width: 13px;
  height: 13px;
}.grid-event:hover .dot {
  transform: scale(1.16);
  box-shadow: 0 0 0 5px #d2d2d2, 0 0 0 8px var(--red);
}.grid-event b {
  font-size: 11px;
  line-height: 1.22;
  font-weight: 850;
  letter-spacing: -0.04em;
  text-align: center;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}.year-cell.empty::after {
  content: "";
  display: block;
  height: 1px;
}

/* Disable the previous absolute lane system if remnants exist */

@media(max-width:1020px) {.timeline-row.equal-row {
    grid-template-columns: 1fr;
  }.timeline-right.equal-grid {
    overflow-x: auto;
  }.timeline-right.equal-grid .year-header, .equal-grid .lane {
    min-width: 820px;
  }
}

@media(max-width:700px) {.timeline-right.equal-grid .year-header, .equal-grid .lane {
    min-width: 860px;
  }
}/* ===== v19 corrected main/side classification ===== */
.side .year-cell:has(.grid-event:nth-child(3)) .grid-event {
  width: 30%;
  min-width: 44px;
}.side .year-cell:has(.grid-event:nth-child(3)) .grid-event b {
  font-size: 10.5px;
  line-height: 1.18;
}.matrix, .timeline-shell, .placeholder { background:#c8c8c8; }.section-head { background:#c8c8c8; }.matrix-row, .timeline-row.equal-row { background:#c8c8c8; }.project-card { background:#d4d4d4; }.project-card:hover { background:#e2e2e2; }.info-card, .viewer, .thumb { background:#d8d8d8; }.axis p, .section-head p, .placeholder p, .info-card p, .asset-desc, .lead { color:#2f2f2f; }.timeline-right.equal-grid .year-header, .equal-grid .lane-label, .rule, .brand span span { color:#4f4f4f; }.phase small { color:#3b3b3b; }.modal { background:#c8c8c8; }.modal-top, .info { background:#d1d1d1; }.project-body, .gallery { background:#b7b7b7; }.viewer-main { background:#c1c1c1; }.frame { background:#dddddd; }.modal-note { background:#c7c7c7; }/* ===== v21 light gray background + white main sections ===== */
:root {
  --bg:#d8d8d8;
  --panel:#ffffff;
  --panel2:#f3f3f3;
  --panel3:#ffffff;
  --sub:#2f2f2f;
  --muted:#555555;
  --line:rgba(20,20,20,.18);
  --rail:rgba(20,20,20,.34);
}.guide, .placeholder {
  background:#cfcfcf;
}/* the two main menus */
.matrix, .timeline-shell {
  background:#ffffff;
  box-shadow:0 18px 44px rgba(0,0,0,.08);
}.matrix .section-head, .timeline-shell .section-head {
  background:#ffffff;
}.matrix-row, .timeline-row.equal-row {
  background:#ffffff;
}.cards {
  background:#ffffff;
}.axis, .phase {
  background:transparent;
}.project-card {
  background:#f1f1f1;
}.project-card:hover {
  background:#ffffff;
}.timeline-right.equal-grid {
  background:#ffffff;
}.lane-cells {
  background:#ffffff;
}.year-cell.empty {
  background:transparent;
}.grid-event .dot {
  box-shadow: 0 0 0 5px #ffffff, 0 0 0 6px rgba(20,20,20,.24);
}.grid-event:hover .dot {
  box-shadow: 0 0 0 5px #ffffff, 0 0 0 8px var(--red);
}.modal {
  background:#d4d4d4;
}.modal-top, .info {
  background:#efefef;
}.project-body, .gallery {
  background:#c7c7c7;
}.viewer-main {
  background:#d8d8d8;
}.frame {
  background:#f1f1f1;
}/* ===== v22 brighter outer background refinement ===== */

/* ===== v23 softer light-gray outer background ===== */

/* ===== v24 white hero/guide + subtle translucent gray background ===== */
:root {
  --bg:#f1f1f1;
}/* make the top menu white like the two main sections */

/* keep Selected Projects / Career Timeline clean white */
.matrix, .timeline-shell {
  background:#ffffff;
}.matrix .section-head, .timeline-shell .section-head, .matrix-row, .timeline-row.equal-row, .cards, .timeline-right.equal-grid, .lane-cells {
  background:#ffffff;
}/* cards stay slightly gray so white sections still have hierarchy */
.project-card {
  background:#f1f1f1;
}.project-card:hover {
  background:#ffffff;
}/* ===== v25 portfolio cards white base + glassy hover, revised S-copy typography ===== */
.project-card {
  background:rgba(255,255,255,.92) !important;
  box-shadow:0 8px 24px rgba(0,0,0,.035);
}.project-card:hover {
  background:rgba(255,255,255,.54) !important;
  backdrop-filter: blur(8px);
  box-shadow:0 18px 40px rgba(0,0,0,.085);
}.project-card .hover {
  background:rgba(255,255,255,.58) !important;
  backdrop-filter: blur(8px);
}.front em, .hover em {
  color:#3f3f3f;
}.phase strong {
  display:block;
  color:var(--red);
  font-size:40px;
  line-height:.9;
  letter-spacing:-.08em;
}.phase strong em {
  display:inline-block;
  margin-left:4px;
  color:#555;
  font-size:13px;
  font-style:normal;
  font-weight:850;
  letter-spacing:-.02em;
  vertical-align:middle;
}.phase span {
  display:block;
  margin-top:11px;
  font-size:20px;
  font-weight:950;
  line-height:1.15;
  letter-spacing:-.06em;
}.phase small {
  display:block;
  margin-top:13px;
  color:#3c3c3c;
  font-size:13px;
  line-height:1.42;
  font-weight:750;
  letter-spacing:-.04em;
}/* ===== v26 portfolio card hover: subtle red-gray tint ===== */
.project-card:hover {
  background:rgba(248,240,240,.74) !important;
  backdrop-filter: blur(8px);
  box-shadow:0 18px 40px rgba(115,22,28,.10);
}.project-card .hover {
  background:rgba(248,240,240,.78) !important;
  backdrop-filter: blur(8px);
}.project-card:hover .kicker {
  color:rgba(175,0,0,.72);
}.project-card:hover .hover b {
  color:var(--red);
}/* ===== v27 portfolio card hover: light gray gradient ===== */
.project-card:hover {
  background: linear-gradient(180deg, rgba(248,248,248,.96) 0%, rgba(238,238,238,.88) 100%) !important;
  backdrop-filter: blur(8px);
  box-shadow: 0 18px 40px rgba(0,0,0,.08);
}.project-card .hover {
  background: linear-gradient(180deg, rgba(250,250,250,.94) 0%, rgba(239,239,239,.86) 100%) !important;
  backdrop-filter: blur(8px);
}.project-card:hover .kicker {
  color:#666 !important;
}.project-card:hover .hover b {
  color: var(--red);
}/* ===== v28 timeline line lowered + centered lane labels ===== */
.equal-grid .lane {
  min-height: 98px;
}.equal-grid .lane-label {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  align-self: stretch;
  font-size: 14px !important; /* about +2pt from previous 12px */
  line-height: 1.15;
  letter-spacing: -0.03em;
}.lane-cells {
  min-height: 98px;
  border-top: 0 !important;
  position: relative;
  overflow: visible;
}.lane-cells::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 18px;
  border-top: 1px solid var(--rail);
  pointer-events: none;
}.side .lane-cells::before {
  border-top: 1px dotted rgba(20,20,20,.42);
}.year-cell {
  padding-top: 18px;
  overflow: visible;
}.grid-event {
  transform: translateY(-8px);
}.grid-event .dot {
  position: relative;
  z-index: 2;
}/* ===== v29 compact timeline alignment like reference screenshot ===== */

/* make the whole right timeline visually lower-height / tighter */
.timeline-right.equal-grid {
  grid-template-rows: auto 86px 86px !important;
  gap: 10px !important;
}.timeline-right.equal-grid .year-header {
  padding-left: 82px;
  margin-bottom: -2px;
  font-size: 14px;
}/* keep Main job / Side Project centered against each rail */
.equal-grid .lane {
  grid-template-columns: 70px 1fr !important;
  gap: 12px !important;
  min-height: 86px !important;
  align-items: stretch !important;
}.equal-grid .lane-label {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  align-self: stretch !important;
  font-size: 14px !important;
  line-height: 1.08 !important;
  font-weight: 950 !important;
  letter-spacing: -0.04em !important;
}/* the rail now sits at the center of each lane, not below it */
.lane-cells {
  min-height: 86px !important;
  border-top: 0 !important;
  position: relative !important;
  overflow: visible !important;
}.lane-cells::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 22px !important;
  border-top: 1px solid rgba(20,20,20,.42) !important;
  pointer-events: none;
}/* side project line: make dotted feel clearer */
.side .lane-cells::before {
  border-top: 1px dotted rgba(20,20,20,.62) !important;
}/* year dividers begin slightly above the main rail area */
.year-cell {
  padding-top: 22px !important;
  overflow: visible !important;
}.year-cell + .year-cell {
  border-left: 1px dotted rgba(20,20,20,.22) !important;
}/* pull the project point onto the rail; text remains below */
.grid-event {
  transform: translateY(-8px) !important;
  gap: 7px !important;
}/* dot remains on the rail center */
.grid-event .dot {
  box-shadow: 0 0 0 5px #ffffff, 0 0 0 6px rgba(20,20,20,.22) !important;
}.grid-event:hover .dot {
  transform: scale(1.16);
  box-shadow: 0 0 0 5px #ffffff, 0 0 0 8px var(--red) !important;
}/* vertical year separators should visually start higher, matching the compact row */
.timeline-right.equal-grid {
  position: relative;
}.lane-cells .year-cell + .year-cell::before {
  content: "";
  position: absolute;
  left: -1px;
  top: -14px;
  bottom: -18px;
  border-left: 1px dotted rgba(20,20,20,.18);
  pointer-events: none;
}/* hide the original full-height border so the custom one controls the position */
.year-cell + .year-cell {
  border-left: 0 !important;
}/* compact side row but preserve side text readability */
.side .grid-event {
  transform: translateY(-8px) !important;
}/* ===== v30 raise Main job / Side Project labels to align with rails ===== */
.equal-grid .lane-label {
  align-items: flex-start !important;
  justify-content: center !important;
  padding-top: 7px !important;
  box-sizing: border-box !important;
}/* slight fine-tune: Side Project text has taller visual mass */
.side .lane-label {
  padding-top: 6px !important;
}/* ===== v31 text corrections ===== */

/* ===== v32 fix Negotiation color priority ===== */

/* ===== v33 & Negotiation soft gray ===== */
.axis h3 .amp-negotiation-gray {
  color:#6a6a6a !important;
}/* ===== v34 third main card: light bio profile ===== */

/* ===== v35 bio education: official / unofficial split ===== */

/* ===== v36 third main card: contact & links ===== */

/* ===== v37 simplified third card ===== */

/* ===== v38 contact card spelling/font/icon links ===== */

/* ===== v39 contact card final with actual links/icons ===== */

/* ===== v40 contact: compact names + equal icon sizes ===== */

/* ===== v41 contact title refined + borderless icons ===== */

/* ===== v42 topbar reworked: Contact/Links moved to top, hero removed ===== */

.tab {
  min-height:42px;
  padding:0 14px !important;
  background:#ffffff !important;
  border:1px solid rgba(20,20,20,.1) !important;
  color:#1a1a1a !important;
  font-size:12px !important;
  font-weight:950 !important;
  letter-spacing:.02em !important;
}.tab:hover, .tab.active {
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(239,239,239,.9)) !important;
  border-color:rgba(175,0,0,.2) !important;
}.panel#projects {
  padding-top: 18px;
}

@media(max-width:1000px) {.topbar {
    align-items:flex-start;
    flex-direction:column;
  }

  

  

  
}/* ===== v43 inline Contact/Links + separate right Navigator ===== */
.topbar {
  display:grid !important;
  grid-template-columns: auto 1fr auto !important;
  align-items:center !important;
  gap:22px !important;
  min-height:72px !important;
  padding:14px 22px !important;
}.inline-access {
  justify-self:start;
  display:flex;
  align-items:center;
  gap:16px;
  min-width:0;
}.access-group {
  display:flex;
  align-items:center;
  gap:10px;
}.access-label {
  color:var(--red);
  font-size:11px;
  font-weight:950;
  letter-spacing:.12em;
  text-transform:uppercase;
  margin-right:2px;
}.access-divider {
  width:1px;
  height:24px;
  background:rgba(20,20,20,.16);
}.access-link {
  min-height:34px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:0 2px;
  border:0;
  background:transparent;
  color:#292929;
  text-decoration:none;
  cursor:pointer;
  font-family:inherit;
  font-size:11.5px;
  font-weight:850;
  letter-spacing:-.035em;
  white-space:nowrap;
}.access-link:hover {
  color:#111;
}.access-icon {
  width:26px;
  height:26px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#222;
}.access-icon svg {
  width:18px;
  height:18px;
  display:block;
}.access-link.email .access-icon {
  color:var(--red);
}.access-mark {
  font-size:16px;
  line-height:1;
  font-weight:950;
  letter-spacing:-.04em;
}.naver-mark {
  color:#18a94b;
}.brunch-mark {
  font-size:15px;
}.navigator-panel .tab:hover, .navigator-panel .tab.active {
  background:linear-gradient(180deg, rgba(250,250,250,.98), rgba(238,238,238,.88)) !important;
  border:0 !important;
}

@media(max-width:1000px) {.topbar {
    grid-template-columns:1fr !important;
    align-items:flex-start !important;
  }.inline-access {
    flex-wrap:wrap;
  }

  

  
}/* ===== v44 right-aligned contact/links in frame + navigator outside ===== */
.topbar {
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:18px !important;
  min-height:72px !important;
  padding:14px 22px !important;
  padding-right: 22px !important;
  position: relative;
}.inline-access {
  margin-left:auto !important;
  justify-content:flex-end !important;
  display:flex !important;
  align-items:center !important;
  gap:16px !important;
  min-width:0;
  text-align:right;
}.access-group {
  display:flex;
  align-items:center;
  gap:10px;
}.access-link {
  min-height:34px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:0 2px;
  border:0;
  background:transparent;
  color:#292929;
  text-decoration:none;
  cursor:pointer;
  font-family:inherit;
  font-size:11.5px;
  font-weight:850;
  letter-spacing:-.035em;
  white-space:nowrap;
}.access-link:hover {
  color:#111;
}.access-divider {
  width:1px;
  height:24px;
  background:rgba(20,20,20,.16);
}/* remove old in-header navigator presentation */

/* floating navigator outside the frame */

.navigator-floating .navigator-panel .tab:hover, .navigator-floating .navigator-panel .tab.active {
  background:linear-gradient(180deg, rgba(250,250,250,.98), rgba(238,238,238,.88)) !important;
}/* create space so floating navigator doesn't visually collide on first load */
body {
  padding-right: 0;
}

@media(max-width:1100px) {.topbar {
    padding-right:22px !important;
  }.inline-access {
    flex-wrap:wrap;
    justify-content:flex-end !important;
  }
}

@media(max-width:1000px) {.topbar {
    align-items:flex-start !important;
    flex-direction:column !important;
  }.inline-access {
    width:100%;
    justify-content:flex-start !important;
    text-align:left;
    margin-left:0 !important;
  }

  

  
}/* ===== v45 opening cover with Wanderer background and translucent interface ===== */

html {
  scroll-behavior: smooth;
}.topbar .brand, .topbar .brand b, .topbar .brand span span, .access-link, .access-label {
  position: relative;
  z-index: 2;
}.inline-access {
  justify-content: flex-end !important;
}.access-link, .access-copy {
  color: #1f1f1f !important;
}.main-shell {
  position: relative;
  z-index: 5;
  margin-top: 18px;
}.main-shell > .panel {
  padding-top: 18px;
}.matrix, .timeline-shell, .placeholder {
  background: rgba(255,255,255,.42) !important;
  backdrop-filter: blur(16px) saturate(122%);
  border: 1px solid rgba(255,255,255,.3);
  box-shadow: 0 20px 50px rgba(0,0,0,.28), 0 6px 18px rgba(0,0,0,.18);
}.matrix-row, .timeline-row.equal-row {
  background: rgba(255,255,255,.28) !important;
}.section-head {
  background: rgba(255,255,255,.18) !important;
}.project-card {
  background: rgba(255,255,255,.72) !important;
  backdrop-filter: blur(10px);
}.project-card:hover {
  background: linear-gradient(180deg, rgba(250,250,250,.82) 0%, rgba(236,236,236,.7) 100%) !important;
}.modal {
  background: rgba(235,235,235,.78) !important;
  backdrop-filter: blur(16px);
}.modal-top, .info {
  background: rgba(255,255,255,.44) !important;
}.project-body, .gallery {
  background: rgba(235,235,235,.42) !important;
}

@media(max-width:1000px) {.topbar {
    margin: -14px 12px 0;
  }
}/* ===== v46 uploaded Wanderer artwork + restored top menus ===== */

.inline-access {
  margin-left:auto !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:16px !important;
}.access-group {
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
}.access-label, .access-link, .access-copy, .access-divider, .access-icon, .access-mark {
  display:inline-flex;
}.access-link, .access-copy {
  min-height:34px;
  align-items:center;
  gap:6px;
  padding:0 2px;
  border:0;
  background:transparent;
  color:#292929;
  text-decoration:none;
  cursor:pointer;
  font-family:inherit;
  font-size:11.5px;
  font-weight:850;
  letter-spacing:-.035em;
  white-space:nowrap;
}.access-copy {
  appearance:none;
}.access-label {
  color:var(--red);
  font-size:11px;
  font-weight:950;
  letter-spacing:.12em;
  text-transform:uppercase;
  margin-right:2px;
}.access-divider {
  width:1px;
  height:24px;
  background:rgba(20,20,20,.16);
}.access-icon {
  width:26px;
  height:26px;
  align-items:center;
  justify-content:center;
  color:#222;
}.access-icon svg {
  width:18px;
  height:18px;
  display:block;
}.access-link.email .access-icon {
  color:var(--red);
}.access-mark {
  font-size:16px;
  line-height:1;
  font-weight:950;
  letter-spacing:-.04em;
}.naver-mark {
  color:#18a94b;
}.brunch-mark {
  font-size:15px;
}.navigator-floating .navigator-panel .tab:hover, .navigator-floating .navigator-panel .tab.active {
  background:linear-gradient(180deg, rgba(250,250,250,.98), rgba(238,238,238,.88)) !important;
}

@media(max-width:1000px) {.topbar {
    margin: -14px 12px 0;
    align-items:flex-start !important;
    flex-direction:column !important;
  }.inline-access {
    width:100%;
    justify-content:flex-start !important;
    margin-left:0 !important;
    flex-wrap:wrap !important;
  }

  
}/* ===== v47 full uploaded painting background + translucent frame system ===== */

/* Painting stays behind the whole page, not just cover */

/* Keep the opening image identical to the global background */

/* The page itself should not cover the painting */
.page {
  background: transparent !important;
}/* Top frame: translucent shell */

/* Contact / Links as two separate frames, right-aligned */

.access-label {
  color: var(--red) !important;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-right: 2px;
}.access-link, .access-copy {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 2px;
  border: 0;
  background: transparent;
  color: #222 !important;
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 850;
  letter-spacing: -.035em;
  white-space: nowrap;
}.access-link:hover, .access-copy:hover {
  color:#000 !important;
}.access-icon {
  width: 25px;
  height: 25px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}.access-icon svg {
  width: 18px;
  height: 18px;
  display:block;
}.access-link.email .access-icon {
  color: var(--red);
}.access-mark {
  font-size: 16px;
  line-height: 1;
  font-weight: 950;
  letter-spacing: .10em;
}.naver-mark {
  color:#18a94b;
}.brunch-mark {
  font-size:15px;
}/* Remove accidental old access dividers / dropdown remnants */
.access-divider, .topbar-right {
  display:none !important;
}/* Floating navigator outside the frame */

.navigator-floating .navigator-panel .tab:hover, .navigator-floating .navigator-panel .tab.active {
  background:rgba(255,255,255,.45) !important;
}/* Main cards: translucent outer frames, clearer internal surfaces */
.matrix, .timeline-shell, .placeholder {
  background: rgba(255,255,255,.36) !important;
  border: 1px solid rgba(255,255,255,.46) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.32),
    0 22px 54px rgba(0,0,0,.13) !important;
  backdrop-filter: blur(18px) saturate(122%);
}.section-head {
  background: rgba(255,255,255,.18) !important;
  border-bottom: 1px solid rgba(255,255,255,.34);
}.matrix-row, .timeline-row.equal-row {
  background: rgba(255,255,255,.24) !important;
}.cards, .timeline-right.equal-grid, .lane-cells {
  background: transparent !important;
}.project-card {
  background: rgba(255,255,255,.68) !important;
  border: 1px solid rgba(255,255,255,.44) !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.06) !important;
  backdrop-filter: blur(12px);
}.project-card:hover {
  background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(235,235,235,.62)) !important;
  box-shadow: 0 18px 42px rgba(0,0,0,.10) !important;
}.axis, .phase {
  background: rgba(255,255,255,.16);
}/* Keep text legible over artwork */
.section-head h2, .axis h3, .phase strong, .timeline-right b, .project-card strong, .project-card b {
  color:#111;
}.axis p, .section-head p, .phase small {
  color:#2e2e2e;
}/* Modal also sits as translucent layer */
.modal {
  background: rgba(235,235,235,.72) !important;
  backdrop-filter: blur(18px) saturate(120%);
  border: 1px solid rgba(255,255,255,.46);
}.modal-top, .info {
  background: rgba(255,255,255,.44) !important;
}.project-body, .gallery {
  background: rgba(235,235,235,.42) !important;
}

@media(max-width:1000px) {.topbar {
    margin: -14px 12px 0;
    flex-direction:column !important;
    align-items:flex-start !important;
  }

  

  

  
}/* ===== v48 restore inline contact/links + page uses tall painting as full-frame background ===== */

/* Whole frame background = uploaded tall painting */

.page {
  position: relative;
  background-image:
    linear-gradient(180deg, rgba(245,245,245,.14), rgba(245,245,245,.28)),
    var(--bg-image) !important;
  background-position: center top !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important; /* prototype: page scroll follows the full vertical image */
  min-height: 100vh;
}/* remove earlier cover/section image behavior if any remains */

/* Keep topbar in the previous inline position */

.inline-access {
  margin-left: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 16px !important;
  min-width: 0;
}.access-group {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}.access-label {
  color: var(--red) !important;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-right: 2px;
}.access-divider {
  width: 1px;
  height: 24px;
  background: rgba(20,20,20,.16);
  display:block !important;
}.access-link, .access-copy {
  min-height: 34px;
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  padding: 0 2px;
  border: 0;
  background: transparent;
  color: #222 !important;
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 850;
  letter-spacing: -.035em;
  white-space: nowrap;
}.access-copy {
  appearance: none;
}.access-icon {
  width: 26px;
  height: 26px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  color: #222;
}.access-icon svg {
  width: 18px;
  height: 18px;
  display: block;
}.access-link.email .access-icon {
  color: var(--red);
}.access-mark {
  font-size: 16px;
  line-height: 1;
  font-weight: 950;
  letter-spacing: -.04em;
}.naver-mark {
  color: #18a94b;
}.brunch-mark {
  font-size: 15px;
}/* hide reframed versions from previous iterations */

/* Floating navigator remains outside the main frame */

/* Translucent card outer shells preserved */
.main-shell {
  position: relative;
  z-index: 5;
  margin-top: 16px;
}.matrix, .timeline-shell, .placeholder {
  background: rgba(255,255,255,.28) !important;
  border: 1px solid rgba(255,255,255,.44) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    0 22px 54px rgba(0,0,0,.12) !important;
  backdrop-filter: blur(18px) saturate(122%);
}.section-head {
  background: rgba(255,255,255,.16) !important;
  border-bottom: 1px solid rgba(255,255,255,.32);
}.matrix-row, .timeline-row.equal-row {
  background: rgba(255,255,255,.20) !important;
}.project-card {
  background: rgba(255,255,255,.60) !important;
  border: 1px solid rgba(255,255,255,.40) !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.05) !important;
  backdrop-filter: blur(10px);
}.project-card:hover {
  background: linear-gradient(180deg, rgba(255,255,255,.72), rgba(235,235,235,.56)) !important;
  box-shadow: 0 18px 42px rgba(0,0,0,.08) !important;
}

@media(max-width:1000px) {.topbar {
    margin: 14px 12px 0 !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }.inline-access {
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-start !important;
    margin-left: 0 !important;
  }

  
}/* ===== v49 exact uploaded painting as entire page background ===== */

html, body {
  background: #d8d8d8 !important;
}.page {
  position: relative;
  isolation: isolate;
  background: transparent !important;
  min-height: 100vh;
}.page::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image:
    linear-gradient(180deg, rgba(247,247,247,.10), rgba(247,247,247,.18)),
    var(--exact-painting);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% 100%;
}/* remove any cover logic from previous versions */

.inline-access {
  margin-left: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 16px !important;
  min-width: 0;
}.access-group {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}.access-label {
  color: var(--red) !important;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-right: 2px;
}.access-divider {
  width: 1px;
  height: 24px;
  background: rgba(20,20,20,.16);
  display: block !important;
}.access-link, .access-copy {
  min-height: 34px;
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  padding: 0 2px;
  border: 0;
  background: transparent;
  color: #222 !important;
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 850;
  letter-spacing: -.035em;
  white-space: nowrap;
}.access-copy {
  appearance: none;
}.access-icon {
  width: 26px;
  height: 26px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  color: #222;
}.access-icon svg {
  width: 18px;
  height: 18px;
  display: block;
}.access-link.email .access-icon {
  color: var(--red);
}.access-mark {
  font-size: 16px;
  line-height: 1;
  font-weight: 950;
  letter-spacing: -.04em;
}.naver-mark {
  color: #18a94b;
}.brunch-mark {
  font-size: 15px;
}/* remove prior reframed styles */

.main-shell {
  position: relative;
  z-index: 5;
  margin-top: 16px;
}.matrix, .timeline-shell, .placeholder {
  background: rgba(255,255,255,.24) !important;
  border: 1px solid rgba(255,255,255,.42) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    0 22px 54px rgba(0,0,0,.12) !important;
  backdrop-filter: blur(18px) saturate(122%);
}.section-head {
  background: rgba(255,255,255,.14) !important;
  border-bottom: 1px solid rgba(255,255,255,.32);
}.matrix-row, .timeline-row.equal-row {
  background: rgba(255,255,255,.18) !important;
}.project-card {
  background: rgba(255,255,255,.58) !important;
  border: 1px solid rgba(255,255,255,.40) !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.05) !important;
  backdrop-filter: blur(10px);
}.project-card:hover {
  background: linear-gradient(180deg, rgba(255,255,255,.70), rgba(235,235,235,.54)) !important;
  box-shadow: 0 18px 42px rgba(0,0,0,.08) !important;
}

@media(max-width:1000px) {.topbar {
    margin: 14px 12px 0 !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }.inline-access {
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-start !important;
    margin-left: 0 !important;
  }

  
}/* ===== v50 deep background layer + half exposure before menu ===== */

html, body {
  background: #d8d8d8 !important;
  scroll-behavior: smooth;
}.page {
  position: relative;
  min-height: 100vh;
  background: transparent !important;
  isolation: isolate;
}/* The painting lives on the far back layer of the whole page */

/* Hide previous direct image/cover approaches */

/* First view: only let the user look at the upper half-ish of the painting */
.intro-spacer {
  position: relative;
  z-index: 1;
  height: 56vh;
  min-height: 460px;
  pointer-events: none;
}/* Topbar exists but is hidden until user scrolls down */

/* Keep contact / links in the original inline place */
.inline-access {
  margin-left: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 16px !important;
  min-width: 0;
}.access-group {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}.access-label {
  color: var(--red) !important;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-right: 2px;
}.access-divider {
  width: 1px;
  height: 24px;
  background: rgba(20,20,20,.16);
  display: block !important;
}.access-link, .access-copy {
  min-height: 34px;
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  padding: 0 2px;
  border: 0;
  background: transparent;
  color: #222 !important;
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 850;
  letter-spacing: -.035em;
  white-space: nowrap;
}.access-copy {
  appearance: none;
}.access-icon {
  width: 26px;
  height: 26px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  color: #222;
}.access-icon svg {
  width: 18px;
  height: 18px;
  display: block;
}.access-link.email .access-icon {
  color: var(--red);
}.access-mark {
  font-size: 16px;
  line-height: 1;
  font-weight: 950;
  letter-spacing: -.04em;
}.naver-mark {
  color: #18a94b;
}.brunch-mark {
  font-size: 15px;
}/* Navigator stays outside */

/* Main content overlays the background after scrolling down */
.main-shell {
  position: relative;
  z-index: 5;
  margin-top: 16px;
}.matrix, .timeline-shell, .placeholder {
  background: rgba(255,255,255,.24) !important;
  border: 1px solid rgba(255,255,255,.42) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    0 22px 54px rgba(0,0,0,.12) !important;
  backdrop-filter: blur(18px) saturate(122%);
}.section-head {
  background: rgba(255,255,255,.14) !important;
  border-bottom: 1px solid rgba(255,255,255,.32);
}.matrix-row, .timeline-row.equal-row {
  background: rgba(255,255,255,.18) !important;
}.project-card {
  background: rgba(255,255,255,.58) !important;
  border: 1px solid rgba(255,255,255,.40) !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.05) !important;
  backdrop-filter: blur(10px);
}.project-card:hover {
  background: linear-gradient(180deg, rgba(255,255,255,.70), rgba(235,235,235,.54)) !important;
  box-shadow: 0 18px 42px rgba(0,0,0,.08) !important;
}

@media(max-width:1000px) {.intro-spacer {
    height: 52vh;
    min-height: 360px;
  }.topbar {
    margin: 14px 12px 0 !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }.inline-access {
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-start !important;
    margin-left: 0 !important;
  }

  
}/* ===== v51 final override: lowest background layer + 80% cards ===== */

/* Put the painting on the outermost page background layer */

body::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -10;
  pointer-events: none;
  background-image:
    linear-gradient(180deg, rgba(246,246,246,.05), rgba(246,246,246,.14)),
    var(--deep-painting);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% 100%;
}.page::before {
  display: none !important;
}.page {
  background: transparent !important;
}/* Keep the first view mostly painting, before menus appear */
.intro-spacer {
  height: 55vh !important;
  min-height: 460px !important;
  position: relative;
  z-index: 1;
}/* Top menu shell: less transparent, closer to 80% visible */

/* Main menu cards: around 80% opacity */
.matrix, .timeline-shell, .placeholder {
  background: rgba(255,255,255,.80) !important;
  border: 1px solid rgba(255,255,255,.66) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.42),
    0 22px 54px rgba(0,0,0,.11) !important;
  backdrop-filter: blur(10px) saturate(108%);
}.section-head {
  background: rgba(255,255,255,.76) !important;
  border-bottom: 1px solid rgba(230,230,230,.80) !important;
}.matrix-row, .timeline-row.equal-row {
  background: rgba(255,255,255,.74) !important;
}.axis, .phase {
  background: rgba(255,255,255,.72) !important;
}.project-card {
  background: rgba(255,255,255,.88) !important;
  border: 1px solid rgba(226,226,226,.84) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.05) !important;
  backdrop-filter: blur(6px);
}.project-card:hover {
  background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(242,242,242,.90)) !important;
  box-shadow: 0 16px 36px rgba(0,0,0,.08) !important;
}/* Modal also becomes less transparent */
.modal {
  background: rgba(240,240,240,.86) !important;
  border: 1px solid rgba(255,255,255,.72) !important;
  backdrop-filter: blur(12px) saturate(110%);
}.modal-top, .info {
  background: rgba(255,255,255,.80) !important;
}.project-body, .gallery {
  background: rgba(244,244,244,.80) !important;
}

@media(max-width:1000px) {.intro-spacer {
    height: 52vh !important;
    min-height: 360px !important;
  }
}/* ===== v53 hard reset: exact uploaded image as BODY background ===== */
html, body {
  min-height: 100%;
  background-color: #d7d7d7 !important;
}/* turn off all previous pseudo/background layers so only BODY owns the image */
body::before, .page::before {
  display: none !important;
  content: none !important;
}.page {
  position: relative;
  background: transparent !important;
  min-height: 100vh;
  isolation: isolate;
}/* first screen: only show the painting area; menu appears after scrolling */
.intro-spacer {
  height: 56vh !important;
  min-height: 460px !important;
  pointer-events: none;
}.topbar {
  position: sticky !important;
  top: 0;
  z-index: 70 !important;
  margin: 18px 18px 0 !important;
  min-height: 72px;
  padding: 14px 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;
  background: rgba(246,246,246,.80) !important;
  border: 1px solid rgba(255,255,255,.62) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.38),
    0 16px 42px rgba(0,0,0,.10) !important;
  backdrop-filter: blur(12px) saturate(112%);
  opacity: 0;
  transform: translateY(-14px);
  transition: opacity .42s ease, transform .42s ease;
}/* Keep inline Contact / Links in the original place */
.inline-access {
  margin-left: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 16px !important;
  min-width: 0;
}.access-group {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}.access-label {
  color: var(--red) !important;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-right: 2px;
}.access-divider {
  width: 1px;
  height: 24px;
  background: rgba(20,20,20,.16);
  display: block !important;
}.access-link, .access-copy {
  min-height: 34px;
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  padding: 0 2px;
  border: 0;
  background: transparent;
  color: #222 !important;
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 850;
  letter-spacing: -.035em;
  white-space: nowrap;
}.access-copy {
  appearance: none;
}.access-icon {
  width: 26px;
  height: 26px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  color: #222;
}.access-icon svg {
  width: 18px;
  height: 18px;
  display: block;
}.access-link.email .access-icon {
  color: var(--red);
}.access-mark {
  font-size: 16px;
  line-height: 1;
  font-weight: 950;
  letter-spacing: -.04em;
}.naver-mark { color: #18a94b; }.brunch-mark { font-size: 15px; }/* Navigator outside frame */

/* Content cards ~80% visible */
.main-shell {
  position: relative;
  z-index: 5;
  margin-top: 16px;
}.matrix, .timeline-shell, .placeholder {
  background: rgba(255,255,255,.80) !important;
  border: 1px solid rgba(255,255,255,.66) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.42),
    0 22px 54px rgba(0,0,0,.11) !important;
  backdrop-filter: blur(10px) saturate(108%);
}.section-head {
  background: rgba(255,255,255,.76) !important;
  border-bottom: 1px solid rgba(230,230,230,.80) !important;
}.matrix-row, .timeline-row.equal-row, .axis, .phase {
  background: rgba(255,255,255,.74) !important;
}.project-card {
  background: rgba(255,255,255,.88) !important;
  border: 1px solid rgba(226,226,226,.84) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.05) !important;
  backdrop-filter: blur(6px);
}.project-card:hover {
  background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(242,242,242,.90)) !important;
  box-shadow: 0 16px 36px rgba(0,0,0,.08) !important;
}.modal {
  background: rgba(240,240,240,.86) !important;
  border: 1px solid rgba(255,255,255,.72) !important;
  backdrop-filter: blur(12px) saturate(110%);
}.modal-top, .info {
  background: rgba(255,255,255,.80) !important;
}.project-body, .gallery {
  background: rgba(244,244,244,.80) !important;
}

@media(max-width:1000px) {.intro-spacer {
    height: 52vh !important;
    min-height: 360px !important;
  }.topbar {
    margin: 14px 12px 0 !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }.inline-access {
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-start !important;
    margin-left: 0 !important;
  }

  
}/* ===== v57 restore v53 structure + enlarge background about 3x ===== */

/* keep the opening painting-first composition readable */
.intro-spacer {
  height: 56vh !important;
  min-height: 460px !important;
}

/* slightly tune by breakpoint so it doesn't become excessively huge on small screens */
@media (max-width: 1200px) {body {
    background-size: 260% auto !important;
  }
}

@media (max-width: 800px) {body {
    background-size: 220% auto !important;
  }.intro-spacer {
    height: 52vh !important;
    min-height: 360px !important;
  }
}

/* ===== v58 reduce background to ~80% of current scale and raise upward ===== */

@media (max-width: 1200px) {body {
    background-size: 208% auto !important; /* 80% of previous 260% */
    background-position: center -160px !important;
  }
}

@media (max-width: 800px) {body {
    background-size: 176% auto !important; /* 80% of previous 220% */
    background-position: center -120px !important;
  }
}

/* ===== v59 raise background position about 400% upward from previous offset ===== */

@media (max-width: 1200px) {body {
    background-position: center -640px !important;
  }
}

@media (max-width: 800px) {body {
    background-position: center -480px !important;
  }
}

/* ===== v60 raise background position about 600% upward ===== */

@media (max-width: 1200px) {body {
    background-position: center -960px !important;
  }
}

@media (max-width: 800px) {body {
    background-position: center -720px !important;
  }
}

/* ===== v61 raise background additional -3000px upward ===== */

@media (max-width: 1200px) {body {
    background-position: center -3960px !important; /* previous -960px - 3000px */
  }
}

@media (max-width: 800px) {body {
    background-position: center -3720px !important; /* previous -720px - 3000px */
  }
}

/* ===== v62 lower background back down by about 1500px from previous ===== */

@media (max-width: 1200px) {body {
    background-position: center -2460px !important; /* previous -3960px + 1500px */
  }
}

@media (max-width: 800px) {body {
    background-position: center -2220px !important; /* previous -3720px + 1500px */
  }
}

/* ===== v63 reduce background image size to about 50% of current scale ===== */

@media (max-width: 1200px) {body {
    background-size: 104% auto !important; /* 50% of previous 208% */
    background-position: center -2460px !important;
  }
}

@media (max-width: 800px) {body {
    background-size: 88% auto !important;  /* 50% of previous 176% */
    background-position: center -2220px !important;
  }
}

/* ===== v64 lower background by about 2000px from previous ===== */

@media (max-width: 1200px) {body {
    background-size: 104% auto !important;
    background-position: center -460px !important; /* previous -2460px + 2000px */
  }
}

@media (max-width: 800px) {body {
    background-size: 88% auto !important;
    background-position: center -220px !important; /* previous -2220px + 2000px */
  }
}

/* ===== v65 raise background by about 1000px from previous ===== */

@media (max-width: 1200px) {body {
    background-size: 104% auto !important;
    background-position: center -1460px !important; /* previous -460px - 1000px */
  }
}

@media (max-width: 800px) {body {
    background-size: 88% auto !important;
    background-position: center -1220px !important; /* previous -220px - 1000px */
  }
}

/* ===== v66 lower background by about 500px from previous ===== */

@media (max-width: 1200px) {body {
    background-size: 104% auto !important;
    background-position: center -960px !important;  /* previous -1460px + 500px */
  }
}

@media (max-width: 800px) {body {
    background-size: 88% auto !important;
    background-position: center -720px !important;  /* previous -1220px + 500px */
  }
}

/* ===== v67 lower background by about 400px from previous ===== */

@media (max-width: 1200px) {body {
    background-size: 104% auto !important;
    background-position: center -560px !important;  /* previous -960px + 400px */
  }
}

@media (max-width: 800px) {body {
    background-size: 88% auto !important;
    background-position: center -320px !important;  /* previous -720px + 400px */
  }
}/* ===== v68 remove background image entirely ===== */

/* Remove all image-based background layers */
html, body {
  min-height: 100%;
  background: #f4f4f4 !important;
  background-image: none !important;
  background-color: #f4f4f4 !important;
}body {
  position: relative !important;
  overflow-x: hidden;
  background: linear-gradient(180deg, #f7f7f7 0%, #eeeeee 100%) !important;
  background-image: linear-gradient(180deg, #f7f7f7 0%, #eeeeee 100%) !important;
  background-repeat: no-repeat !important;
  background-position: center top !important;
  background-size: auto !important;
}body::before, .page::before, .intro-spacer {
  display: none !important;
  content: none !important;
  background-image: none !important;
}/* Return to a clean page structure */
.page {
  position: relative;
  min-height: 100vh;
  background: transparent !important;
}/* Since the background image is gone, remove the scroll-reveal delay */
.topbar {
  opacity: 1 !important;
  transform: none !important;
}.topbar {
  position: sticky !important;
  top: 0;
  z-index: 70 !important;
  margin: 18px 18px 0 !important;
  background: rgba(255,255,255,.94) !important;
  border: 1px solid rgba(20,20,20,.10) !important;
  box-shadow: 0 12px 32px rgba(0,0,0,.06) !important;
  backdrop-filter: blur(8px);
}/* Bring content up because there is no opening image area anymore */
.main-shell {
  margin-top: 24px !important;
  background: transparent !important;
}/* Clean solid white cards */
.matrix, .timeline-shell, .placeholder {
  background: rgba(255,255,255,.96) !important;
  border: 1px solid rgba(20,20,20,.10) !important;
  box-shadow: 0 20px 50px rgba(0,0,0,.30), 0 6px 18px rgba(0,0,0,.18) !important;
  backdrop-filter: none !important;
}.section-head {
  background: rgba(250,250,250,.98) !important;
  border-bottom: 1px solid rgba(225,225,225,.90) !important;
}.matrix-row, .timeline-row.equal-row, .axis, .phase {
  background: rgba(252,252,252,.98) !important;
}.project-card {
  background: rgba(255,255,255,.98) !important;
  border: 1px solid rgba(226,226,226,.92) !important;
  box-shadow: 0 8px 20px rgba(0,0,0,.04) !important;
}.project-card:hover {
  background: linear-gradient(180deg, rgba(255,255,255,1), rgba(246,246,246,.98)) !important;
  box-shadow: 0 14px 30px rgba(0,0,0,.06) !important;
}.modal {
  background: rgba(247,247,247,.98) !important;
  border: 1px solid rgba(220,220,220,.9) !important;
  backdrop-filter: none !important;
}.modal-top, .info, .project-body, .gallery {
  background: rgba(255,255,255,.98) !important;
}

@media(max-width:1000px) {.topbar {
    margin: 14px 12px 0 !important;
  }.main-shell {
    margin-top: 18px !important;
  }
}/* ===== v69 timeline content updated from revised PPT ===== */
.timeline-row.equal-row {
  min-height: 286px !important;
}.timeline-right.equal-grid {
  gap: 10px !important;
}.year-cell:has(.grid-event:nth-child(3)) .grid-event {
  min-height: 34px !important;
  padding: 4px 5px !important;
}.year-cell:has(.grid-event:nth-child(4)) {
  align-content: center !important;
  gap: 4px !important;
}.year-cell:has(.grid-event:nth-child(4)) .grid-event {
  min-height: 30px !important;
  padding: 3px 5px !important;
}.year-cell:has(.grid-event:nth-child(4)) .grid-event b, .year-cell:has(.grid-event:nth-child(3)) .grid-event b {
  font-size: 9.8px !important;
  line-height: 1.16 !important;
}.grid-event b {
  word-break: keep-all;
}.phase strong em {
  letter-spacing: -.05em;
}/* ===== v73 top contact links: icon only ===== */
.inline-access {
  gap: 18px !important;
}.access-group {
  gap: 8px !important;
}.access-link, .access-copy {
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 !important;
  justify-content: center !important;
  gap: 0 !important;
  border-radius: 0 !important;
}.access-link .access-icon, .access-copy .access-icon {
  width: 34px !important;
  height: 34px !important;
}.access-link:hover, .access-copy:hover {
  background: rgba(0,0,0,.045) !important;
}.access-label {
  margin-right: 4px !important;
}.access-divider {
  margin: 0 2px !important;
}/* hide any leftover plain text label if an old span remains */

/* ===== v74 timeline item corrections and anti-ellipsis labels ===== */
.year-cell .grid-event b {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}.year-cell:has(.grid-event:nth-child(4)) .grid-event {
  min-height: 31px !important;
  padding: 3px 5px !important;
}.year-cell:has(.grid-event:nth-child(4)) .grid-event b {
  font-size: 9.6px !important;
  line-height: 1.14 !important;
}.year-cell:has(.grid-event:nth-child(3)) .grid-event b {
  font-size: 9.8px !important;
}/* ===== v75 static non-portfolio timeline items ===== */

.grid-event.static-event:hover {
  transform: none !important;
  background: rgba(255,255,255,.98) !important;
  box-shadow: 0 8px 20px rgba(0,0,0,.04) !important;
}/* ===== v76 fully disable hover effects for non-portfolio static timeline items ===== */

/* The three non-clickable early-main items should behave like plain labels */
.grid-event.static-event, .grid-event.static-event:hover, .grid-event.static-event:focus, .grid-event.static-event:active {
  cursor: default !important;
  transform: none !important;
  translate: none !important;
  scale: 1 !important;
  background: rgba(255,255,255,.98) !important;
  background-image: none !important;
  box-shadow: 0 8px 20px rgba(0,0,0,.04) !important;
  outline: none !important;
  border-color: rgba(226,226,226,.92) !important;
  color: #555 !important;
}/* Keep the dot gray and unchanged */
.grid-event.static-event .dot, .grid-event.static-event:hover .dot, .grid-event.static-event:focus .dot, .grid-event.static-event:active .dot {
  background: #9a9a9a !important;
  box-shadow: none !important;
  transform: none !important;
}/* Keep text unchanged */
.grid-event.static-event b, .grid-event.static-event:hover b, .grid-event.static-event:focus b, .grid-event.static-event:active b {
  color: #555 !important;
  text-decoration: none !important;
}/* Prevent parent cell / lane hover-highlight from reacting to these static items */
.year-cell:has(.static-event:hover), .lane-cells:has(.static-event:hover), .lane:has(.static-event:hover), .timeline-row:has(.static-event:hover), .timeline-right:has(.static-event:hover) {
  background: inherit !important;
  background-image: none !important;
  box-shadow: inherit !important;
  transform: none !important;
  filter: none !important;
}/* If earlier hover rules used pseudo overlays, suppress them on static-hover cells */
.year-cell:has(.static-event:hover)::before, .year-cell:has(.static-event:hover)::after, .timeline-row:has(.static-event:hover)::before, .timeline-row:has(.static-event:hover)::after {
  opacity: 0 !important;
  display: none !important;
}/* ===== v81 keep static points exactly in original timeline position; remove only interaction ===== */

/* Do not alter geometry. Keep whatever .grid-event normally uses for position. */
.grid-event.static-event, .grid-event.static-event:hover, .grid-event.static-event:focus, .grid-event.static-event:active {
  cursor: default !important;
  pointer-events: none !important;
  transform: none !important;
  translate: none !important;
  scale: 1 !important;
  filter: none !important;
  outline: none !important;
}/* Keep them visually as plain gray resting timeline points. No hover change. */
.grid-event.static-event .dot, .grid-event.static-event:hover .dot, .grid-event.static-event:focus .dot, .grid-event.static-event:active .dot {
  background: #9b9b9b !important;
  box-shadow: none !important;
  transform: none !important;
  filter: none !important;
}.grid-event.static-event b, .grid-event.static-event:hover b, .grid-event.static-event:focus b, .grid-event.static-event:active b {
  color: #303030 !important;
  text-decoration: none !important;
}/* Neutralize only hover visuals. Do not touch size, margin, top, display, flex, or rail geometry. */
.grid-event.static-event:hover {
  background: inherit !important;
  background-image: inherit !important;
  border-color: inherit !important;
  box-shadow: inherit !important;
}/* Make sure parent/background effects are not triggered by these three non-portfolio points */
.year-cell:has(.grid-event.static-event:hover)::before, .year-cell:has(.grid-event.static-event:hover)::after, .timeline-row:has(.grid-event.static-event:hover)::before, .timeline-row:has(.grid-event.static-event:hover)::after {
  display: none !important;
  opacity: 0 !important;
}/* ===== v82 cancel added static early timeline points ===== */

/* ===== v83 timeline skillset tag filter ===== */
.timeline-skill-filter {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 26px 14px;
  border-bottom: 1px solid rgba(220,220,220,.9);
  background: rgba(250,250,250,.96);
}.skill-filter-label {
  margin-right: 4px;
  color: var(--red);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .14em;
  text-transform: uppercase;
}.skill-filter-btn {
  height: 32px;
  padding: 0 12px;
  border: 1px solid rgba(20,20,20,.14);
  background: rgba(255,255,255,.98);
  color: #222;
  font-family: inherit;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: -.025em;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease;
}.skill-filter-btn:hover, .skill-filter-btn.active {
  color: var(--red);
  border-color: var(--red);
  background: transparent;
  box-shadow: inset 0 -2px 0 var(--red);
}

@media(max-width:900px) {.timeline-skill-filter {
    justify-content: flex-start;
    flex-wrap: wrap;
    padding: 12px 18px;
  }

  
}/* ===== v84 skillset hover filter revised ===== */

/* Place skillset controls inside timeline box, top-left above S3 */
.timeline-skill-filter {
  display: grid !important;
  grid-template-columns: 86px repeat(4, 172px) !important;
  align-items: center !important;
  justify-content: start !important;
  gap: 8px !important;
  padding: 12px 26px 12px !important;
  border-bottom: 1px solid rgba(220,220,220,.9) !important;
  background: rgba(250,250,250,.96) !important;
}.skill-filter-label {
  margin-right: 0 !important;
  color: var(--red) !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
}.skill-filter-btn {
  width: 172px !important;
  height: 34px !important;
  padding: 0 10px !important;
  border: 1px solid rgba(20,20,20,.14) !important;
  background: rgba(255,255,255,.98) !important;
  color: #222 !important;
  font-family: inherit !important;
  font-size: 10.6px !important;
  font-weight: 900 !important;
  letter-spacing: -.035em !important;
  cursor: default !important;
  text-align: center !important;
  transition: background .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease !important;
}.skill-filter-btn:hover, .skill-filter-btn.active {
  color: var(--red) !important;
  border-color: var(--red) !important;
  background: #fff !important;
  box-shadow: inset 0 -2px 0 var(--red) !important;
}/* Skill hover should behave like project hover expansion, but only while mouse is on filter */

.tag.skill-tag {
  color: var(--red) !important;
  border-color: rgba(175,0,0,.45) !important;
  background: rgba(175,0,0,.045) !important;
}

@media(max-width:1100px) {.timeline-skill-filter {
    grid-template-columns: 86px repeat(2, 172px) !important;
    row-gap: 8px !important;
  }
}

@media(max-width:760px) {.timeline-skill-filter {
    grid-template-columns: 1fr !important;
    padding: 12px 18px !important;
  }.skill-filter-btn {
    width: 100% !important;
  }
}/* ===== v85 skillset hover + click-lock, positioned over timeline area ===== */

/* Move skillset controls to the timeline side, starting after the S-label column divider */
.timeline-skill-filter {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  align-items: center !important;
  justify-content: stretch !important;
  gap: 8px !important;

  /* left edge aligned near the dotted divider between S column and timeline */
  margin-left: 224px !important;
  margin-right: 26px !important;
  padding: 12px 0 10px !important;

  border-top: 0 !important;
  border-bottom: 0 !important;
  background: transparent !important;
}/* Remove the separate Skillset text label so the buttons sit cleanly above the timeline */
.timeline-skill-filter .skill-filter-label {
  display: none !important;
}/* Equal-width skillset buttons */
.skill-filter-btn, .skill-filter-btn.wide {
  width: 100% !important;
  min-width: 0 !important;
  height: 34px !important;
  padding: 0 10px !important;
  border: 1px solid rgba(20,20,20,.14) !important;
  background: rgba(255,255,255,.98) !important;
  color: #222 !important;
  text-align: center !important;
  white-space: nowrap !important;
  cursor: pointer !important;
}/* Hover = temporary activation, locked = clicked activation */
.skill-filter-btn:hover, .skill-filter-btn.active {
  color: var(--red) !important;
  border-color: var(--red) !important;
  background: #fff !important;
  box-shadow: inset 0 -2px 0 var(--red) !important;
}/* Keep matched projects expanded while locked, so user can move to project and open modal */
.grid-event.skill-match .dot {
  transform: scale(1.16) !important;
  box-shadow: 0 0 0 5px #ffffff, 0 0 0 8px var(--red) !important;
}.grid-event.skill-match b {
  color: #111 !important;
  font-weight: 950 !important;
}body.skill-filtering .timeline-screen .grid-event.js-open-project:not(.skill-match) {
  opacity: .42;
}body.skill-filtering .timeline-screen .grid-event.js-open-project.skill-match {
  opacity: 1;
}/* Timeline staged reveal: years stay visible, project points appear after S1/S2/S3 is selected. */
.timeline-staged .phase {
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease;
}.timeline-staged .phase:hover, .timeline-staged .phase:focus-visible, .timeline-staged .timeline-row.is-revealing .phase, .timeline-staged .timeline-row.is-revealed-row .phase {
  background: rgba(175,0,0,.045);
}.timeline-staged .phase strong {
  transition: color .18s ease, transform .18s ease;
}.timeline-staged .phase:hover strong, .timeline-staged .phase:focus-visible strong, .timeline-staged .timeline-row.is-revealing .phase strong, .timeline-staged .timeline-row.is-revealed-row .phase strong {
  color: var(--red);
  transform: translateX(2px);
}.timeline-staged .phase small::after {
  content: none;
  display: none;
}.timeline-staged .grid-event.js-open-project {
  opacity: 0 !important;
  visibility: hidden;
  pointer-events: none;
  filter: blur(2px);
  transition: opacity .42s ease, filter .42s ease;
}.timeline-staged .grid-event.js-open-project.is-revealed {
  opacity: 1 !important;
  visibility: visible;
  pointer-events: auto;
  filter: none;
}body.skill-filtering .timeline-staged .grid-event.js-open-project:not(.is-revealed) {
  opacity: 0 !important;
}/* Delete any remaining artificial line above skillset */
.timeline-skill-filter::before, .timeline-skill-filter::after {
  display: none !important;
  opacity: 0 !important;
  content: none !important;
}

@media(max-width:1100px) {.timeline-skill-filter {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    margin-left: 190px !important;
    margin-right: 20px !important;
  }
}

@media(max-width:760px) {.timeline-skill-filter {
    grid-template-columns: 1fr !important;
    margin-left: 18px !important;
    margin-right: 18px !important;
  }
}/* ===== v86 compact right-shifted skillset buttons ===== */

/* Move skillset buttons a bit further right and reduce total width */
.timeline-skill-filter {
  display: grid !important;
  grid-template-columns: repeat(4, 132px) !important;
  justify-content: start !important;
  align-items: center !important;
  gap: 8px !important;

  margin-left: 300px !important;
  margin-right: 26px !important;
  padding: 10px 0 9px !important;

  border-top: 0 !important;
  border-bottom: 0 !important;
  background: transparent !important;
}/* Label remains hidden */
.timeline-skill-filter .skill-filter-label {
  display: none !important;
}/* Equal-sized compact boxes */
.skill-filter-btn, .skill-filter-btn.wide {
  width: 132px !important;
  min-width: 132px !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 8px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  border: 1px solid rgba(20,20,20,.075) !important;
  background: rgba(255,255,255,.72) !important;
  color: #2b2b2b !important;

  font-family: inherit !important;
  font-size: 10.2px !important;
  font-weight: 900 !important;
  line-height: 1.08 !important;
  letter-spacing: -.035em !important;
  text-align: center !important;
  white-space: normal !important;
  cursor: pointer !important;

  box-shadow: none !important;
}/* Only on hover/active/locked should the button outline become visible */
.skill-filter-btn:hover, .skill-filter-btn.active {
  color: var(--red) !important;
  border-color: rgba(175,0,0,.82) !important;
  background: #fff !important;
  box-shadow: inset 0 -2px 0 var(--red) !important;
}

@media(max-width:1100px) {.timeline-skill-filter {
    grid-template-columns: repeat(4, 120px) !important;
    margin-left: 250px !important;
    gap: 7px !important;
  }.skill-filter-btn, .skill-filter-btn.wide {
    width: 120px !important;
    min-width: 120px !important;
    font-size: 9.8px !important;
  }
}

@media(max-width:760px) {.timeline-skill-filter {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    margin-left: 18px !important;
    margin-right: 18px !important;
  }.skill-filter-btn, .skill-filter-btn.wide {
    width: 100% !important;
    min-width: 0 !important;
  }
}/* ===== v87 thin top-aligned skillset tags ===== */

/* Keep the current color/position mood, but make the tag group thinner and closer to the upper line */
.timeline-skill-filter {
  grid-template-columns: 118px 118px 118px 228px !important;
  gap: 7px !important;

  margin-left: 300px !important;
  margin-right: 26px !important;

  padding: 4px 0 7px !important;
  transform: translateY(-2px) !important;

  border-top: 0 !important;
  border-bottom: 0 !important;
  background: transparent !important;
}/* Compact thin tag boxes */
.skill-filter-btn, .skill-filter-btn.wide {
  height: 26px !important;
  min-height: 26px !important;
  width: 118px !important;
  min-width: 118px !important;
  padding: 0 8px !important;

  border: 1px solid rgba(20,20,20,.065) !important;
  background: rgba(255,255,255,.72) !important;
  color: #333 !important;

  font-size: 9.2px !important;
  font-weight: 650 !important;
  line-height: 1 !important;
  letter-spacing: .005em !important;
  white-space: nowrap !important;

  box-shadow: none !important;
}/* Only Communication & Negotiation needs the wider box */
.skill-filter-btn[data-skill="communication-negotiation"] {
  width: 228px !important;
  min-width: 228px !important;
  font-size: 9px !important;
  letter-spacing: -.015em !important;
}/* Keep hover/locked states visible but still thin */
.skill-filter-btn:hover, .skill-filter-btn.active {
  color: var(--red) !important;
  border-color: rgba(175,0,0,.72) !important;
  background: #fff !important;
  box-shadow: inset 0 -1px 0 var(--red) !important;
}

@media(max-width:1100px) {.timeline-skill-filter {
    grid-template-columns: 108px 108px 108px 204px !important;
    margin-left: 250px !important;
    gap: 6px !important;
  }.skill-filter-btn, .skill-filter-btn.wide {
    width: 108px !important;
    min-width: 108px !important;
    font-size: 8.8px !important;
  }.skill-filter-btn[data-skill="communication-negotiation"] {
    width: 204px !important;
    min-width: 204px !important;
    font-size: 8.6px !important;
  }
}

@media(max-width:760px) {.timeline-skill-filter {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    margin-left: 18px !important;
    margin-right: 18px !important;
    transform: none !important;
  }.skill-filter-btn, .skill-filter-btn.wide, .skill-filter-btn[data-skill="communication-negotiation"] {
    width: 100% !important;
    min-width: 0 !important;
  }
}/* ===== v88 equal-width thin skillset tags ===== */

/* Four skillset tags must have exactly the same width */
.timeline-skill-filter {
  grid-template-columns: repeat(4, 154px) !important;
  gap: 7px !important;

  margin-left: 300px !important;
  margin-right: 26px !important;

  padding: 4px 0 7px !important;
  transform: translateY(-2px) !important;

  border-top: 0 !important;
  border-bottom: 0 !important;
  background: transparent !important;
}/* Equal thin tag boxes */
.skill-filter-btn, .skill-filter-btn.wide, .skill-filter-btn[data-skill="communication-negotiation"] {
  width: 154px !important;
  min-width: 154px !important;
  max-width: 154px !important;

  height: 26px !important;
  min-height: 26px !important;
  padding: 0 6px !important;

  border: 1px solid rgba(20,20,20,.065) !important;
  background: rgba(255,255,255,.72) !important;
  color: #333 !important;

  font-size: 8.6px !important;
  font-weight: 620 !important;
  line-height: 1 !important;
  letter-spacing: -.025em !important;
  white-space: nowrap !important;
  text-align: center !important;

  box-shadow: none !important;
}/* Keep hover/locked thin but visible */
.skill-filter-btn:hover, .skill-filter-btn.active {
  color: var(--red) !important;
  border-color: rgba(175,0,0,.72) !important;
  background: #fff !important;
  box-shadow: inset 0 -1px 0 var(--red) !important;
}

@media(max-width:1100px) {.timeline-skill-filter {
    grid-template-columns: repeat(4, 136px) !important;
    margin-left: 250px !important;
    gap: 6px !important;
  }.skill-filter-btn, .skill-filter-btn.wide, .skill-filter-btn[data-skill="communication-negotiation"] {
    width: 136px !important;
    min-width: 136px !important;
    max-width: 136px !important;
    font-size: 8.1px !important;
  }
}

@media(max-width:760px) {.timeline-skill-filter {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    margin-left: 18px !important;
    margin-right: 18px !important;
    transform: none !important;
  }.skill-filter-btn, .skill-filter-btn.wide, .skill-filter-btn[data-skill="communication-negotiation"] {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }
}/* ===== v89 subtle-border narrow skillset tags ===== */

/* Keep height, but reduce total width so the group sits within the 2024/2025 boundary area */
.timeline-skill-filter {
  grid-template-columns: repeat(4, 104px) !important;
  gap: 6px !important;

  /* keep the right-shifted placement, but shorten total group width */
  margin-left: 300px !important;
  margin-right: 26px !important;

  padding: 4px 0 7px !important;
  transform: translateY(-2px) !important;

  border-top: 0 !important;
  border-bottom: 0 !important;
  background: transparent !important;
}/* Equal width, same thin height, almost invisible outline */
.skill-filter-btn, .skill-filter-btn.wide, .skill-filter-btn[data-skill="communication-negotiation"] {
  width: 104px !important;
  min-width: 104px !important;
  max-width: 104px !important;

  height: 26px !important;
  min-height: 26px !important;
  padding: 0 4px !important;

  border: 1px solid rgba(20,20,20,.028) !important;
  background: rgba(255,255,255,.70) !important;
  color: #333 !important;

  font-size: 7.4px !important;
  font-weight: 560 !important;
  line-height: 1 !important;
  letter-spacing: -.045em !important;
  white-space: nowrap !important;
  text-align: center !important;

  box-shadow: none !important;
}/* Make the long label fit inside the same-width box */
.skill-filter-btn[data-skill="communication-negotiation"] {
  font-size: 6.9px !important;
  letter-spacing: -.06em !important;
}/* On hover/lock only, the border becomes visible */
.skill-filter-btn:hover, .skill-filter-btn.active {
  color: var(--red) !important;
  border-color: rgba(175,0,0,.72) !important;
  background: #fff !important;
  box-shadow: inset 0 -1px 0 var(--red) !important;
}

@media(max-width:1100px) {.timeline-skill-filter {
    grid-template-columns: repeat(4, 96px) !important;
    margin-left: 250px !important;
    gap: 5px !important;
  }.skill-filter-btn, .skill-filter-btn.wide, .skill-filter-btn[data-skill="communication-negotiation"] {
    width: 96px !important;
    min-width: 96px !important;
    max-width: 96px !important;
    font-size: 7px !important;
  }.skill-filter-btn[data-skill="communication-negotiation"] {
    font-size: 6.5px !important;
  }
}

@media(max-width:760px) {.timeline-skill-filter {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    margin-left: 18px !important;
    margin-right: 18px !important;
    transform: none !important;
  }.skill-filter-btn, .skill-filter-btn.wide, .skill-filter-btn[data-skill="communication-negotiation"] {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    font-size: 8px !important;
  }
}/* ===== v90 gray regular skillset tags ===== */

/* Keep current placement/width/height, adjust typography and color only */
.skill-filter-btn, .skill-filter-btn.wide, .skill-filter-btn[data-skill="communication-negotiation"] {
  color: #626262 !important;
  font-size: 9.4px !important;       /* +2px from previous base */
  font-weight: 400 !important;       /* bold off */
  letter-spacing: -.035em !important;
}/* Long label also +2px, but kept slightly tighter to fit */
.skill-filter-btn[data-skill="communication-negotiation"] {
  font-size: 8.9px !important;
  font-weight: 400 !important;
  letter-spacing: -.055em !important;
}/* Hover/active also grayscale, not red */
.skill-filter-btn:hover, .skill-filter-btn.active {
  color: #2f2f2f !important;
  border-color: rgba(70,70,70,.42) !important;
  background: #fff !important;
  box-shadow: inset 0 -1px 0 rgba(70,70,70,.42) !important;
  font-weight: 400 !important;
}

/* Locked state: gray tone instead of red */

@media(max-width:1100px) {.skill-filter-btn, .skill-filter-btn.wide, .skill-filter-btn[data-skill="communication-negotiation"] {
    font-size: 9px !important;
    font-weight: 400 !important;
  }.skill-filter-btn[data-skill="communication-negotiation"] {
    font-size: 8.5px !important;
  }
}

@media(max-width:760px) {.skill-filter-btn, .skill-filter-btn.wide, .skill-filter-btn[data-skill="communication-negotiation"] {
    font-size: 9.2px !important;
    font-weight: 400 !important;
  }
}/* ===== v91 wider light-gray skillset tags ===== */

/* Widen equal boxes so Communication & Negotiation fits, while keeping the group around the 2025 timeline area. */
.timeline-skill-filter {
  grid-template-columns: repeat(4, 132px) !important;
  gap: 7px !important;

  margin-left: 300px !important;
  margin-right: 26px !important;

  padding: 4px 0 7px !important;
  transform: translateY(-2px) !important;

  border-top: 0 !important;
  border-bottom: 0 !important;
  background: transparent !important;
}/* Same width, same height, softer outline, lighter type */
.skill-filter-btn, .skill-filter-btn.wide, .skill-filter-btn[data-skill="communication-negotiation"] {
  width: 132px !important;
  min-width: 132px !important;
  max-width: 132px !important;

  height: 26px !important;
  min-height: 26px !important;
  padding: 0 6px !important;

  border: 1px solid rgba(20,20,20,.022) !important;
  background: rgba(255,255,255,.68) !important;
  color: #8a8a8a !important;

  font-size: 8.4px !important;
  font-weight: 300 !important;
  line-height: 1 !important;
  letter-spacing: -.055em !important;
  white-space: nowrap !important;
  text-align: center !important;

  box-shadow: none !important;
  overflow: hidden !important;
}/* Long label: same box width, slightly tighter typography only */
.skill-filter-btn[data-skill="communication-negotiation"] {
  font-size: 7.9px !important;
  font-weight: 300 !important;
  letter-spacing: -.078em !important;
}/* Hover/active: grayscale only, still light */
.skill-filter-btn:hover, .skill-filter-btn.active {
  color: #555 !important;
  border-color: rgba(80,80,80,.32) !important;
  background: #fff !important;
  box-shadow: inset 0 -1px 0 rgba(80,80,80,.34) !important;
  font-weight: 300 !important;
}

/* Locked state: gray, not red, and not bold */

@media(max-width:1100px) {.timeline-skill-filter {
    grid-template-columns: repeat(4, 120px) !important;
    margin-left: 250px !important;
    gap: 6px !important;
  }.skill-filter-btn, .skill-filter-btn.wide, .skill-filter-btn[data-skill="communication-negotiation"] {
    width: 120px !important;
    min-width: 120px !important;
    max-width: 120px !important;
    font-size: 8px !important;
    font-weight: 300 !important;
  }.skill-filter-btn[data-skill="communication-negotiation"] {
    font-size: 7.4px !important;
  }
}

@media(max-width:760px) {.timeline-skill-filter {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    margin-left: 18px !important;
    margin-right: 18px !important;
    transform: none !important;
  }.skill-filter-btn, .skill-filter-btn.wide, .skill-filter-btn[data-skill="communication-negotiation"] {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    font-size: 8.6px !important;
    font-weight: 300 !important;
  }
}/* ===== v92 skillset tags aligned to S3 2024/2025 year columns ===== */

/*
  Align skillset tags to the real timeline grid:
  238px = S phase column
  26px  = timeline-right left padding
  82px  = lane label + gap
  repeat(6) = 2024/2025/2026 split into two half-year slots each
  26px  = timeline-right right padding
*/
.timeline-skill-filter {
  display: grid !important;
  grid-template-columns: 238px 26px 82px repeat(6, minmax(0, 1fr)) 26px !important;
  align-items: center !important;
  justify-content: stretch !important;
  column-gap: 0 !important;
  row-gap: 0 !important;

  width: 100% !important;
  margin: 0 !important;
  padding: 4px 0 7px !important;
  transform: translateY(-2px) !important;

  border-top: 0 !important;
  border-bottom: 0 !important;
  background: transparent !important;
}.timeline-skill-filter .skill-filter-label {
  display: none !important;
}/* Place two tags over 2024, two tags over 2025 */
.skill-filter-btn[data-skill="plan"] {
  grid-column: 4 !important;
}.skill-filter-btn[data-skill="strategy"] {
  grid-column: 5 !important;
}.skill-filter-btn[data-skill="operation"] {
  grid-column: 6 !important;
}.skill-filter-btn[data-skill="communication-negotiation"] {
  grid-column: 7 !important;
}/* All four boxes use the exact same half-year width */
.skill-filter-btn, .skill-filter-btn.wide, .skill-filter-btn[data-skill="communication-negotiation"] {
  width: calc(100% - 6px) !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 26px !important;
  min-height: 26px !important;
  margin: 0 3px !important;
  padding: 0 5px !important;

  border: 1px solid rgba(20,20,20,.022) !important;
  background: rgba(255,255,255,.68) !important;
  color: #8a8a8a !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  font-size: 8.2px !important;
  font-weight: 300 !important;
  line-height: 1 !important;
  letter-spacing: -.055em !important;
  white-space: nowrap !important;
  text-align: center !important;

  box-shadow: none !important;
  overflow: hidden !important;
}/* Long label stays in the same-width slot */
.skill-filter-btn[data-skill="communication-negotiation"] {
  font-size: 7.35px !important;
  font-weight: 300 !important;
  letter-spacing: -.085em !important;
}/* Hover/active remains grayscale */
.skill-filter-btn:hover, .skill-filter-btn.active {
  color: #555 !important;
  border-color: rgba(80,80,80,.32) !important;
  background: #fff !important;
  box-shadow: inset 0 -1px 0 rgba(80,80,80,.34) !important;
  font-weight: 300 !important;
}

@media(max-width:1100px) {.timeline-skill-filter {
    grid-template-columns: 238px 26px 82px repeat(6, minmax(0, 1fr)) 26px !important;
  }.skill-filter-btn, .skill-filter-btn.wide, .skill-filter-btn[data-skill="communication-negotiation"] {
    font-size: 7.7px !important;
  }.skill-filter-btn[data-skill="communication-negotiation"] {
    font-size: 6.8px !important;
  }
}

@media(max-width:760px) {.timeline-skill-filter {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    padding: 6px 18px 8px !important;
    transform: none !important;
    column-gap: 6px !important;
    row-gap: 6px !important;
  }.skill-filter-btn[data-skill="plan"], .skill-filter-btn[data-skill="strategy"], .skill-filter-btn[data-skill="operation"], .skill-filter-btn[data-skill="communication-negotiation"] {
    grid-column: auto !important;
  }.skill-filter-btn, .skill-filter-btn.wide, .skill-filter-btn[data-skill="communication-negotiation"] {
    width: 100% !important;
    margin: 0 !important;
    font-size: 8.4px !important;
  }
}/* ===== v93 skillset tags aligned to S3 2025/2026 year columns ===== */

/*
  Right-align skillset tags:
  Plan / Strategy over 2025
  Operation / Communication & Negotiation over 2026
*/
.skill-filter-btn[data-skill="plan"] {
  grid-column: 6 !important;
}.skill-filter-btn[data-skill="strategy"] {
  grid-column: 7 !important;
}.skill-filter-btn[data-skill="operation"] {
  grid-column: 8 !important;
}.skill-filter-btn[data-skill="communication-negotiation"] {
  grid-column: 9 !important;
}/* ===== v94 skillset tags span full 2024-2026 timeline width ===== */

/*
  Let the four skillset tags fill the full S3 timeline width, from the 2024 column through the 2026 column, centered across the year area.
*/
.timeline-skill-filter {
  display: grid !important;
  grid-template-columns: 238px 26px 82px repeat(4, minmax(0, 1fr)) 26px !important;
  align-items: center !important;
  justify-content: stretch !important;
  column-gap: 8px !important;
  row-gap: 0 !important;

  width: 100% !important;
  margin: 0 !important;
  padding: 4px 26px 7px 0 !important;
  transform: translateY(-2px) !important;

  border-top: 0 !important;
  border-bottom: 0 !important;
  background: transparent !important;
}.timeline-skill-filter .skill-filter-label {
  display: none !important;
}/* Four tags stretched evenly across the whole 2024-2026 year area */
.skill-filter-btn[data-skill="plan"] {
  grid-column: 4 !important;
}.skill-filter-btn[data-skill="strategy"] {
  grid-column: 5 !important;
}.skill-filter-btn[data-skill="operation"] {
  grid-column: 6 !important;
}.skill-filter-btn[data-skill="communication-negotiation"] {
  grid-column: 7 !important;
}/* Wide equal boxes, same thin height */
.skill-filter-btn, .skill-filter-btn.wide, .skill-filter-btn[data-skill="communication-negotiation"] {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;

  height: 26px !important;
  min-height: 26px !important;
  margin: 0 !important;
  padding: 0 8px !important;

  border: 1px solid rgba(20,20,20,.02) !important;
  background: rgba(255,255,255,.66) !important;
  color: #9a9a9a !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  font-size: 8.9px !important;
  font-weight: 100 !important;
  line-height: 1 !important;
  letter-spacing: -.035em !important;
  white-space: nowrap !important;
  text-align: center !important;

  box-shadow: none !important;
  overflow: hidden !important;
}/* Long label now has enough room; keep it light, not bold */
.skill-filter-btn[data-skill="communication-negotiation"] {
  font-size: 8.4px !important;
  font-weight: 100 !important;
  letter-spacing: -.055em !important;
}/* Hover/active is still grayscale and thin */
.skill-filter-btn:hover, .skill-filter-btn.active {
  color: #5f5f5f !important;
  border-color: rgba(80,80,80,.28) !important;
  background: #fff !important;
  box-shadow: inset 0 -1px 0 rgba(80,80,80,.28) !important;
  font-weight: 100 !important;
}/* Locked state also avoids bold */
.skill-filter-btn.locked {
  color: #fff !important;
  border-color: #808080 !important;
  background: #858585 !important;
  box-shadow: none !important;
  font-weight: 100 !important;
}

@media(max-width:1100px) {.timeline-skill-filter {
    grid-template-columns: 238px 26px 82px repeat(4, minmax(0, 1fr)) 26px !important;
    column-gap: 6px !important;
  }.skill-filter-btn, .skill-filter-btn.wide, .skill-filter-btn[data-skill="communication-negotiation"] {
    font-size: 8.2px !important;
    font-weight: 100 !important;
  }.skill-filter-btn[data-skill="communication-negotiation"] {
    font-size: 7.7px !important;
  }
}

@media(max-width:760px) {.timeline-skill-filter {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    padding: 6px 18px 8px !important;
    transform: none !important;
    column-gap: 6px !important;
    row-gap: 6px !important;
  }.skill-filter-btn[data-skill="plan"], .skill-filter-btn[data-skill="strategy"], .skill-filter-btn[data-skill="operation"], .skill-filter-btn[data-skill="communication-negotiation"] {
    grid-column: auto !important;
  }.skill-filter-btn, .skill-filter-btn.wide, .skill-filter-btn[data-skill="communication-negotiation"] {
    width: 100% !important;
    font-size: 8.4px !important;
    font-weight: 100 !important;
  }
}/* ===== v95 dotted boundary under skillset tags ===== */

/* Give the skillset area its own local coordinate system */
.timeline-skill-filter {
  position: relative !important;
}/* Thin dotted boundary under the skillset buttons.
   It starts after the S3 phase area, around the Main job label, and stops before the timeline right padding. */
.timeline-skill-filter::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;

  left: calc(238px + 26px) !important;
  right: 26px !important;
  bottom: 1px !important;

  height: 0 !important;
  border-bottom: 1px dotted rgba(40,40,40,.18) !important;
  opacity: 1 !important;
  pointer-events: none !important;
}/* Make sure no line crosses into the S3 label column */
.timeline-skill-filter::before {
  display: none !important;
  content: none !important;
}

@media(max-width:760px) {.timeline-skill-filter::after {
    left: 18px !important;
    right: 18px !important;
  }
}/* ===== v96 project board below timeline ===== */
.project-board {
  margin-top: 22px;
  border: 1px solid rgba(20,20,20,.08);
  background: rgba(247,247,247,.96);
  overflow: hidden;
}.project-board-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  padding: 24px 26px 18px;
  border-bottom: 1px dotted rgba(40,40,40,.22);
}.project-board-head h2 {
  margin: 0 0 6px;
  font-size: clamp(22px, 3vw, 34px);
  letter-spacing: -.075em;
  font-weight: 900;
  color: #151515;
}.project-board-head p {
  margin: 0;
  max-width: 620px;
  color: #777;
  font-size: 12px;
  line-height: 1.65;
  letter-spacing: -.035em;
}.project-board-grid {
  display: grid;
  grid-template-columns: .95fr 1.2fr 1.05fr;
  min-height: 380px;
}.board-card {
  position: relative;
  min-height: 380px;
  border-right: 1px solid rgba(20,20,20,.06);
  background: rgba(255,255,255,.72);
}.board-card:last-child {
  border-right: 0;
}.board-card-top {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 58px;
  padding: 0 22px;
  border-bottom: 1px solid rgba(20,20,20,.055);
}.board-card-top h3 {
  margin: 0;
  color: #252525;
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -.055em;
}.board-content {
  position: relative;
  padding: 22px;
}.recent-content h4 {
  margin: 0 0 12px;
  color: transparent;
  font-size: 25px;
  line-height: 1.08;
  letter-spacing: -.08em;
  font-weight: 800;
}.recent-content h4 em {
  color: #777;
  font-style: normal;
  font-weight: 300;
}.recent-content p {
  margin: 0 0 18px;
  color: #666;
  font-size: 12px;
  line-height: 1.68;
  letter-spacing: -.035em;
}.recent-meta {
  display: grid;
  gap: 8px;
  margin: 0 0 22px;
}.recent-meta div {
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 8px;
  padding: 8px 0;
  border-top: 1px dotted rgba(40,40,40,.16);
}.recent-meta dt {
  color: #aaa;
  font-size: 10px;
  font-weight: 400;
}.recent-meta dd {
  margin: 0;
  color: #4f4f4f;
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: -.025em;
}.board-open, .memo-submit {
  height: 34px;
  border: 1px solid rgba(20,20,20,.08);
  background: rgba(255,255,255,.88);
  color: #555;
  padding: 0 14px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: -.02em;
  cursor: pointer;
  transition: .16s ease;
}.board-open:hover, .memo-submit:hover {
  border-color: rgba(90,90,90,.38);
  background: #fff;
  color: #222;
  box-shadow: inset 0 -1px 0 rgba(80,80,80,.32);
}.review-flow {
  position: relative;
  display: grid;
  gap: 0;
  padding-left: 2px;
}.review-step {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 18px;
  min-height: 72px;
  padding: 0 0 16px;
  position: relative;
}.review-step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 45px;
  top: 20px;
  bottom: -4px;
  border-left: 1px dotted rgba(40,40,40,.22);
}.step-head {
  position: relative;
  padding-top: 2px;
  color: #777;
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: -.035em;
  text-align: center;
}.step-head::before {
  content: "";
  display: block;
  width: 9px;
  height: 9px;
  margin: 0 auto 9px;
  border-radius: 50%;
  background: #8c8c8c;
  box-shadow: 0 0 0 4px #fff;
}.step-body {
  padding: 0 0 16px;
  border-bottom: 1px dotted rgba(40,40,40,.15);
}.step-body strong {
  display: block;
  margin: 0 0 7px;
  color: #242424;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: -.055em;
}.step-body p {
  margin: 0;
  color: #777;
  font-size: 11.5px;
  line-height: 1.55;
  letter-spacing: -.035em;
}.review-step.muted .step-head::before {
  background: #c9c9c9;
}.review-step.muted .step-body strong, .review-step.muted .step-body p {
  color: #aaa;
}.memo-content {
  min-height: 322px;
}.memo-guide {
  position: absolute;
  inset: 20px 20px auto 20px;
  height: 88px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  pointer-events: none;
  color: rgba(0,0,0,.035);
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -.08em;
  line-height: 1;
}.memo-form {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 10px;
}.memo-form label {
  display: grid;
  gap: 5px;
}.memo-form label span {
  color: #8c8c8c;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .08em;
}.memo-form input, .memo-form textarea {
  width: 100%;
  border: 1px solid rgba(20,20,20,.065);
  background: rgba(255,255,255,.78);
  color: rgba(255,255,255,.76);
  font-family: inherit;
  font-size: 12px;
  font-weight: 300;
  letter-spacing: -.025em;
  outline: none;
  padding: 9px 10px;
}.memo-form input:focus, .memo-form textarea:focus {
  border-color: rgba(80,80,80,.32);
  background: #fff;
}.memo-form textarea {
  min-height: 104px;
  resize: vertical;
  line-height: 1.55;
}.privacy-note {
  margin: 2px 0 0;
  color: #999;
  font-size: 9.7px;
  line-height: 1.55;
  letter-spacing: -.035em;
}.memo-submit {
  justify-self: start;
  margin-top: 2px;
}

@media(max-width:1020px) {.project-board-grid {
    grid-template-columns: 1fr;
  }.board-card {
    border-right: 0;
    border-bottom: 1px solid rgba(20,20,20,.06);
  }.board-card:last-child {
    border-bottom: 0;
  }
}

@media(max-width:680px) {.project-board-head {
    display: block;
    padding: 20px 18px 16px;
  }.board-content, .board-card-top {
    padding-left: 18px;
    padding-right: 18px;
  }.review-step {
    grid-template-columns: 80px 1fr;
    gap: 12px;
  }.review-step:not(:last-child)::after {
    left: 39px;
  }
}/* ===== v98 new abstract background only ===== */
body {
  position: relative !important;
  isolation: isolate !important;
  overflow-x: hidden !important;
  background-color: #949494 !important;
  background-image: none !important;
  background-repeat: no-repeat !important;
  background-position: center top !important;
  background-size: 170% auto !important;
  background-attachment: scroll !important;
}/* very light veil only for readability, not a gray repaint */
body::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: clamp(760px, 106vw, 1420px) !important;
  z-index: 0 !important;
  background-image: var(--bg-image) !important;
  background-repeat: no-repeat !important;
  background-position: center top !important;
  background-size: 170% auto !important;
  opacity: .96 !important;
  -webkit-mask-image: linear-gradient(
    180deg,
    #000 0%,
    #000 58%,
    rgba(0,0,0,.68) 76%,
    rgba(0,0,0,.20) 91%,
    transparent 100%
  ) !important;
  mask-image: linear-gradient(
    180deg,
    #000 0%,
    #000 58%,
    rgba(0,0,0,.68) 76%,
    rgba(0,0,0,.20) 91%,
    transparent 100%
  ) !important;
  pointer-events: none !important;
}/* Keep page content above the background */
.page {
  position: relative !important;
  z-index: 1 !important;
}.guide, .matrix, .timeline-shell, .project-board, .section-head, .project-board-head, .hero, .topbar, .board-card, .project-card {
  backdrop-filter: none !important;
}/* ===== v99 corrected topbar navigator ===== */

/* Keep the original Contact / Links icon block, only stack a text navigator above it */
.topbar {
  align-items: flex-start !important;
}.topbar-right-stack {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 7px !important;
  width: max-content !important;
  margin-left: auto !important;
}/* Portfolio / Story / Profile sits ABOVE Contact / Links and matches their width */
.topbar-section-nav {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  width: 100% !important;
  gap: 0 !important;
  padding: 0 2px !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
}/* Borderless, larger text buttons */
.topbar-section-tab, .topbar-section-tab.tab, .topbar-section-nav .tab {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  min-width: 0 !important;
  height: 18px !important;
  padding: 0 !important;
  margin: 0 !important;

  border: 0 !important;
  background: transparent !important;
  color: rgba(25,25,25,.58) !important;
  box-shadow: none !important;

  font-family: inherit !important;
  font-size: 12.5px !important;
  font-weight: 300 !important;
  line-height: 1 !important;
  letter-spacing: -.02em !important;
  text-align: center !important;
  white-space: nowrap !important;
  cursor: pointer !important;
}.topbar-section-tab:hover, .topbar-section-tab.active, .topbar-section-tab.tab.active, .topbar-section-nav .tab:hover, .topbar-section-nav .tab.active {
  background: transparent !important;
  color: #111 !important;
  box-shadow: none !important;
  text-decoration: none !important;
}/* Do not disturb the original Contact / Links layout */
.topbar-right-stack .inline-access {
  width: max-content !important;
  max-width: none !important;
  margin: 0 !important;
}

/* Old floating navigator is fully removed/hidden */

@media(max-width:700px) {.topbar-right-stack {
    width: 100% !important;
    align-items: stretch !important;
  }.topbar-section-nav {
    width: 100% !important;
  }.topbar-right-stack .inline-access {
    width: 100% !important;
  }.topbar-section-tab, .topbar-section-tab.tab, .topbar-section-nav .tab {
    font-size: 12px !important;
  }
}/* ===== v100 dotted divider between section nav and contact links ===== */

.topbar-section-nav {
  position: relative !important;
  padding-bottom: 7px !important;
  margin-bottom: 1px !important;
}.topbar-section-nav::after {
  content: "" !important;
  position: absolute !important;
  left: 2px !important;
  right: 2px !important;
  bottom: 0 !important;
  height: 0 !important;
  border-bottom: 1px dotted rgba(25,25,25,.24) !important;
  pointer-events: none !important;
}.topbar-right-stack {
  gap: 5px !important;
}/* ===== v101 topbar vertical alignment + contact functions ===== */

/* Lift the menu selection tabs slightly and let Contact/Links sit closer beneath them */
.topbar-right-stack {
  gap: 2px !important;
}.topbar-section-nav {
  transform: translateY(-5px) !important;
  padding-bottom: 8px !important;
  margin-bottom: -1px !important;
}.topbar-section-nav::after {
  bottom: 1px !important;
  border-bottom-color: rgba(25,25,25,.20) !important;
}.topbar-right-stack .inline-access {
  transform: translateY(-2px) !important;
}/* Keep section nav visible and comfortably clickable */
.topbar-section-tab, .topbar-section-tab.tab, .topbar-section-nav .tab {
  height: 20px !important;
  font-size: 11.8px !important;
}/* Kakao friend menu */

/* ===== v102 label revisions and image mark ===== */

/* Replace black mark fill with the same background image, scaled down inside the square */
.mark {
  background-color: #bdbdbd !important;
  background-image: var(--bg-image) !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: 240% auto !important;
  overflow: visible !important;
}.mark::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: rgba(0,0,0,.08) !important;
  pointer-events: none !important;
}/* Keep section descriptions clean after text revision */
.section-head .rule {
  max-width: 420px !important;
  text-align: right !important;
  line-height: 1.45 !important;
  white-space: normal !important;
  font-weight: 500 !important;
  letter-spacing: -.035em !important;
}.project-board-head {
  align-items: center !important;
}.project-board-head h2 {
  margin-bottom: 0 !important;
}.project-board-head p:empty {
  display: none !important;
}/* Remove board card numbering space if any remains */

.board-card-top {
  gap: 0 !important;
}/* ===== v103 copy and tone corrections ===== */

/* Main explanatory sentences under section titles / themes: gray */
.section-head p, .project-board-head p, .axis p, .recent-content p, .step-body p {
  color: #6f6f6f !important;
  font-weight: 300 !important;
}/* Functional guide sentences: lighter gray */
.section-head .rule {
  color: #9a9a9a !important;
  font-weight: 300 !important;
  line-height: 1.55 !important;
}/* Dashboard description follows timeline section-description tone */
.project-board-head p {
  margin: 8px 0 0 !important;
  max-width: 420px !important;
  color: #6f6f6f !important;
  font-size: 12px !important;
  line-height: 1.6 !important;
  letter-spacing: -.035em !important;
}/* Remove the right-side Dashboard category label completely */

/* Board card titles remain clean after index removal */
.board-card-top h3 {
  color: #303030 !important;
  font-weight: 500 !important;
}/* Memo input helper text / placeholders: smaller, lighter, grayer */
.memo-form input, .memo-form textarea {
  color: #4a4a4a !important;
  font-size: 11.5px !important;
  font-weight: 300 !important;
}.memo-form input::placeholder, .memo-form textarea::placeholder {
  color: #a8a8a8 !important;
  font-size: 10.6px !important;
  font-weight: 300 !important;
  letter-spacing: -.04em !important;
  opacity: 1 !important;
}.memo-form label span {
  color: #9f9f9f !important;
  font-size: 9.8px !important;
  font-weight: 300 !important;
}/* Privacy note is functional copy, keep it lighter */
.privacy-note {
  color: #aaa !important;
  font-weight: 300 !important;
}/* Board label text such as Latest closed should be removed if still visible */

/* ===== v105 dashboard copy actually fixed ===== */

/* Hard-hide any residual card numbering or English category labels */

/* Dashboard description: same gray family as timeline intro */
.project-board-head p {
  display: block !important;
  margin: 8px 0 0 !important;
  color: #6f6f6f !important;
  font-size: 12px !important;
  font-weight: 300 !important;
  line-height: 1.6 !important;
  letter-spacing: -.035em !important;
}/* Theme/section explanatory sentences */
.section-head p, .project-board-head p, .axis p, .recent-content p, .step-body p {
  color: #6f6f6f !important;
  font-weight: 300 !important;
}/* Functional explanations: lighter gray */
.section-head .rule {
  color: #9a9a9a !important;
  font-weight: 300 !important;
  line-height: 1.55 !important;
}/* Board card titles, without number spacing */
.board-card-top {
  gap: 0 !important;
}.board-card-top h3 {
  color: #303030 !important;
  font-weight: 500 !important;
}/* Memo form helper/placeholder text: smaller and muted */
#projectMemoForm input, #projectMemoForm textarea {
  color: #4a4a4a !important;
  font-size: 11.3px !important;
  font-weight: 300 !important;
}#projectMemoForm input::placeholder, #projectMemoForm textarea::placeholder {
  color: #a9a9a9 !important;
  font-size: 10.2px !important;
  font-weight: 300 !important;
  letter-spacing: -.045em !important;
  opacity: 1 !important;
}#projectMemoForm label span {
  color: #9f9f9f !important;
  font-size: 9.7px !important;
  font-weight: 300 !important;
  letter-spacing: .06em !important;
}.privacy-note {
  color: #aaa !important;
  font-size: 9.5px !important;
  font-weight: 300 !important;
}/* ===== v106 unified intro copy + lighter functional notes ===== */

/* Unify the three main description lines:
   1. Competence & Portfolio description
   2. Timeline & Projects description
   3. Dashboard description */
.section-head p, .project-board-head p {
  color: #6f6f6f !important;
  font-size: 13px !important;
  font-weight: 300 !important;
  line-height: 1.62 !important;
  letter-spacing: -.035em !important;
}/* Dashboard description should visually match the two section descriptions */
.project-board-head p {
  margin: 8px 0 0 !important;
  max-width: 620px !important;
}/* Functional explanations: much smaller, no bold, thinner tone */
.section-head .rule {
  color: #aaa !important;
  font-size: 8px !important;
  font-weight: 200 !important;
  line-height: 1.42 !important;
  letter-spacing: -.025em !important;
  max-width: 360px !important;
  white-space: normal !important;
}/* Remove inherited bolding from any inner text in rule blocks */
.section-head .rule *, .rule {
  font-weight: 200 !important;
}/* ===== v107 enlarged main intro copy ===== */

/* Three main description lines:
   - Competence & Portfolio
   - Timeline & Projects
   - Dashboard */
.section-head p, .project-board-head p {
  color: #6f6f6f !important;
  font-size: 20px !important;
  font-weight: 300 !important;
  line-height: 1.52 !important;
  letter-spacing: -.045em !important;
}/* Keep Dashboard description aligned with the other two */
.project-board-head p {
  margin: 10px 0 0 !important;
  max-width: 760px !important;
}/* ===== v108 functional notes adjusted ===== */

/* Functional guide text: +40% larger than previous, clearly non-bold */
.section-head .rule, .section-head .rule *, .rule {
  color: #9a9a9a !important;
  font-size: 11.2px !important;
  font-weight: 200 !important;
  line-height: 1.5 !important;
  letter-spacing: -.025em !important;
  max-width: 420px !important;
  white-space: normal !important;
  text-align: right !important;
  font-variation-settings: "wght" 200 !important;
}/* Prevent old rule style from forcing bold */
.section-head .rule {
  font-family: inherit !important;
}
@media(max-width:1160px){
}
@media(max-width:900px){
}
@media(max-width:700px){
}/* ===== Essay tab: news rail + three 3x3 essay frames ===== */
.essay-shell {
  display: grid;
  gap: 34px;
  width: 100%;
}.essay-news, .essay-frame {
  background: #d2d2d2;
  box-shadow: 0 22px 54px rgba(0,0,0,.12);
  width: 100%;
}.essay-news {
  min-height: 0;
}.essay-news-head, .essay-frame-head {
  padding: 28px 30px 24px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  background: #d2d2d2;
}.essay-news-head h2, .essay-frame-head h2 {
  margin: 0;
  font-size: clamp(28px,3.4vw,44px);
  line-height: 1.04;
  letter-spacing: -.075em;
}.essay-news-head p, .essay-frame-head p {
  margin: 8px 0 0;
  color: #333;
  max-width: 720px;
}.essay-tag-strip {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dotted rgba(255,255,255,.44);
  max-width: 720px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  cursor: grab;
  user-select: none;
  touch-action: pan-x;
}.essay-tag-strip::-webkit-scrollbar {
  display: none;
}.essay-tag-strip.dragging {
  cursor: grabbing;
}.essay-tag-btn {
  flex: 0 0 76px;
  border: 1px solid rgba(255,255,255,.42);
  background: rgba(255,255,255,.10);
  color: rgba(20,20,20,.66);
  min-height: 26px;
  padding: 0 6px;
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  font-weight: 850;
  text-align: center;
  white-space: nowrap;
}.essay-tag-btn.active, .essay-tag-btn:hover {
  background: rgba(255,255,255,.24);
  border-color: rgba(20,20,20,.18);
  color: #111;
}.site-search {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 30px;
  flex: 0 1 auto;
  flex-basis: auto;
  width: clamp(260px, 30vw, 420px);
  min-width: 240px;
  gap: 4px;
  margin: 0 auto;
  align-self: flex-start;
}.site-search input {
  width: 100%;
  min-height: 29px;
  border: 1px solid rgba(20,20,20,.14);
  background: rgba(255,255,255,.70);
  color: #111;
  padding: 0 10px;
  font: inherit;
  font-size: 12px;
  outline: none;
}.site-search input:focus {
  background: #ffffff;
  border-color: rgba(175,0,0,.28);
}.site-search button {
  border: 1px solid rgba(20,20,20,.14);
  background: rgba(255,255,255,.70);
  color: #555;
  cursor: pointer;
  font: inherit;
  font-weight: 900;
}.site-search-results {
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  right: 0;
  z-index: 80;
  display: none;
  max-height: 260px;
  overflow: auto;
  background: rgba(248,248,248,.98);
  border: 1px solid rgba(20,20,20,.14);
  box-shadow: 0 18px 42px rgba(0,0,0,.12);
}.site-search-results.open {
  display: grid;
}.site-search-result {
  border: 0;
  border-bottom: 1px dotted rgba(20,20,20,.14);
  background: transparent;
  color: #222;
  padding: 10px 11px;
  cursor: pointer;
  text-align: left;
  font: inherit;
}.site-search-result b {
  display: block;
  color: #111;
  font-size: 12px;
  margin-bottom: 3px;
}.site-search-result span {
  display: block;
  color: #666;
  font-size: 11px;
  line-height: 1.35;
}.site-search-result:hover {
  background: rgba(255,255,255,.82);
}.site-search-tags {
  grid-column: 1 / -1;
  display: flex;
  gap: 5px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-top: 4px;
}.site-search-tags::-webkit-scrollbar {
  display: none;
}.site-search-tags button {
  flex: 0 0 auto;
  min-height: 21px;
  border: 1px solid rgba(20,20,20,.12);
  background: rgba(255,255,255,.50);
  color: rgba(20,20,20,.62);
  padding: 0 7px;
  font-size: 10.5px;
  font-weight: 800;
  white-space: nowrap;
}.site-search-tags button:hover {
  background: #ffffff;
  color: var(--red);
}.portfolio-intro {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, .28fr);
  align-items: center;
  gap: 42px;
  margin-bottom: 34px;
  padding: 48px 54px 44px;
  background: linear-gradient(135deg, rgba(165,8,8,.36) 0%, rgba(120,0,0,.40) 55%, rgba(74,0,0,.46) 100%);
  -webkit-backdrop-filter: blur(1px) saturate(1.08);
  backdrop-filter: blur(1px) saturate(1.08);
  border: 1px solid rgba(255,255,255,.30);
  box-shadow: 0 24px 58px rgba(0,0,0,.32), 0 8px 20px rgba(0,0,0,.20);
}
.portfolio-hero {
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
  min-height: 100vh;
  margin-top: -28px;
  margin-bottom: 0;
  padding: 7vh max(7vw, 54px) 7vh;
  align-content: center;
  border-left: 0;
  border-right: 0;
  border-top: 0;
  border-radius: 0;
  box-shadow: 0 24px 58px rgba(0,0,0,.32);
}
/* ===== centered single-column hero ===== */
.portfolio-hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 70%, rgba(0,0,0,.70) 88%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 70%, rgba(0,0,0,.70) 88%, rgba(0,0,0,0) 100%);
}
.portfolio-hero .portfolio-intro-copy {
  justify-self: center;
  text-align: center;
  align-self: center;
  padding-left: 0;
  max-width: 1100px;
}
.portfolio-hero .portfolio-intro-copy h2 {
  position: relative;
  margin: 0 auto;
  max-width: none;
  font-size: clamp(52px, 6.6vw, 96px);
  line-height: 1.1;
  white-space: normal;
  font-weight: 950;
  letter-spacing: -.04em;
  -webkit-text-stroke: .55px rgba(255,255,255,.95);
  filter:
    drop-shadow(0 3px 10px rgba(0,0,0,.38))
    drop-shadow(0 0 18px rgba(255,255,255,.16));
}
.portfolio-hero .portfolio-intro-copy .hero-trans {
  max-width: none;
  margin: 8px auto 0;
  color: rgba(255,255,255,.45);
  font-size: clamp(15px, 1.6vw, 22px);
  font-weight: 500;
  letter-spacing: -.02em;
}
.portfolio-hero .portfolio-intro-copy p:not(.hero-trans) {
  max-width: none;
  margin: 80px auto 0;
  color: rgba(255,255,255,.70);
  font-size: clamp(18px, 2vw, 28px);
  line-height: 1.5;
  font-weight: 650;
}
.portfolio-hero .portfolio-intro-copy p:not(.hero-trans) strong {
  display: inline-block;
  margin-top: 14px;
  font-size: clamp(28px, 3vw, 42px);
  color: #fff;
  text-shadow:
    0 0 12px rgba(255,210,210,.34),
    0 0 28px rgba(181,18,27,.34),
    0 0 58px rgba(181,18,27,.22),
    0 2px 10px rgba(0,0,0,.42);
}
.portfolio-hero .portfolio-intro-name {
  justify-self: center;
  align-self: center;
  text-align: center;
  transform: translate(22px, 18px);
  margin-top: 64px;
}
.portfolio-hero .portfolio-intro-name .kr,
.portfolio-hero .portfolio-intro-name .en {
  text-align: center;
}
.portfolio-hero .portfolio-intro-name .kr {
  letter-spacing: .065em;
}
.hero-scroll-hint {
  position: absolute;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  width: 18px;
  height: 29px;
  border: 1.5px solid rgba(255,255,255,.5);
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 5px;
  grid-column: 1 / -1;
}
.hero-scroll-hint span {
  width: 3px;
  height: 6px;
  background: rgba(255,255,255,.75);
  border-radius: 2px;
  animation: heroScroll 1.6s ease-in-out infinite;
}
@keyframes heroScroll {
  0% { opacity: 0; transform: translateY(0); }
  40% { opacity: 1; }
  80% { opacity: 0; transform: translateY(12px); }
  100% { opacity: 0; }
}
body:not(.hero-passed) .section-jump { display: none !important; }
@media (max-width: 760px) {
  .portfolio-hero {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 9vh 24px 9vh;
    align-content: center;
  }
  .portfolio-hero .portfolio-intro-name {
    justify-self: start;
    align-self: auto;
    transform: none;
    opacity: .9;
  }
  .portfolio-hero .portfolio-intro-name .kr {
    font-size: clamp(40px, 13vw, 60px);
    letter-spacing: .06em;
    text-align: left;
  }
  .portfolio-hero .portfolio-intro-name .en {
    text-align: left;
    font-size: clamp(17px, 5vw, 24px);
  }
}.portfolio-intro-kicker {
  display: block;
  margin-bottom: 16px;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .06em;
}.portfolio-intro-name {
  margin: 0;
  color: #242424;
  line-height: 1;
  font-weight: 950;
  justify-self: end;
  text-align: center;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  transform: translateX(-28px);
  padding: 0;
  opacity: .88;
}.portfolio-intro-name .kr {
  display: block;
  font-family: 'Pretendard', sans-serif;
  font-size: clamp(48px, 5.1vw, 70px);
  letter-spacing: .10em;
  font-weight: 900;
  white-space: nowrap;
  color: #fff;
  -webkit-text-fill-color: #fff;
  text-shadow: 0 1px 0 rgba(120,0,0,.5), 0 3px 8px rgba(0,0,0,.45), 0 6px 22px rgba(0,0,0,.30);
}.portfolio-intro-name .en {
  display: block;
  margin-top: 4px;
  font-family: 'Pretendard', sans-serif;
  color: #c9c9c9;
  font-size: clamp(19px, 2vw, 27px);
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: .06em;
  white-space: nowrap;
  width: auto;
  text-align: center;
  text-align-last: auto;
  text-shadow: 0 1px 0 rgba(120,0,0,.4), 0 2px 6px rgba(0,0,0,.40), 0 4px 14px rgba(0,0,0,.28);
}.portfolio-intro h2 {
  margin: 0;
  max-width: 920px;
  font-family: 'Pretendard', sans-serif;
  color: transparent;
  background-image: var(--bg-image);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 150% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: .4px #fff;
  font-size: clamp(34px, 4.3vw, 58px);
  line-height: 1.2;
  letter-spacing: -.02em;
  font-weight: 900;
}.portfolio-intro p {
  max-width: 940px;
  margin: 18px 0 0;
  color: rgba(255,255,255,.62);
  font-size: clamp(16px, 1.45vw, 21px);
  line-height: 1.42;
  font-weight: 620;
  letter-spacing: -.035em;
}.portfolio-intro p strong {
  color: rgba(243,243,243,.90);
  font-weight: 850;
  text-shadow: 0 1px 4px rgba(0,0,0,.40), 0 2px 10px rgba(0,0,0,.25);
}.portfolio-intro-copy {
  justify-self: start;
  text-align: left;
  align-self: center;
  padding-left: 0;
}

@media(max-width:700px) {.portfolio-intro {
    padding: 30px 24px 28px;
    grid-template-columns: 1fr;
    gap: 18px;
  }.portfolio-intro-name {
    justify-self: start;
    text-align: left;
  }.portfolio-intro-copy {
    justify-self: start;
    text-align: left;
    padding-left: 0;
  }
}.section-jump {
  display: none;
}

@media(min-width:1024px) {.panel.active .section-jump {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: fixed;
    top: 40%;
    transform: translateY(-50%);
    z-index: 60;
    padding: 4px 0;
  }.section-jump-track {
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 50%;
    width: 1.5px;
    transform: translateX(-50%);
    background: rgba(140,140,140,.4);
    border-left: 1px solid rgba(120,120,120,.3);
    border-right: 1px solid rgba(255,255,255,.3);
    z-index: 0;
  }.section-jump-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
    position: relative;
    z-index: 1;
  }.section-jump-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgba(255,255,255,.7);
    border: 1px solid rgba(120,120,120,.65);
    box-shadow: 0 0 0 1px rgba(255,255,255,.5);
    flex: 0 0 auto;
    transition: background .18s, border-color .18s, transform .18s;
  }.section-jump-item:hover .section-jump-dot {
    border-color: rgba(90,90,90,.85);
    transform: scale(1.15);
  }.section-jump-item.active .section-jump-dot {
    background: rgba(60,60,60,.78);
    border-color: rgba(60,60,60,.9);
    box-shadow: 0 0 0 1px rgba(255,255,255,.7);
    transform: scale(1.3);
  }
}.site-search-toggle {
  display: none;
}.topbar-head-row {
  display: contents;
}

@media(max-width:1000px) {.topbar-head-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 12px;
  }.site-search-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    border: 1px solid rgba(20,20,20,.12);
    background: rgba(255,255,255,.28);
    color: #333;
    font-size: 16px;
    font-weight: 900;
    cursor: pointer;
  }.site-search-toggle[aria-expanded="true"] {
    background: rgba(255,255,255,.6);
    border-color: rgba(20,20,20,.28);
  }.site-search {
    display: none;
    width: 100%;
    min-width: 0;
    margin: 4px 0 0;
    order: 1;
  }.site-search.open {
    display: grid;
  }.topbar-right-stack {
    order: 2;
  }
}

@media(max-width:700px) {.site-search {
    width: 100%;
    min-width: 0;
    margin: 4px 0;
  }
}.essay-news-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(380px, 58%);
  gap: 14px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 20px;
  -webkit-overflow-scrolling: touch;
  padding: 20px;
  background: rgba(255,255,255,.28);
  scrollbar-width: none;
  cursor: grab;
  user-select: none;
  touch-action: pan-x;
}.essay-news-track::-webkit-scrollbar {
  display: none;
}.essay-global-tag {
  border: 0;
  background: transparent;
  color: #555;
  padding: 0;
  font: inherit;
  font-size: 14px;
  font-weight: 850;
  line-height: 1.4;
  cursor: pointer;
  letter-spacing: -.025em;
}.essay-global-tag:hover, .essay-global-tag.active {
  color: var(--red);
}.essay-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  padding: 20px;
  background: #d2d2d2;
}#essayPublicBusinessGrid, #essayWorldOutsideGrid, #essayThinkingEmotionGrid, #essayOthersGrid {
  grid-template-columns: none;
  grid-template-rows: repeat(3, minmax(176px, 1fr));
  grid-auto-flow: column;
  grid-auto-columns: minmax(240px, calc((100% - 28px) / 3));
  max-height: 610px;
  overflow: hidden;
  overscroll-behavior: auto;
  scroll-snap-type: both proximity;
  scroll-padding: 20px;
  scrollbar-width: none;
  cursor: grab;
  user-select: none;
  touch-action: pan-x pan-y;
}#essayPublicBusinessGrid::-webkit-scrollbar, #essayWorldOutsideGrid::-webkit-scrollbar, #essayThinkingEmotionGrid::-webkit-scrollbar, #essayOthersGrid::-webkit-scrollbar {
  display: none;
}#essayPublicBusinessGrid.dragging, #essayWorldOutsideGrid.dragging, #essayThinkingEmotionGrid.dragging, #essayOthersGrid.dragging {
  cursor: grabbing;
}.essay-frame-controls {
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 0 20px 20px;
  background: rgba(255,255,255,.28);
}.essay-frame-controls button {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.54);
  background: rgba(255,255,255,.28);
  color: rgba(20,20,20,.72);
  cursor: pointer;
  font: inherit;
  font-size: 17px;
  font-weight: 850;
  line-height: 1;
  box-shadow: 0 8px 18px rgba(0,0,0,.045);
}.essay-frame-controls button:hover {
  background: rgba(255,255,255,.58);
  border-color: rgba(20,20,20,.16);
  color: #111;
}.essay-card {
  position: relative;
  min-height: 176px;
  border: 0;
  background: #dedede;
  text-align: left;
  cursor: pointer;
  padding: 0;
  overflow: hidden;
  color: #111;
  scroll-snap-align: start;
  transition: .18s;
}.essay-card.news-card {
  min-height: 204px;
}.essay-card:hover {
  background: #eeeeee;
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(0,0,0,.13);
}.essay-card .front, .essay-card .hover {
  position: absolute;
  inset: 0;
  padding: 20px;
  transition: .18s;
}.essay-card .front {
  display: grid;
  grid-template-rows: 1fr auto auto;
  gap: 12px;
}.essay-card .hover {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}.essay-card .hover {
  opacity: 0;
  transform: translateY(8px);
  background: #eee;
}.essay-card:hover .front {
  opacity: 0;
  transform: translateY(-8px);
}.essay-card:hover .hover {
  opacity: 1;
  transform: translateY(0);
}.essay-card strong {
  display: block;
  width: 100%;
  max-width: none !important;
  color: var(--red);
  font-size: 21px;
  font-weight: 950;
  line-height: 1.24;
  letter-spacing: -.035em;
  word-break: keep-all;
  overflow-wrap: normal;
  line-break: strict;
}#essay .essay-card strong {
  display: block;
  overflow: visible;
}.essay-card b {
  display: block;
  color: #111;
  font-size: 13px;
  line-height: 1.12;
  letter-spacing: -.025em;
}.essay-card .hover b {
  color: #111;
  font-size: 20px;
  line-height: 1.15;
  letter-spacing: -.055em;
}.essay-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-self: end;
  min-height: 49px;
  align-content: end;
}.essay-card-tags small {
  display: inline-flex;
  align-items: center;
  min-height: 21px;
  padding: 0 7px;
  border: 1px solid rgba(20,20,20,.10);
  background: rgba(255,255,255,.30);
  color: rgba(20,20,20,.58);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}.essay-card em, .essay-card span {
  font-style: normal;
  color: #444;
  font-size: 13px;
  line-height: 1.45;
}.essay-card i {
  font-style: normal;
  color: var(--red);
  font-size: 12px;
  font-weight: 900;
}#essayModal .modal-top {
  background: #eeeeee !important;
}#essayModal .modal-kicker {
  color: #777;
}#essayModal .modal h2 {
  color: #777;
  font-weight: 850;
}#essayModal .modal-pill {
  background: #f7f7f7;
  color: #555;
}.essay-modal-body {
  min-height: 0;
  overflow: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  background: #f4f4f4;
}.essay-reader {
  padding: 30px;
  background: #ffffff;
  outline: none;
}.essay-reader p {
  margin: 0 0 16px;
  color: #222;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.75;
}.essay-image-gallery {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(240px, 42%);
  gap: 12px;
  overflow-x: auto;
  scrollbar-width: none;
  margin: 0 0 24px;
  padding: 0 0 4px;
  scroll-snap-type: x mandatory;
}.essay-image-gallery::-webkit-scrollbar {
  display: none;
}.essay-image-gallery figure {
  margin: 0;
  background: rgba(255,255,255,.42);
  scroll-snap-align: start;
}.essay-image-gallery img {
  display: block;
  width: 100%;
  height: 220px;
  object-fit: cover;
}.essay-image-gallery figcaption {
  padding: 9px 11px 10px;
  color: #555;
  font-size: 12px;
  line-height: 1.35;
}.essay-inline-image {
  margin: 22px 0 24px;
  background: rgba(255,255,255,.42);
}.essay-inline-image img {
  display: block;
  width: 100%;
  max-height: 560px;
  object-fit: contain;
  background: #111;
}.essay-inline-image figcaption {
  padding: 10px 12px 12px;
  color: #555;
  font-size: 12px;
  line-height: 1.35;
}.essay-comments {
  padding: 28px 24px;
  background: #f3f3f3;
  border-left: 1px dotted rgba(20,20,20,.22);
}.essay-comments h3 {
  margin: 0 0 12px;
  color: #777;
  font-size: 16px;
}.essay-modal-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0 0 18px;
  padding-bottom: 14px;
  border-bottom: 1px dotted rgba(20,20,20,.16);
}.essay-modal-tags span {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  padding: 0 9px;
  border: 1px solid rgba(20,20,20,.12);
  background: #fff;
  color: #555;
  font-size: 12px;
  font-weight: 800;
}.essay-comment-list {
  display: grid;
  gap: 10px;
  min-height: 80px;
  margin-bottom: 16px;
}.essay-comment {
  background: #dedede;
  padding: 12px;
  font-size: 13px;
  color: #333;
}.essay-comment b {
  display: block;
  color: #111;
  margin-bottom: 4px;
}.essay-comment b em {
  display: block;
  margin-top: 2px;
  color: #999;
  font-size: 10px;
  font-style: normal;
  font-weight: 600;
}.essay-comment span {
  display: block;
  line-height: 1.55;
  white-space: pre-wrap;
}.essay-comment-actions {
  margin-top: 9px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}.essay-reply-toggle, .essay-comment-delete, .essay-reply-form button {
  border: 0;
  background: #111;
  color: #fff;
  min-height: 30px;
  padding: 0 11px;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 850;
}.essay-comment-delete {
  background: #ddd;
  color: #333;
}.essay-replies {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  padding-left: 12px;
  border-left: 1px dotted rgba(20,20,20,.28);
}.essay-reply {
  background: rgba(238,238,238,.82);
  padding: 10px;
  font-size: 12px;
}.essay-reply b {
  margin-bottom: 3px;
}.essay-reply-form {
  display: grid;
  gap: 7px;
  margin-top: 10px;
}.essay-reply-form[hidden] {
  display: none;
}.essay-reply-form input, .essay-reply-form textarea {
  width: 100%;
  border: 0;
  background: #eeeeee;
  color: #111;
  padding: 9px 10px;
  font: inherit;
  font-size: 12px;
}.essay-reply-form textarea {
  min-height: 72px;
  resize: vertical;
}.essay-comment-system.is-error {
  background: #fff2f0;
  color: #8d1b0d;
}.essay-comment-form {
  display: grid;
  gap: 9px;
}.essay-comment-form input, .essay-comment-form textarea {
  width: 100%;
  border: 0;
  background: #eeeeee;
  color: #111;
  padding: 11px 12px;
  font: inherit;
  font-size: 13px;
}.essay-comment-form textarea {
  min-height: 110px;
  resize: vertical;
}.essay-comment-form button {
  border: 0;
  background: #111;
  color: #fff;
  min-height: 38px;
  cursor: pointer;
  font-weight: 850;
}.kakao-friend-modal .kakao-modal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(92vw, 420px);
  background: #fff;
  box-shadow: 0 36px 120px rgba(0,0,0,.48);
  overflow: hidden;
}.kakao-friend-modal .modal-top {
  align-items: center;
}.kakao-friend-modal .modal-top h2 {
  margin: 0;
  font-size: 18px;
  letter-spacing: -.04em;
}.kakao-modal-desc {
  margin: 0;
  padding: 18px 24px 0;
  color: #555;
  font-size: 13px;
  line-height: 1.55;
}.kakao-id-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 24px 0;
  border: 1px solid rgba(20,20,20,.16);
  background: #f3f3f3;
}.kakao-id-text {
  flex: 1;
  padding: 0 12px;
  min-height: 42px;
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 850;
  color: #111;
  word-break: break-all;
}.kakao-copy-btn {
  flex: 0 0 auto;
  border: 0;
  border-left: 1px solid rgba(20,20,20,.16);
  background: transparent;
  min-height: 42px;
  padding: 0 16px;
  color: var(--red);
  font-weight: 900;
  font-size: 12.5px;
  cursor: pointer;
}.kakao-copy-btn:hover {
  background: rgba(20,20,20,.05);
}.kakao-guide-steps {
  margin: 16px 24px 24px;
  padding-left: 18px;
  color: #555;
  font-size: 12.5px;
  line-height: 1.7;
}.kakao-guide-steps li + li {
  margin-top: 2px;
}.mail-modal-id-row {
  margin-bottom: 24px;
}

@media(max-width:900px) {.essay-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }.essay-news-track {
    grid-auto-columns: minmax(280px, 82%);
  }.essay-modal-body {
    grid-template-columns: 1fr;
  }.essay-comments {
    border-left: 0;
    border-top: 1px dotted rgba(20,20,20,.22);
  }
}

@media(max-width:640px) {.essay-grid {
    grid-template-columns: 1fr;
  }.essay-news-head, .essay-frame-head {
    flex-direction: column;
    align-items: flex-start;
  }
}/* Essay frames must occupy the same horizontal span as Portfolio and Story frames. */
#essay {
  width: 100% !important;
  max-width: none !important;
}#essay .essay-shell {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
}#essay .essay-news, #essay .essay-frame, #essay .essay-news.matrix, #essay .essay-frame.matrix {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}#essay .essay-news, #essay .essay-frame {
  margin-bottom: 34px !important;
}#essay .essay-grid.cards, #essay .essay-news-track {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
}#essay .essay-grid.cards, #essay .essay-news-track {
  background: rgba(255,255,255,.28) !important;
}#essay .essay-card.project-card {
  background: rgba(255,255,255,.72) !important;
}#essay .essay-card.project-card:hover {
  background: linear-gradient(180deg, rgba(250,250,250,.82) 0%, rgba(236,236,236,.7) 100%) !important;
}#projects .project-card .front strong {
  color: var(--red) !important;
}#essayModal .modal, #essayModal .modal-top, #essayModal .essay-modal-body, #essayModal .essay-comments {
  background: #ffffff !important;
}#essayModal .modal h2 {
  color: var(--red) !important;
}#essayModal .essay-modal-body {
  overflow: auto;
  align-items: start;
  border-top: 1px dotted rgba(20,20,20,.18);
}#essayModal .essay-reader {
  background: #ffffff !important;
  border-right: 1px dotted rgba(20,20,20,.2);
}#essayModal .essay-comments {
  position: sticky;
  top: 0;
  max-height: calc(100vh - 150px);
  overflow: auto;
  border-left: 0;
}/* ===== Story v6: same-height axes, vertical official education, split moving table ===== */
#story .story-v6 {
  display: grid;
}.story-v6 {
  gap: 34px;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}.story-v6-frame {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 30px;
  overflow: hidden;
  scroll-margin-top: 150px;
  background: #fff;
  box-shadow: 0 22px 54px rgba(0,0,0,.10);
}.story-v6-head {
  position: relative;
  display: grid;
  grid-template-columns: minmax(260px, .62fr) minmax(0, 1fr);
  gap: 24px;
  align-items: end;
  padding-bottom: 20px;
  border-bottom: 1px solid #111;
}.story-v6-head span {
  color: var(--red);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}.story-v6-head h2 {
  margin: 8px 0 0;
  color: #111;
  font-size: clamp(34px,4.2vw,64px);
  line-height: .96;
  letter-spacing: -.075em;
}.story-v6-head p {
  margin: 0;
  color: #444;
  font-size: 14px;
  line-height: 1.68;
}.story-v6-drag {
  width: 100%;
  max-width: 100%;
  overflow: visible;
  cursor: default;
}.story-v6-drag::-webkit-scrollbar {
  display: none;
}.story-v6-drag.dragging {
  cursor: grabbing;
  user-select: none;
}.storyline-v6 {
  position: relative;
  min-width: 0;
  margin-top: 24px;
  --story-year-w: 100px;
  --story-gap: 8px;
  --story-dot-x: 14.5px;
  --story-line-w: 1.5px;
  --story-line-offset: 4px;
}.storyline-v6:before {
  content: none;
}.storyline-v6-guide {
  position: absolute;
  right: 0;
  bottom: 7px;
  z-index: 5;
  margin: 0;
  color: #666;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -.025em;
  text-align: right;
}.storyline-v6-years {
  display: grid;
  grid-template-columns: var(--story-year-w) repeat(4, minmax(0, 1fr));
  gap: var(--story-gap);
  margin-bottom: 8px;
}.storyline-v6-row {
  display: grid;
  grid-template-columns: var(--story-year-w) repeat(4, minmax(0, 1fr));
  gap: var(--story-gap);
  position: relative;
  background: linear-gradient(to right, rgba(17,17,17,.115), rgba(17,17,17,.115)) 0 100% / 100% 1px no-repeat;
}.storyline-v6-years > * {
  box-sizing: border-box;
  display: flex;
  align-items: center;
}.storyline-v6-years > * {
  min-height: 32px;
  padding: 0 12px;
  color: #111;
  font-size: 11px;
  font-weight: 950;
  background: transparent;
}.storyline-v6-years a, .storyline-v6-years button {
  position: relative;
  z-index: 12;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 32px;
  padding: 0 12px;
  border: 0;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
  user-select: none;
  appearance: none;
  font: inherit;
  text-decoration: none;
  transition: color .16s ease, transform .16s ease;
}.storyline-v6-years a:hover, .storyline-v6-years a:focus-visible, .storyline-v6-years a.is-active, .storyline-v6-years button:hover, .storyline-v6-years button:focus-visible, .storyline-v6-years button.is-active {
  background: transparent;
  color: var(--red);
  transform: translateY(-1px);
}.storyline-v6-years b {
  color: var(--red);
  background: #fff;
}.storyline-v6-years a:nth-child(2), .storyline-v6-years button:nth-child(2) {
  color: #111;
}.storyline-v6-years a:nth-child(3), .storyline-v6-years button:nth-child(3) {
  color: #333;
}.storyline-v6-years a:nth-child(4), .storyline-v6-years button:nth-child(4) {
  color: #666;
}.storyline-v6-years a:nth-child(5), .storyline-v6-years button:nth-child(5) {
  color: #444;
}.storyline-v6-years a:nth-child(2):hover, .storyline-v6-years a:nth-child(2):focus-visible, .storyline-v6-years button:nth-child(2):hover, .storyline-v6-years button:nth-child(2):focus-visible {
  color: var(--red);
}.storyline-v6-years a:nth-child(3):hover, .storyline-v6-years a:nth-child(3):focus-visible, .storyline-v6-years button:nth-child(3):hover, .storyline-v6-years button:nth-child(3):focus-visible {
  color: #333;
}.storyline-v6-years a:nth-child(3).is-active, .storyline-v6-years button:nth-child(3).is-active {
  color: #333;
}.storyline-v6-years a:nth-child(4):hover, .storyline-v6-years a:nth-child(4):focus-visible, .storyline-v6-years a:nth-child(4).is-active, .storyline-v6-years a:nth-child(5):hover, .storyline-v6-years a:nth-child(5):focus-visible, .storyline-v6-years a:nth-child(5).is-active, .storyline-v6-years button:nth-child(4):hover, .storyline-v6-years button:nth-child(4):focus-visible, .storyline-v6-years button:nth-child(4).is-active, .storyline-v6-years button:nth-child(5):hover, .storyline-v6-years button:nth-child(5):focus-visible, .storyline-v6-years button:nth-child(5).is-active {
  color: #333;
}.storyline-v6-years a:hover, .storyline-v6-years a:focus-visible, .storyline-v6-years a.is-active, .storyline-v6-years button:hover, .storyline-v6-years button:focus-visible, .storyline-v6-years button.is-active {
  color: var(--red) !important;
}.storyline-v6-row {
  min-height: 44px;
  margin-bottom: 3px;
}.storyline-v6-row > b {
  grid-column: 1;
  position: relative;
  display: flex;
  align-items: start;
  justify-content: flex-start;
  padding: 9px 0 0 0;
  color: var(--red);
  font-size: 13px;
  font-weight: 950;
  line-height: 1.25;
  background: transparent;
  z-index: 2;
}.storyline-v6-row > b:after {
  content: none;
}.storyline-v6-row article {
  position: relative;
  min-height: 40px;
  padding: 7px 10px 7px calc(var(--story-line-offset) + 34px);
  background: transparent;
  box-sizing: border-box;
}.storyline-v6-row article:after {
  content: "";
  position: absolute;
  left: calc(var(--story-line-offset) + var(--story-dot-x) - (var(--story-line-w) / 2));
  top: -5px;
  bottom: -5px;
  width: var(--story-line-w);
  background: #111;
  z-index: 1;
}.storyline-v6-row:last-child article:after {
  left: calc(var(--story-line-offset) + var(--story-dot-x) - 4.5px);
  bottom: -7px;
  width: 9px;
  clip-path: polygon(50% 100%, 0 calc(100% - 9px), calc(50% - .75px) calc(100% - 9px), calc(50% - .75px) 0, calc(50% + .75px) 0, calc(50% + .75px) calc(100% - 9px), 100% calc(100% - 9px));
}.storyline-v6-row article i {
  display: none;
}.storyline-v6-row strong {
  display: block;
  color: #111;
  font-size: 11.5px;
  line-height: 1.35;
  word-break: keep-all;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}.storyline-v6-row article:not(.is-empty):before {
  content: "";
  position: absolute;
  left: calc(var(--story-line-offset) + var(--story-dot-x) - 3.5px);
  top: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #111;
  box-shadow: 0 0 0 4px #fff;
  transform: translateY(-50%);
  z-index: 2;
}.storyline-v6-row article strong br {
  display: none;
}.storyline-v6-row article:nth-child(2):not(.is-empty) strong {
  color: #111;
}.storyline-v6-row article:nth-child(2):not(.is-empty):before {
  background: #111;
}.storyline-v6-row article:nth-child(2):after {
  background: #111;
}.storyline-v6-row article:nth-child(3):not(.is-empty) strong {
  color: #333;
}.storyline-v6-row article:nth-child(3):not(.is-empty):before {
  background: #333;
}.storyline-v6-row article:nth-child(3):after {
  background: #444;
}.storyline-v6-row article:nth-child(4):not(.is-empty) strong {
  color: #666;
}.storyline-v6-row article:nth-child(4):not(.is-empty):before {
  background: #777;
}.storyline-v6-row article:nth-child(4):after {
  background: #777;
}.storyline-v6-row article:nth-child(5):not(.is-empty) strong {
  color: #444;
}.storyline-v6-row article:nth-child(5):not(.is-empty):before {
  background: #444;
}.storyline-v6-row article:nth-child(5):after {
  background: #555;
}

@keyframes storyTraceLine {0% {
    opacity: .15;
    transform: scaleY(.12);
  }65% {
    opacity: 1;
    transform: scaleY(1);
  }100% {
    opacity: .72;
    transform: scaleY(1);
  }
}

@keyframes storyTraceDot {0%, 100% {
    box-shadow: 0 0 0 4px #fff;
  }45% {
    box-shadow: 0 0 0 4px #fff, 0 0 0 9px rgba(175,0,0,.12);
  }
}.storyline-v6.is-tracing.trace-education .storyline-v6-row article:nth-child(2):after, .storyline-v6.is-tracing.trace-moving .storyline-v6-row article:nth-child(3):after, .storyline-v6.is-tracing.trace-trials .storyline-v6-row article:nth-child(4):after, .storyline-v6.is-tracing.trace-leadership .storyline-v6-row article:nth-child(5):after {
  animation: storyTraceLine .72s ease both;
  transform-origin: top;
  background: var(--accent-gradient);
}.storyline-v6.is-tracing.trace-education .storyline-v6-row article:nth-child(2):not(.is-empty):before, .storyline-v6.is-tracing.trace-moving .storyline-v6-row article:nth-child(3):not(.is-empty):before, .storyline-v6.is-tracing.trace-trials .storyline-v6-row article:nth-child(4):not(.is-empty):before, .storyline-v6.is-tracing.trace-leadership .storyline-v6-row article:nth-child(5):not(.is-empty):before {
  animation: storyTraceDot .72s ease both;
  background: var(--accent-gradient);
}.storyline-v6-row article.is-empty {
  background: transparent;
}.storyline-v6-row article.is-empty strong {
  color: transparent;
}.story-v6-bio-band {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 20px;
  width: 100%;
  min-height: 92px;
  margin-top: 22px;
  padding: 18px 2px 12px;
  box-sizing: border-box;
  color: #111;
  background: #fff;
  border: 0;
}.story-v6-bio-band strong {
  display: block;
  color: #111;
  font-size: 24px;
  font-weight: 950;
  line-height: 1.05;
}.story-v6-bio-band span {
  display: block;
  margin-top: 9px;
  color: #222;
  font-size: 13px;
  font-weight: 850;
  line-height: 1.45;
}.story-v6-bio-band em {
  color: #555;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}.story-v6-card-strip {
  --story-year-w: 100px;
  --story-gap: 8px;
  position: relative;
  display: grid;
  grid-template-columns: var(--story-year-w) repeat(4, minmax(0, 1fr));
  align-items: stretch;
  gap: var(--story-gap);
  min-height: 0;
  margin-top: 18px;
  margin-bottom: 8px;
}.story-v6-card-strip a {
  display: grid;
  align-content: space-between;
  justify-self: stretch;
  width: auto;
  min-height: 112px;
  scroll-margin-top: 108px;
  padding: 16px 16px 14px;
  color: #111;
  text-align: left;
  text-decoration: none;
  border: 0;
  border-radius: 0;
  background: rgba(17,17,17,.035);
  box-sizing: border-box;
  transition: background-color .16s ease, box-shadow .16s ease, color .16s ease, transform .16s ease;
}.story-v6-card-strip a:nth-child(1) {
  grid-column: 2;
}.story-v6-card-strip a:nth-child(2) {
  grid-column: 3;
}.story-v6-card-strip a:nth-child(3) {
  grid-column: 4;
}.story-v6-card-strip a:nth-child(4) {
  grid-column: 5;
}.story-v6-card-strip a:hover, .story-v6-card-strip a:focus-visible, .story-v6-card-strip a.is-active, .story-v6-card-strip a.is-linked {
  background: rgba(175,0,0,.07);
  box-shadow: inset 0 0 0 1px rgba(175,0,0,.18);
  color: #111;
}.story-v6-card-strip a:target, .story-v6-card-strip a.is-linked {
  background: rgba(175,0,0,.12) !important;
  box-shadow: inset 0 0 0 2px rgba(175,0,0,.36), 0 12px 30px rgba(175,0,0,.10) !important;
}.story-v6-card-strip a:hover, .story-v6-card-strip a:focus-visible, .story-v6-card-strip a.is-active, .story-v6-card-strip a.is-linked {
  transform: translateY(-2px);
}.story-v6-card-strip span {
  color: var(--red);
  font-size: 16px;
  font-weight: 950;
  line-height: 1.2;
}.story-v6-card-strip a:hover span, .story-v6-card-strip a:focus-visible span, .story-v6-card-strip a.is-active span {
  color: var(--red);
}.story-v6-card-strip em {
  display: block;
  max-width: none;
  margin-top: 14px;
  color: #222;
  font-size: 11.5px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.45;
}.story-v6-card-strip a:hover em, .story-v6-card-strip a:focus-visible em, .story-v6-card-strip a.is-active em {
  color: #222;
}/* ── Trial horizontal axis (year = X, 3 lanes stacked) ── */
.trials-h {
  margin-top: 24px;
}.trials-h-scroll {
  overflow-x: auto;
  padding-bottom: 6px;
  cursor: grab;
  scrollbar-width: none;
  -ms-overflow-style: none;
  user-select: none;
}.trials-h-scroll::-webkit-scrollbar {
  display: none;
}.trials-h-scroll.dragging {
  cursor: grabbing;
}.trials-h-yearaxis, .trials-h-lane {
  display: grid;
  grid-template-columns: 116px repeat(32, minmax(72px, 1fr));
  align-items: stretch;
}.trials-h-span3 {
  grid-column: span 3;
}.trials-h-lifeline {
  margin-top: 6px;
  border-top: 0;
}.trials-h-lifeline .trials-h-axis-label {
  color: #111;
}/* life timeline 기간 막대 — 평소 빈 윤곽선, reveal 시 왼→우 그라데이션 채움 */
.trials-h-lifebar {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: transparent;
  background: transparent;
  border: 0;
  margin: 14px 2px;
  position: relative;
  border-radius: 2px;
  word-break: keep-all;
  overflow: hidden;
  isolation: isolate;
  transition: color .8s ease, border-color .8s ease;
}/* 채워지는 그라데이션 레이어 (텍스트 아래) — --fill 0~1로 진행도 제어 */
.trials-h-lifebar::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #a8a8a8 0%, #d2d2d2 100%);
  transform: scaleX(var(--fill, 0));
  transform-origin: left center;
  transition: none;
  z-index: -1;
}/* 화살표 꼬리 */
.trials-h-lifebar::after {
  content: "";
  position: absolute;
  right: -7px;
  top: 50%;
  transform: translateY(-50%);
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 7px solid transparent;
  transition: border-left-color .8s ease;
  z-index: 1;
}.trials-h-lifebar.label-visible {
  color: #555;
}.trials-h-lifebar.revealed::after {
  border-left-color: #a8a8a8;
}.trials-h-lifeline .lifebar-elementary {
  grid-column: 2 / 3;
}.trials-h-lifeline .lifebar-mid {
  grid-column: 3 / 7;
}.trials-h-lifeline .lifebar-high {
  grid-column: 7 / 10;
}.trials-h-lifeline .lifebar-univ {
  grid-column: 11 / 18;
}.trials-h-lifeline .lifebar-work {
  grid-column: 22 / 32;
}.trials-h-lifeline .lifebar-station {
  grid-column: 32 / 34;
}.trials-h-lifeline .trials-h-cell {
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
}/* 시련 셀: 평소 완전히 빈 칸 → reveal 클래스로 색+글씨 등장 */
.trials-h-cell:not(:empty):not(.life) {
  background: transparent;
  color: transparent;
  font-weight: 700;
  position: relative;
  overflow: hidden;
  transition: color .85s ease;
}.trials-h-cell:not(:empty):not(.life)::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scaleY(.72);
  transform-origin: center center;
  transition: opacity 1.25s ease, transform 1.25s cubic-bezier(.22, 1, .36, 1);
  pointer-events: none;
}/* Own World — 진한 파랑 */
.lane-strong .trials-h-cell:not(:empty):not(.life) {
  isolation: isolate;
  z-index: 0;
  transition: color 1.05s ease;
}.lane-strong .trials-h-cell:not(:empty):not(.life).is-box-visible {
  background: transparent;
}.lane-strong .trials-h-cell:not(:empty):not(.life)::before {
  background: var(--accent-gradient);
  transition-duration: 2.15s;
  z-index: -1;
}.lane-strong .trials-h-cell:not(:empty):not(.life).is-box-visible::before {
  opacity: 1;
  transform: scaleY(1);
}.lane-strong .trials-h-cell:not(:empty):not(.life).revealed {
  color: #fff;
}/* Outside / Connected World — 옅은 파랑 */
.lane-soft .trials-h-cell:not(:empty):not(.life).is-box-visible {
  background: rgba(175,0,0,.32);
}.lane-soft .trials-h-cell:not(:empty):not(.life).revealed {
  color: #fff;
}.trials-h-axis-label {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  font-size: 11px;
  font-weight: 900;
  color: var(--red);
  letter-spacing: .02em;
  position: sticky;
  left: 0;
  background: var(--panel, #fff);
  z-index: 2;
  border-right: 1px solid #111;
}.trials-h-year {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 2px;
  font-size: 10px;
  font-weight: 900;
  color: #111;
  border-bottom: 1px solid #111;
}.trials-h-yearaxis .trials-h-axis-label {
  border-bottom: 1px solid #111;
}.trials-h-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 10px 4px;
  min-height: 64px;
  font-size: 10px;
  line-height: 1.3;
  color: #333;
  border-right: 1px dotted rgba(20,20,20,.18);
  border-bottom: 1px dotted rgba(20,20,20,.18);
  word-break: keep-all;
}.trials-h-cell:empty::after {
  content: "·";
  color: rgba(0,0,0,.08);
}/* ── Leadership flow (최신순 연도별 역할 + 포트폴리오) ── */
.leadership-v6-grid {
  margin-top: 28px;
  display: grid;
  grid-template-columns: 52px 1.15fr 1fr 1.3fr 1.3fr;
  border-top: 1px solid rgba(20,20,20,.14);
  align-items: stretch;
}/* 헤더 셀 */
.lead-hcell {
  grid-row: 1;
  font-size: 9.5px !important;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #aaa !important;
  border-bottom: 1px solid rgba(20,20,20,.14);
  align-items: center;
}.lead-year {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  color: var(--red, #af0000);
  border-bottom: 1px solid rgba(20,20,20,.05);
  padding: 7px 0;
}.lead-hcell.lead-year {
  color: #aaa;
  justify-content: flex-start;
  padding-left: 4px;
}/* 셀 */
.lc {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 8px;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--sub, #333);
  word-break: keep-all;
  text-align: center;
  border-bottom: 1px solid rgba(20,20,20,.05);
}/* 단일 셀: 텍스트 왼쪽, 점은 오른쪽 끝 고정 */
.lc > .lc-text {
  flex: 0 1 auto;
  min-width: 0;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}.lc > .lead-pf-dots {
  margin-left: 0;
  justify-content: center;
}/* 병합 셀: 세로 가운데 + 좌측 옅은 구분선 */
.lc.merged {
  align-items: center;
  padding-left: 0;
  background: rgba(20,20,20,.012);
  flex-direction: column;
  justify-content: center;
}/* 점 슬롯이 있는 병합 셀: 텍스트 왼쪽, 슬롯 오른쪽 끝 고정 */
.lc.has-slots, .lc.merged.has-slots {
  flex-direction: row;
  align-items: stretch;
  justify-content: center;
  gap: 10px;
  padding: 0;
}.lc.has-slots .lc-text, .lc.merged.has-slots .lc-text {
  align-self: stretch;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  text-align: center;
}.leadership-v6-grid > .lc:not(.lead-hcell):not(.has-slots):not(.empty) {
  flex-direction: row;
  align-items: stretch;
  justify-content: center;
  gap: 10px;
  padding: 0;
}.leadership-v6-grid > .lc:not(.lead-hcell):not(.has-slots):not(.empty) > .lc-text {
  align-self: stretch;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
}.leadership-v6-grid > .lc:not(.lead-hcell):not(.has-slots):not(.empty)::after {
  content: "";
  flex: 0 0 56px;
  min-width: 56px;
  pointer-events: none;
}.leadership-v6-grid > .lc[style*="grid-column:3"]:not(.lead-hcell):not(.has-slots):not(.empty) {
  align-items: center;
  gap: 7px;
  padding: 9px 8px;
}.leadership-v6-grid > .lc[style*="grid-column:3"]:not(.lead-hcell):not(.has-slots):not(.empty) > .lc-text {
  align-self: auto;
  flex: 0 1 auto;
  width: 100%;
  padding: 0;
}.leadership-v6-grid > .lc[style*="grid-column:3"]:not(.lead-hcell):not(.has-slots):not(.empty)::after {
  content: none;
}/* 연도별 점 슬롯: 병합된 행 수만큼 균등 세로 분할 → 각 연도 행과 정렬 */
.pf-slots {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  align-self: stretch;
  width: auto;
  min-width: 56px;
  margin-left: auto;
}.pf-slot {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 0;
  padding: 0 12px;
  position: relative;
}/* 슬롯 사이 연도 구분 얇은 가로선 */
.pf-slot + .pf-slot::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  border-top: 1px dotted rgba(20,20,20,.12);
}.lc.empty { border-bottom: 1px solid rgba(20,20,20,.05); }.lc-text { min-width: 0; }/* hover 툴팁 */
.lc-text.has-tip {
  border-bottom: 1px dotted rgba(20,20,20,.3);
  cursor: help;
  position: relative;
  outline: none;
}.lc-text.has-tip::after {
  content: attr(data-tip);
  position: absolute;
  left: 0;
  bottom: calc(100% + 7px);
  z-index: 30;
  width: max-content;
  max-width: 240px;
  padding: 7px 10px;
  background: var(--ink, #1a1a1a);
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  text-align: left;
  font-size: 10.5px;
  font-weight: 500;
  line-height: 1.45;
  white-space: normal;
  border-radius: 5px;
  box-shadow: 0 4px 14px rgba(0,0,0,.18);
  opacity: 0;
  transform: translateY(4px);
  pointer-events: none;
  transition: opacity .15s, transform .15s;
}.lc-text.has-tip::before {
  content: "";
  position: absolute;
  left: 14px;
  bottom: calc(100% + 2px);
  z-index: 31;
  border: 5px solid transparent;
  border-top-color: var(--ink, #1a1a1a);
  opacity: 0;
  transition: opacity .15s;
  pointer-events: none;
}.lc-text.has-tip:hover::after, .lc-text.has-tip:focus::after { opacity: 1; transform: translateY(0); }.lc-text.has-tip:hover::before, .lc-text.has-tip:focus::before { opacity: 1; }/* 포트폴리오 점 */
.lc.pf-col {
  justify-content: flex-start;
  padding-right: 8px;
}.lead-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-gradient);
  border: 0;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform .12s, box-shadow .12s;
}.lead-dot:hover {
  transform: scale(1.5);
  box-shadow: 0 0 0 3px rgba(175,0,0,.16);
}

@media (max-width: 820px) {.leadership-v6-grid {
    grid-template-columns: 42px 1fr 1fr;
  }.lc { white-space: normal; }
}.education-v6-row.head > *, .leadership-v6-row.head > *, .trials-v6-row.head > * {
  min-height: 42px;
  color: #111;
  font-weight: 950;
  background: #fafafa;
}.education-v6-flow {
  margin-top: 28px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
}.education-v6-group {
  position: relative;
  min-height: 0;
  padding: 22px 24px 22px 28px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.54)),
    rgba(17,17,17,.035);
  box-sizing: border-box;
  overflow: hidden;
}.education-v6-group::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--accent-gradient);
  opacity: .9;
}.education-v6-group[aria-label="Unofficial education"]::before {
  background: #333;
  opacity: .55;
}.education-v6-group header {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px dotted rgba(20,20,20,.16);
}.education-v6-group header strong {
  color: var(--red);
  font-size: 16px;
  font-weight: 950;
  letter-spacing: -.025em;
  text-transform: uppercase;
}.education-v6-group[aria-label="Unofficial education"] header strong {
  color: #333;
}.education-v6-group header span {
  color: #555;
  font-size: 11px;
  font-weight: 850;
}.education-v6-list {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 10px;
  grid-auto-rows: 88px;
}.education-v6-item {
  position: relative;
  display: grid;
  grid-template-columns: 156px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  min-height: 88px;
  padding: 16px 16px 16px 18px;
  background: rgba(255,255,255,.76);
  box-shadow: inset 0 0 0 1px rgba(20,20,20,.06);
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}.education-v6-item.has-school-mark {
  padding-right: 112px;
}.education-v6-group[aria-label="Unofficial education"] .education-v6-item {
  padding-right: 112px;
}.education-v6-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent-gradient);
  box-shadow: 0 0 0 4px #fff;
  transform: translate(-50%, -50%);
}.education-v6-group[aria-label="Unofficial education"] .education-v6-item::before {
  background: #555;
}.education-v6-item:hover {
  transform: translateY(-2px);
  background: rgba(255,255,255,.95);
  box-shadow: inset 0 0 0 1px rgba(175,0,0,.16), 0 12px 24px rgba(0,0,0,.055);
}.education-v6-item:first-child {
  border-top: 0;
}.education-v6-period {
  color: var(--red);
  font-size: 12.5px;
  font-weight: 950;
  line-height: 1.25;
  letter-spacing: -.02em;
  white-space: nowrap;
}.education-v6-group[aria-label="Unofficial education"] .education-v6-period {
  color: #333;
}.education-v6-body {
  display: grid;
  grid-template-columns: minmax(360px, .86fr) minmax(220px, .48fr);
  align-items: center;
  column-gap: 28px;
  row-gap: 6px;
}.education-v6-title-row {
  grid-column: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}.education-v6-body h3 {
  min-width: 0;
  margin: 0;
  color: var(--red);
  font-size: 16px;
  line-height: 1.22;
  letter-spacing: -.055em;
}.education-v6-title-row h3 {
  font-size: 16px !important;
}.education-v6-degree {
  min-width: 0;
  color: var(--red);
  font-size: 16px;
  font-weight: 950;
  line-height: 1.22;
  letter-spacing: -.055em;
}.education-v6-group[aria-label="Unofficial education"] .education-v6-degree {
  color: #222;
}.education-v6-body p {
  margin: 0;
  color: #333;
  font-size: 13.5px;
  font-weight: 800;
  line-height: 1.45;
}.education-v6-school {
  grid-column: 2;
  display: block;
  color: #555 !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  white-space: nowrap;
  transition: color .18s ease, font-size .18s ease, letter-spacing .18s ease;
}.education-v6-item:hover .education-v6-school {
  color: #222 !important;
  font-size: 18px !important;
  letter-spacing: -.02em;
}.education-v6-logo {
  position: absolute;
  right: 16px;
  top: 50%;
  width: 72px;
  height: 72px;
  padding: 7px;
  object-fit: contain;
  box-sizing: border-box;
  border: 0;
  background: transparent;
  transform: translateY(-50%);
  box-shadow: none;
}.education-v6-logo.logo-seal {
  border-radius: 50%;
}.education-v6-logo.logo-animation {
  width: 82px;
  height: 58px;
  padding: 0;
  border-radius: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}.education-v6-group[aria-label="Unofficial education"] .education-v6-body h3 {
  color: #222;
}.education-v6-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  flex: 0 0 auto;
  align-items: center;
}.education-v6-tags span {
  padding: 3px 7px;
  border: 1px solid rgba(175,0,0,.18);
  color: rgba(175,0,0,.82);
  background: rgba(255,255,255,.58);
  font-size: 10px;
  font-weight: 900;
  line-height: 1.2;
}.education-v6-group[aria-label="Unofficial education"] .education-v6-tags span {
  border-color: rgba(20,20,20,.18);
  color: rgba(20,20,20,.72);
}.moving-v6-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 38%);
  gap: 24px;
  margin-top: 24px;
  align-items: stretch;
}.moving-v6-table {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3px;
  border: 0;
  overflow: visible;
  align-content: start;
}.moving-v6-table-head {
  display: grid;
  grid-template-columns: 104px minmax(0, .84fr) minmax(0, .84fr) minmax(0, .72fr);
  background: transparent;
  border-bottom: 1px solid rgba(20,20,20,.16);
}.moving-v6-table-head > * {
  padding: 4px 8px;
  border: 0;
  color: #666;
  font-size: 10px;
  font-weight: 950;
  text-align: left;
}.moving-v6-table button {
  position: relative;
  display: grid;
  grid-template-columns: 104px minmax(0, .84fr) minmax(0, .84fr) minmax(0, .72fr);
  column-gap: 0;
  row-gap: 0;
  width: 100%;
  min-height: 27px;
  border: 0;
  border-bottom: 1px solid rgba(20,20,20,.08);
  background: #fff;
  cursor: pointer;
  text-align: left;
  padding: 0;
  box-sizing: border-box;
}.moving-v6-table button::before {
  content: none;
}.moving-v6-table button::after {
  content: none;
}.moving-v6-table button > * {
  display: block;
  padding: 6px 8px;
  border: 0;
  word-break: keep-all;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  position: relative;
  z-index: 1;
}.moving-v6-table time {
  color: var(--red);
  font-size: 11px;
  font-weight: 950;
  align-self: center;
}.moving-v6-table span {
  color: #111;
  font-size: 10.5px;
  font-weight: 800;
  line-height: 1.25;
}.moving-v6-table span:empty::before {
  content: "";
}.moving-v6-table button span:nth-child(2) {
  color: rgba(175,0,0,.88);
}.moving-v6-table button span:nth-child(3) {
  color: #333;
}.moving-v6-table button span:nth-child(4) {
  color: #666;
  font-weight: 750;
}.moving-v6-table button.active {
  background: #fafafa;
  box-shadow: inset 3px 0 0 var(--red), inset 0 0 0 1px rgba(175,0,0,.12);
}.moving-v6-table button.active::before {
  content: none;
}.moving-v6-map {
  border: 0;
  background: #fff;
  padding: 22px;
  margin-top: 0;
  box-shadow: 0 10px 28px rgba(20,20,20,.08);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  box-sizing: border-box;
}.moving-v6-map-canvas {
  position: relative;
  width: min(100%, 440px);
  aspect-ratio: 240 / 309;
  height: auto;
  margin: clamp(54px, 20%, 92px) auto 0;
}.moving-v6-route {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}.moving-v6-route path {
  fill: none;
  stroke: rgba(175,0,0,.72);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 4 5;
}.moving-v6-route circle {
  fill: #fff;
  stroke: rgba(20,20,20,.55);
  stroke-width: 1.2;
}.moving-v6-map-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}.v6-place {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%);
  color: transparent;
  font-size: 0;
  font-weight: 850;
  pointer-events: none;
  opacity: 0;
}.v6-map-pin {
  position: absolute;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  box-shadow: 0 0 0 5px #fff;
  transition: left .35s ease, top .35s ease, opacity .2s ease;
}.v6-map-pin.residence {
  background: var(--accent-gradient);
}.v6-map-pin.activity {
  background: #111;
}.v6-map-pin.visible {
  opacity: 1;
}.moving-v6-caption {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 10px;
  padding-top: 14px;
  margin-top: 28px;
  border-top: 1px dotted rgba(20,20,20,.24);
}.moving-v6-caption div {
  display: grid;
  gap: 4px;
}.moving-v6-caption b {
  font-size: 11px;
  font-weight: 950;
}.moving-v6-caption div:first-child b {
  color: var(--red);
}.moving-v6-caption div:nth-child(2) b {
  color: #111;
}.moving-v6-caption span, .moving-v6-caption em {
  color: #555;
  font-size: 12px;
  line-height: 1.35;
  font-style: normal;
}

@media(max-width: 1040px) {.story-v6-head, .moving-v6-layout {
    grid-template-columns: 1fr;
  }.story-v6-card-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
  }.story-v6-card-strip a, .story-v6-card-strip a:nth-child(n) {
    position: static;
    grid-column: auto;
    justify-self: stretch;
    transform: none;
  }.story-v6-card-strip a:nth-child(n):hover, .story-v6-card-strip a:nth-child(n):focus-visible, .story-v6-card-strip a:nth-child(n).is-active {
    transform: translateY(-2px);
  }
}

@media(max-width: 720px) {.story-v6-frame {
    padding: 20px;
  }.story-v6-bio-band {
    grid-template-columns: 1fr;
    align-items: start;
    min-height: 0;
  }.story-v6-card-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }.story-v6-card-strip a {
    width: auto;
    min-height: 104px;
  }.moving-v6-table {
    grid-template-columns: 1fr;
  }.moving-v6-table button, .moving-v6-table-head {
    grid-template-columns: 84px minmax(0, .82fr) minmax(0, .82fr) minmax(0, .7fr);
  }.education-v6-flow {
    grid-template-columns: 1fr;
  }.education-v6-list {
    grid-auto-rows: auto;
  }.education-v6-item {
    grid-template-columns: 1fr;
    gap: 8px;
    min-height: 0;
    padding: 14px 14px 14px 18px;
  }.education-v6-body {
    grid-template-columns: 1fr;
    align-items: start;
    row-gap: 6px;
  }.education-v6-school {
    grid-column: 1;
    white-space: normal;
  }.education-v6-title-row {
    grid-column: 1;
    flex-wrap: wrap;
    align-items: flex-start;
  }.education-v6-item.has-school-mark {
    padding-right: 86px;
  }.education-v6-group[aria-label="Unofficial education"] .education-v6-item {
    padding-right: 14px;
  }.education-v6-logo {
    right: 12px;
    width: 54px;
    height: 54px;
    padding: 6px;
  }.education-v6-logo.logo-animation {
    width: 62px;
    height: 44px;
  }
}

@media(max-width: 420px) {.story-v6-card-strip a {
    padding: 14px;
  }.story-v6-card-strip em {
    display: none;
  }
}/* ═══════════ Archiving 탭 ═══════════ */
.archiving-wrap {
  width: 100%;
  max-width: none;
  margin: 0 auto;
  position: relative;
  padding: 0 0 40px;
  display: grid;
  gap: 34px;
  background: transparent;
}#taste {
  background: transparent;
}/* 블록 네비게이션 */
.arch-blocknav {
  position: -webkit-sticky;
  position: sticky;
  top: 12px;
  z-index: 20;
  display: inline-flex;
  gap: 6px;
  margin-bottom: 32px;
  padding: 6px;
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(20,20,20,.08);
  border-radius: 999px;
  flex-wrap: wrap;
  align-self: flex-start;
}.arch-blocknav-btn {
  display: inline-flex;
  align-items: center;
  padding: 7px 16px;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted, #777);
  text-decoration: none;
  border-radius: 999px;
  transition: background .15s, color .15s;
}.arch-blocknav-btn:hover { color: var(--ink, #111); }.arch-blocknav-btn.is-active {
  background: var(--accent-gradient);
  color: #fff;
}/* Story 탭 블록 네비 — 가운데 정렬, 줄바꿈 허용 */
.story-blocknav {
  margin: 0 auto 28px;
  width: max-content;
  max-width: 100%;
  flex-wrap: wrap;
  justify-content: center;
}/* 블록 공통 */
.arch-block {
  margin-bottom: 0;
  padding: 34px 38px 38px;
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(20,20,20,.10);
  box-shadow: 0 20px 50px rgba(0,0,0,.28), 0 6px 18px rgba(0,0,0,.18);
  scroll-margin-top: 80px;
}.arch-block-head {
  margin-bottom: 22px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--ink, #111);
}.arch-block-no {
  display: inline-block;
  font-size: 11px;
  font-weight: 900;
  color: var(--red, #af0000);
  letter-spacing: .08em;
  margin-bottom: 4px;
}.arch-block-head h2 {
  font-size: 26px;
  font-weight: 900;
  color: var(--ink, #111);
  margin: 0 0 4px;
  letter-spacing: -.01em;
}.arch-block-head p {
  font-size: 12.5px;
  color: var(--muted, #777);
  margin: 0;
}/* ── BLOCK 1: CV ── */
.arch-cv {
  border: 1px solid rgba(20,20,20,.1);
  border-radius: 10px;
  overflow: hidden;
}.arch-cv-row {
  display: grid;
  grid-template-columns: 120px 1fr;
  border-bottom: 1px solid rgba(20,20,20,.07);
}.arch-cv-row:last-of-type { border-bottom: 0; }.arch-cv-key {
  padding: 14px 16px;
  font-size: 11.5px;
  font-weight: 800;
  color: var(--muted, #777);
  background: rgba(20,20,20,.025);
  border-right: 1px solid rgba(20,20,20,.07);
}.arch-cv-val {
  padding: 14px 16px;
  font-size: 13px;
  color: var(--sub, #333);
  line-height: 1.5;
}.arch-cv-sub {
  font-size: 11px;
  color: var(--muted, #999);
  margin-left: 6px;
}.arch-cv-list {
  margin: 0;
  padding-left: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}.arch-cv-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: rgba(175,0,0,.03);
  border-top: 1px solid rgba(20,20,20,.07);
}.arch-cv-download {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: var(--accent-gradient);
  border-radius: 6px;
  text-decoration: none;
  transition: filter .15s;
}.arch-cv-download:hover { filter: brightness(1.1); }.arch-cv-note {
  font-size: 11px;
  color: var(--muted, #999);
}/* ── BLOCK 2: Portfolio ── */
.arch-pf-filters {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  max-width: 640px;
  gap: 8px;
  margin-bottom: 14px;
}.arch-pf-filter {
  width: 100%;
  min-width: 0;
  min-height: 34px;
  padding: 0 14px;
  font-size: 11.5px;
  font-weight: 700;
  font-family: inherit;
  color: var(--muted, #777);
  background: transparent;
  border: 1px solid rgba(20,20,20,.15);
  border-radius: 999px;
  cursor: pointer;
  transition: all .15s;
}.arch-pf-filter:hover { border-color: var(--red, #af0000); color: var(--red, #af0000); }.arch-pf-filter.is-active {
  background: var(--accent-gradient);
  border-color: var(--red, #af0000);
  color: #fff;
}.arch-pf-table {
  border-top: 1px solid var(--ink, #111);
}.arch-pf-yeargroup + .arch-pf-yeargroup { margin-top: 4px; }.arch-pf-year {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 6px 8px;
  font-size: 18px;
  font-weight: 900;
  color: var(--red, #af0000);
}.arch-pf-year-count {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted, #aaa);
}.arch-pf-head {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 12px;
  padding: 8px 12px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted, #aaa);
  border-bottom: 1px solid rgba(20,20,20,.1);
}.arch-pf-rowitem {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 12px;
  padding: 13px 12px;
  border-bottom: 1px solid rgba(20,20,20,.06);
  cursor: pointer;
  transition: background .12s;
  align-items: center;
}.arch-pf-rowitem:hover { background: rgba(175,0,0,.03); }.arch-pf-cat {
  font-size: 10.5px;
  font-weight: 800;
}.arch-pf-cat[data-cat="Plan"] { color: #2563eb; }.arch-pf-cat[data-cat="Strategy"] { color: #af0000; }.arch-pf-cat[data-cat="Operation"] { color: #059669; }.arch-pf-cat[data-cat="Communication"] { color: #d97706; }.arch-pf-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink, #111);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}.arch-pf-title-short {
  display: block;
  font-size: 11px;
  font-weight: 400;
  color: var(--muted, #999);
  margin-top: 2px;
}.arch-pf-to, .arch-pf-metric {
  font-size: 11.5px;
  color: var(--muted, #777);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}/* ── BLOCK 3: Essay ── */
.arch-essay-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin: 0 0 18px;
  padding: 0 0 14px;
  border-bottom: 1px dotted rgba(20,20,20,.18);
}.arch-essay-tag-filter {
  border: 0;
  background: transparent;
  color: #555;
  padding: 0;
  font: inherit;
  font-size: 13px;
  font-weight: 850;
  line-height: 1.35;
  cursor: pointer;
  letter-spacing: -.025em;
}.arch-essay-tag-filter:hover, .arch-essay-tag-filter.is-active {
  color: var(--red, #af0000);
}.arch-essay-nav {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: -4px 0 16px;
}.arch-essay-nav-btn {
  width: 100%;
  min-height: 32px;
  border: 1px solid rgba(20,20,20,.12);
  background: rgba(255,255,255,.44);
  color: #333;
  font: inherit;
  font-size: 11.5px;
  font-weight: 850;
  cursor: pointer;
  letter-spacing: -.025em;
}.arch-essay-nav-btn:hover, .arch-essay-nav-btn.is-active {
  border-color: rgba(20,20,20,.28);
  background: #fff;
  color: var(--red, #af0000);
}.arch-essay-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  width: 100%;
  max-width: 100%;
  overflow: visible;
}.arch-essay-cat {
  min-width: 0;
  overflow: visible;
  padding: 16px 16px 14px;
  border: 1px solid rgba(20,20,20,.10);
  background: rgba(255,255,255,.46);
}.arch-essay-cat + .arch-essay-cat { margin-top: 0; }.arch-essay-cat-head {
  font-size: 14px;
  font-weight: 900;
  color: var(--ink, #111);
  padding-bottom: 8px;
  margin-bottom: 4px;
  border-bottom: 1px solid rgba(20,20,20,.12);
}.arch-essay-board {
  max-height: 292px;
  overflow: hidden;
  cursor: grab;
  user-select: none;
  touch-action: pan-y;
}.arch-essay-board.dragging {
  cursor: grabbing;
}.arch-essay-item {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) minmax(0, 1.3fr) minmax(140px, .8fr);
  align-items: center;
  gap: 14px;
  padding: 12px 8px;
  border-bottom: 1px solid rgba(20,20,20,.06);
  cursor: pointer;
  transition: background .12s;
}.arch-essay-item:hover { background: rgba(175,0,0,.03); }.arch-essay-tag {
  display: none;
}.arch-essay-body { display: contents; }.arch-essay-title {
  min-width: 0;
  font-size: 13px;
  font-weight: 850;
  color: var(--ink, #111);
  margin-bottom: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}.arch-essay-summary {
  min-width: 0;
  font-size: 12px;
  font-weight: 500;
  color: #666;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}.arch-essay-meta {
  min-width: 0;
  display: flex;
  justify-content: flex-end;
}.arch-essay-date {
  color: #777;
  font-size: 11px;
  font-weight: 750;
  white-space: nowrap;
}.arch-essay-hashes {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 4px 9px;
  overflow: hidden;
}.arch-essay-hash {
  color: #666;
  font-size: 11px;
  font-weight: 750;
}.arch-essay-desc {
  display: none;
}/* ── BLOCK 4: End ── */
.arch-block-end {
  padding: 0;
  margin-bottom: 0;
  overflow: hidden;
  background: linear-gradient(180deg, #f4f1ec 0%, #ebe7e0 100%);
}.arch-end {
  text-align: center;
  padding: 48px 24px 32px;
}.arch-end-copy {
  font-size: clamp(26px, 3.2vw, 36px);
  font-weight: 800;
  color: var(--ink, #111);
  margin: 0 0 12px;
  letter-spacing: -.01em;
}.arch-end-sign {
  font-size: 13px;
  font-weight: 700;
  color: var(--red, #af0000);
  margin: 0 0 32px;
  letter-spacing: .04em;
  line-height: 1.7;
}.arch-end-byline {
  font-size: 11px;
  font-weight: 600;
  color: #b0b0b0;
  letter-spacing: .03em;
}.arch-end-meta {
  max-width: 620px;
  margin: 0;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 14px;
}.arch-end-meta-item {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 14px;
  font-size: 11px;
  line-height: 1.5;
}.arch-end-meta-key {
  font-weight: 800;
  color: var(--muted, #aaa);
}.arch-end-meta-val {
  color: var(--muted, #b3b3b3);
}.arch-end-meta-val a { color: var(--red, #af0000); text-decoration: none; }

@media (max-width: 760px) {.arch-pf-head { display: none; }.arch-pf-rowitem {
    grid-template-columns: 1fr;
    gap: 4px;
  }.arch-cv-row { grid-template-columns: 88px 1fr; }.arch-end-meta-item { grid-template-columns: 72px 1fr; }
}/* Final color pass: keep Contact/Links neutral, use blue for tab state */
.topbar-right-stack .inline-access .access-label, .topbar-right-stack .inline-access .access-link, .topbar-right-stack .inline-access .access-copy, .topbar-right-stack .inline-access .access-icon, .topbar-right-stack .inline-access .access-mark, .topbar-right-stack .inline-access .access-link.email .access-icon {
  color: #333 !important;
}.topbar-right-stack .inline-access .access-link:hover, .topbar-right-stack .inline-access .access-copy:hover, .topbar-right-stack .inline-access .access-link:hover .access-icon, .topbar-right-stack .inline-access .access-copy:hover .access-icon, .topbar-right-stack .inline-access .access-link:hover .access-mark, .topbar-right-stack .inline-access .access-copy:hover .access-mark {
  color: #111 !important;
}.topbar-section-tab:hover, .topbar-section-tab.active, .topbar-section-tab.tab.active, .topbar-section-nav .tab:hover, .topbar-section-nav .tab.active {
  color: var(--red) !important;
  background: transparent !important;
  box-shadow: none !important;
}.tab.active {
  background: var(--accent-gradient);
  color: #fff;
}.topbar-section-tab.active, .topbar-section-tab.tab.active, .topbar-section-nav .tab.active {
  background: transparent !important;
  font-weight: 750 !important;
}/* Keep Story/Archiving block tabs below the sticky top menu */
.panel.active .arch-blocknav {
  top: 104px !important;
}

@media(max-width:700px) {.panel.active .arch-blocknav {
    top: 12px !important;
  }
}/* Final opacity pass: make tab surfaces read as near-white, not glassy */
.topbar {
  background: linear-gradient(180deg, #f4f1ec 0%, #ebe7e0 100%) !important;
  backdrop-filter: none !important;
}.topbar-section-nav {
  background: transparent !important;
}.topbar-section-tab, .topbar-section-tab.tab, .topbar-section-nav .tab {
  background: transparent !important;
  color: rgba(40,38,35,.62) !important;
  border-color: transparent !important;
}.topbar-section-tab:hover, .topbar-section-tab.tab:hover, .topbar-section-nav .tab:hover {
  background: rgba(255,255,255,.45) !important;
  color: rgba(40,38,35,.85) !important;
}.topbar-section-tab.active, .topbar-section-tab.tab.active, .topbar-section-nav .tab.active {
  background: rgba(255,255,255,.78) !important;
  color: var(--red) !important;
  border-color: rgba(175,0,0,.18) !important;
  box-shadow: 0 2px 8px rgba(120,80,60,.10) !important;
}.panel.active .arch-blocknav {
  background: rgba(255,255,255,.97) !important;
  backdrop-filter: none !important;
}.arch-blocknav-btn {
  background: rgba(255,255,255,.92) !important;
}.arch-blocknav-btn:hover {
  background: #fff !important;
}.arch-blocknav-btn.is-active {
  background: var(--accent-gradient) !important;
  color: #fff !important;
}


/* ===== Color role pass: accent only for tabs and main block copy ===== */
.topbar-section-tab:hover,
.topbar-section-tab.active,
.topbar-section-tab.tab.active,
.topbar-section-nav .tab:hover,
.topbar-section-nav .tab.active {
  color: var(--red) !important;
}

#projects .section-head h2,
#projects .project-board-head h2,
#essay .essay-news-head h2,
#essay .essay-frame-head h2,
#story .story-v6-head h2,
#taste .arch-block-head h2 {
  color: var(--red) !important;
}

#projects .section-head p,
#projects .project-board-head p,
#essay .essay-news-head p,
#essay .essay-frame-head p,
#story .story-v6-head p,
#taste .arch-block-head p {
  color: #666 !important;
}

.axis h3,
.axis h3 span,
.axis-sub,
.phase strong,
.phase span,
.timeline-right b,
.project-card strong,
.project-card b,
.front strong,
.front b,
.hover b,
.essay-card strong,
.essay-card b,
.essay-card .hover b,
.storyline-v6-row strong,
.story-v6-bio-band strong,
.story-v6-card-strip span,
.education-v6-group header strong,
.education-v6-body h3,
.education-v6-title-row h3,
.moving-v6-table time,
.moving-v6-caption b,
.trials-h-year,
.trials-h-cell,
.lead-year,
.lc,
.arch-pf-title,
.arch-essay-title,
.arch-end-copy {
  color: var(--red, #af0000) !important;
}
.arch-end-sign {
  color: #8a8a8a !important;
}
.arch-end-byline {
  color: #b3b3b3 !important;
}
.arch-end-meta-key {
  color: #a8a8a8 !important;
}
.arch-end-meta-val {
  color: #b0b0b0 !important;
}
.arch-end-meta-val a {
  color: #2563a8 !important;
}

.axis p,
.phase small,
.front em,
.hover em,
.essay-card em,
.essay-card span,
.essay-card i,
.essay-card-tags small,
.essay-modal-tags span,
.essay-comment span,
.essay-reply span,
.storyline-v6-row > b,
.story-v6-bio-band span,
.story-v6-bio-band em,
.story-v6-card-strip em,
.education-v6-period,
.education-v6-school,
.education-v6-body p,
.education-v6-degree,
.education-v6-tags span,
.moving-v6-table span,
.moving-v6-caption span,
.moving-v6-caption em,
.trials-h-axis-label,
.lead-hcell,
.arch-block-no,
.arch-cv-key,
.arch-cv-sub,
.arch-cv-note,
.arch-pf-year,
.arch-pf-year-count,
.arch-pf-head,
.arch-pf-cat,
.arch-pf-title-short,
.arch-pf-to,
.arch-pf-metric,
.arch-essay-tag,
.arch-essay-desc {
  color: #666 !important;
}

.tag,
.asset-type,
.modal-kicker,
.modal-pill,
#essayModal .modal-kicker,
#essayModal .modal-pill {
  color: #555 !important;
}

.modal h2,
#essayModal .modal h2 {
  color: #111 !important;
}

.dot,
.lead-dot,
.arch-cv-download,
.arch-pf-filter.is-active {
  background: #333 !important;
  border-color: #333 !important;
  color: #fff !important;
}

.lane-event:hover .dot,
.lead-dot:hover {
  box-shadow: 0 0 0 5px #fff, 0 0 0 8px rgba(20,20,20,.22) !important;
}

.project-card:hover,
.essay-card:hover,
.arch-pf-rowitem:hover,
.arch-essay-item:hover {
  background: #eeeeee !important;
}

.arch-cv-actions,
.arch-pf-rowitem:hover,
.arch-essay-item:hover,
.education-v6-item:hover,
.moving-v6-table button.active {
  background-color: rgba(20,20,20,.035) !important;
}

.arch-pf-filter:hover {
  border-color: rgba(20,20,20,.34) !important;
  color: #111 !important;
}

.storyline-v6-years a:hover,
.storyline-v6-years a:focus-visible,
.storyline-v6-years a.is-active,
.storyline-v6-years button:hover,
.storyline-v6-years button:focus-visible,
.storyline-v6-years button.is-active {
  color: #111 !important;
}

/* ===== Body grayscale hierarchy: title / dark gray / mid gray / pale gray ===== */
#projectsSectionCompetence .axis h3,
#timeline .phase strong,
#timeline .phase strong *,
#projects .project-card strong,
#projects .project-card b,
#essay .essay-card strong,
#essay .essay-card b,
#story .storyline-v6-row strong,
#story .education-v6-body h3,
#story .moving-v6-table time,
#story .lead-year,
#story .lc,
#taste .arch-pf-title,
#taste .arch-essay-title {
  color: #111 !important;
  -webkit-text-fill-color: #111 !important;
}

#projectsSectionCompetence .axis-sub,
#timeline .phase span,
#timeline .skill-filter-btn,
#projects .project-card em,
#essay .essay-card em,
#essay .essay-card span,
#story .education-v6-school,
#story .education-v6-degree,
#story .moving-v6-table span,
#story .moving-v6-caption b,
#taste .arch-pf-year,
#taste .arch-pf-cat,
#taste .arch-essay-tag {
  color: #444 !important;
  -webkit-text-fill-color: #444 !important;
}

#projectsSectionCompetence .axis p,
#timeline .phase small,
#timeline .lane-label,
#timeline .year-header,
#projects .hover i,
#essay .essay-card-tags small,
#story .education-v6-period,
#story .education-v6-body p,
#story .education-v6-tags span,
#story .moving-v6-caption span,
#story .moving-v6-caption em,
#story .trials-h-axis-label,
#story .lead-hcell,
#taste .arch-pf-title-short,
#taste .arch-pf-to,
#taste .arch-pf-metric,
#taste .arch-essay-desc {
  color: #666 !important;
  -webkit-text-fill-color: #666 !important;
}

#timeline .skill-filter-label,
#taste .arch-pf-year-count,
#taste .arch-pf-head,
#taste .arch-cv-sub,
#taste .arch-cv-note {
  color: #999 !important;
  -webkit-text-fill-color: #999 !important;
}

#timeline .grid-event .dot,
#timeline .lead-dot,
#taste .arch-pf-filter.is-active,
#taste .arch-cv-download {
  background: #333 !important;
  background-image: none !important;
  border-color: #333 !important;
}

#timeline .grid-event:hover .dot,
#timeline .grid-event.skill-match .dot {
  box-shadow: 0 0 0 5px #fff, 0 0 0 8px rgba(20,20,20,.2) !important;
}

/* Portfolio emphasis and timeline active state */
#projects .project-card .front strong {
  color: #af0000 !important;
  -webkit-text-fill-color: #af0000 !important;
}

#timeline .timeline-row.is-revealing .phase strong,
#timeline .timeline-row.is-revealing .phase strong *,
#timeline .timeline-row.is-revealed-row .phase strong,
#timeline .timeline-row.is-revealed-row .phase strong * {
  color: #111 !important;
  -webkit-text-fill-color: #111 !important;
}

#timeline .phase:hover strong,
#timeline .phase:focus-visible strong,
#timeline .phase:hover strong *,
#timeline .phase:focus-visible strong * {
  color: #111 !important;
  -webkit-text-fill-color: #111 !important;
}

#timeline .timeline-row.is-revealing .phase span,
#timeline .timeline-row.is-revealed-row .phase span {
  color: #af0000 !important;
  -webkit-text-fill-color: #af0000 !important;
}

.section-jump-item:hover .section-jump-dot,
.section-jump-item.active .section-jump-dot {
  background: #af0000 !important;
  border-color: #af0000 !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,.75), 0 0 0 5px rgba(175,0,0,.12) !important;
}

#timeline .grid-event.js-open-project .dot,
#timeline .grid-event.js-open-project.is-revealed .dot,
#timeline .grid-event.js-open-project:hover .dot {
  background: #af0000 !important;
}

#timeline .grid-event.js-open-project:hover .dot {
  box-shadow: 0 0 0 5px #fff, 0 0 0 8px rgba(175,0,0,.34) !important;
}

#timeline .skill-filter-btn.locked,
body.skill-filter-locked #timeline .skill-filter-btn.active {
  color: #eeeeee !important;
  -webkit-text-fill-color: #eeeeee !important;
}

#storyV6Leadership .lead-dot.js-open-project,
#storyV6Leadership .story-project-dot.js-open-project {
  background: #af0000 !important;
  background-image: none !important;
  border-color: #af0000 !important;
}

#storyV6Leadership .lead-dot.js-open-project:hover,
#storyV6Leadership .story-project-dot.js-open-project:hover {
  background: #af0000 !important;
  background-image: none !important;
  border-color: #af0000 !important;
  box-shadow: 0 0 0 5px #fff, 0 0 0 8px rgba(175,0,0,.22) !important;
}

/* Times of Trial: boxes first, text second */
#story .trials-h-cell:not(:empty):not(.life):not(.revealed),
#story .trials-h-cell:not(:empty):not(.life).is-box-visible:not(.revealed) {
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}

#story .lane-strong .trials-h-cell:not(:empty):not(.life).revealed {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

#story .lane-soft .trials-h-cell:not(:empty):not(.life).revealed {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

/* Keep the first screen stable after tab switches */
.topbar {
  top: 18px !important;
}

.main-shell {
  margin-top: 24px !important;
}

.story-v6-head > div {
  align-self: end;
}

.story-v6-head .story-v6-head-copy {
  margin: 12px 0 0 !important;
  color: #333 !important;
  font-size: clamp(15px, 1.55vw, 21px) !important;
  line-height: 1.42 !important;
  font-weight: 760 !important;
  letter-spacing: -.045em !important;
  white-space: nowrap !important;
}

@media(max-width: 900px) {
  .story-v6-head .story-v6-head-copy {
    white-space: normal !important;
  }
}

.story-v6-head > .story-v6-head-note {
  align-self: end !important;
  justify-self: end !important;
  max-width: 430px !important;
  margin: 0 0 2px !important;
  color: #777 !important;
  font-size: 11.5px !important;
  line-height: 1.5 !important;
  font-weight: 400 !important;
  letter-spacing: -.02em !important;
  text-align: right !important;
}

/* Final topbar layout: search / tabs / contact-links in one row */
.topbar {
  display: grid !important;
  grid-template-columns: minmax(280px, 430px) minmax(360px, 1fr) max-content !important;
  align-items: center !important;
  gap: 18px !important;
  min-height: 82px !important;
  padding: 16px 24px !important;
}

.topbar-head-row {
  display: none !important;
}

.brand {
  width: 34px !important;
  min-width: 34px !important;
  gap: 0 !important;
}

.brand > span:not(.mark),
.brand b,
.brand span span {
  display: none !important;
}

.site-search {
  display: grid !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
}

.site-search-toggle {
  display: none !important;
}

.topbar-right-stack {
  display: contents !important;
}

.topbar-section-nav {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  align-items: center !important;
  min-width: 0 !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 10px !important;
  transform: none !important;
  background: transparent !important;
}

.topbar-section-nav::after {
  display: none !important;
}

.topbar-section-tab,
.topbar-section-tab.tab,
.topbar-section-nav .tab {
  height: 28px !important;
  min-height: 28px !important;
  padding: 0 10px !important;
}

.topbar-right-stack .inline-access {
  display: grid !important;
  grid-template-columns: 1fr !important;
  width: max-content !important;
  max-width: none !important;
  margin: 0 !important;
  justify-content: stretch !important;
  align-items: stretch !important;
  flex-wrap: nowrap !important;
  gap: 4px !important;
  overflow: visible !important;
  transform: none !important;
}

.topbar-right-stack .access-divider {
  display: none !important;
}

.topbar-right-stack .access-group {
  display: grid !important;
  grid-template-columns: 74px repeat(3, 30px) !important;
  align-items: center !important;
  justify-content: start !important;
  gap: 7px !important;
}

.topbar-right-stack .access-group:last-child {
  grid-template-columns: 74px repeat(2, 30px) !important;
}

.topbar-right-stack .access-label {
  display: inline-flex !important;
  min-width: 68px !important;
  margin: 0 !important;
  color: #333 !important;
  font-size: 10px !important;
  letter-spacing: .08em !important;
}

@media(max-width:1100px) {
  .topbar {
    grid-template-columns: minmax(240px, 1fr) minmax(320px, 1fr) max-content !important;
    align-items: start !important;
    gap: 10px !important;
  }
  .topbar-right-stack {
    display: contents !important;
  }
  .topbar-section-nav {
    min-width: 0 !important;
    width: 100% !important;
    flex: 0 0 auto !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    padding: 0 !important;
  }
  .topbar-right-stack .inline-access {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: max-content !important;
    justify-content: stretch !important;
    align-items: stretch !important;
    flex-wrap: nowrap !important;
    gap: 4px !important;
    overflow: visible !important;
  }
  .topbar-right-stack .access-label {
    display: inline-flex !important;
    min-width: 68px !important;
    margin: 0 !important;
    color: #333 !important;
    font-size: 10px !important;
    letter-spacing: .08em !important;
  }
  .topbar-right-stack .access-divider {
    display: none !important;
  }
  .topbar-right-stack .access-group {
    display: grid !important;
    grid-template-columns: 74px repeat(3, 30px) !important;
    align-items: center !important;
    justify-content: start !important;
    gap: 7px !important;
  }
  .topbar-right-stack .access-group:last-child {
    grid-template-columns: 74px repeat(2, 30px) !important;
  }
}

@media(max-width:700px) {
  .topbar {
    grid-template-columns: 1fr !important;
    gap: 7px !important;
    min-height: 0 !important;
    padding: 10px 14px !important;
  }
  .site-search {
    grid-column: 1 / -1 !important;
    grid-template-columns: 1fr 30px !important;
  }
  .site-search input,
  .site-search button {
    min-height: 30px !important;
  }
  .site-search-tags {
    display: none !important;
  }
  .topbar-right-stack {
    align-items: stretch !important;
    gap: 6px !important;
  }
  .topbar-section-nav {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
  .topbar-section-tab,
  .topbar-section-tab.tab,
  .topbar-section-nav .tab {
    height: 24px !important;
    min-height: 24px !important;
    padding: 0 4px !important;
    font-size: 10.5px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .topbar-right-stack .inline-access {
    display: grid !important;
    grid-template-columns: 1fr !important;
    justify-content: stretch !important;
    align-items: stretch !important;
    flex-wrap: nowrap !important;
    gap: 3px !important;
    overflow: visible !important;
  }
  .inline-access .access-label {
    display: inline-flex !important;
    min-width: 62px !important;
    margin: 0 !important;
    color: #333 !important;
    font-size: 10px !important;
    letter-spacing: .08em !important;
  }
  .inline-access .access-divider {
    display: none !important;
  }
  .access-group {
    display: grid !important;
    grid-template-columns: 68px repeat(3, 28px) !important;
    align-items: center !important;
    justify-content: start !important;
    gap: 6px !important;
  }
  .access-group:last-child {
    grid-template-columns: 68px repeat(2, 28px) !important;
  }
  .access-link,
  .access-copy {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
  }
  .access-icon {
    width: 20px !important;
    height: 20px !important;
  }
}

/* Header composition: search at left, tabs/contact-links stacked at right */
.topbar {
  display: grid !important;
  grid-template-columns: minmax(320px, 430px) minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 22px !important;
  min-height: 84px !important;
  padding: 16px 24px !important;
}

.site-search {
  display: grid !important;
  grid-template-columns: 1fr 30px !important;
  align-self: center !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
}

.site-search-tags {
  display: flex !important;
}

.topbar-right-stack {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: center !important;
  gap: 6px !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  transform: none !important;
}

.topbar-section-nav {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  align-items: center !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 0 7px !important;
  border-bottom: 1px dotted rgba(20,20,20,.20) !important;
  transform: none !important;
  background: transparent !important;
}

.topbar-section-nav::after {
  display: none !important;
}

.topbar-section-tab,
.topbar-section-tab.tab,
.topbar-section-nav .tab {
  height: 27px !important;
  min-height: 27px !important;
  padding: 0 8px !important;
  white-space: nowrap !important;
}

.topbar-right-stack .inline-access {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  align-items: center !important;
  justify-content: stretch !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  gap: 0 !important;
  flex-wrap: nowrap !important;
  overflow: visible !important;
  transform: none !important;
}

.topbar-right-stack .access-divider {
  display: inline-flex !important;
  justify-self: center !important;
}

.topbar-right-stack .access-group {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(14px, 2.2vw, 28px) !important;
}

.topbar-right-stack .access-group:last-child {
  gap: clamp(18px, 3vw, 40px) !important;
}

.topbar-right-stack .access-group:last-child .access-label {
  margin-right: clamp(-8px, -0.6vw, -2px) !important;
}

.topbar-right-stack .access-label {
  display: inline-flex !important;
  min-width: auto !important;
  margin: 0 4px 0 0 !important;
  color: #333 !important;
  font-size: 10.5px !important;
  letter-spacing: .10em !important;
}

@media(max-width:760px) {
  .topbar {
    grid-template-columns: minmax(168px, .92fr) minmax(210px, 1fr) !important;
    gap: 10px !important;
    min-height: 0 !important;
    padding: 10px 12px !important;
  }
  .site-search {
    grid-template-columns: 1fr 28px !important;
  }
  .site-search input,
  .site-search button {
    min-height: 28px !important;
  }
  .site-search-tags {
    display: flex !important;
    gap: 4px !important;
    padding-top: 4px !important;
  }
  .site-search-tags button {
    min-height: 19px !important;
    padding: 0 5px !important;
    font-size: 9.5px !important;
  }
  .topbar-right-stack {
    gap: 4px !important;
  }
  .topbar-section-nav {
    padding-bottom: 5px !important;
  }
  .topbar-section-tab,
  .topbar-section-tab.tab,
  .topbar-section-nav .tab {
    height: 22px !important;
    min-height: 22px !important;
    padding: 0 3px !important;
    font-size: 10px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .topbar-right-stack .inline-access {
    justify-content: flex-end !important;
    gap: 9px !important;
  }
  .topbar-right-stack .access-label {
    display: none !important;
  }
  .topbar-right-stack .access-divider {
    display: inline-flex !important;
    height: 18px !important;
  }
  .topbar-right-stack .access-group {
    gap: 5px !important;
  }
  .access-link,
  .access-copy {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
  }
  .access-icon {
    width: 18px !important;
    height: 18px !important;
  }
}

footer {
  color: rgba(245,245,245,.92);
  text-shadow: none;
}

footer .footer-desc {
  color: rgba(232,232,232,.82);
  text-shadow: none;
}

.arch-end-copy .arch-end-byline {
  display: inline-block;
  margin-left: 8px;
  font-style: normal;
  color: #777 !important;
  letter-spacing: .02em;
  vertical-align: middle;
}

/* Backend-connected portfolio uploads */
.project-uploads {
  display: grid;
  gap: 14px;
  margin-top: 14px;
}
.project-attachment-strip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
  padding: 16px 30px;
  background: rgba(255,255,255,.94);
  border-top: 1px solid rgba(20,20,20,.08);
  border-bottom: 1px solid rgba(20,20,20,.08);
}
.attachment-group {
  display: grid;
  grid-template-columns: 86px 1fr;
  align-items: stretch;
  gap: 12px;
  min-width: 0;
  padding: 10px;
  background: rgba(245,245,245,.94);
  border: 1px solid rgba(20,20,20,.1);
}
.attachment-group > b {
  color: var(--red);
  font-size: 12px;
  font-weight: 950;
  line-height: 1.25;
  display: flex;
  align-items: center;
}
.attachment-items {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: thin;
}
.attachment-thumb,
.attachment-file {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 54px;
  max-width: 280px;
  padding: 7px 9px;
  background: #fff;
  border: 1px solid rgba(20,20,20,.12);
  color: #111;
  text-decoration: none;
}
.attachment-thumb img {
  width: 64px;
  height: 42px;
  object-fit: cover;
  background: #eee;
}
.attachment-thumb span,
.attachment-file strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 850;
}
.attachment-file a,
.attachment-file em {
  flex: 0 0 auto;
  color: #111;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  text-decoration: none;
  border-left: 1px solid rgba(20,20,20,.16);
  padding-left: 8px;
}
.attachment-file a {
  color: #fff;
  background: #111;
  border-left: 0;
  padding: 7px 10px;
}
.project-attachment-empty {
  color: #777;
  font-size: 12px;
  font-weight: 750;
}
.project-upload-section {
  background: rgba(255,255,255,.58);
  border: 1px solid rgba(20,20,20,.1);
  padding: 14px;
}
.project-upload-section h4 {
  margin: 0 0 10px;
  color: #111;
  font-size: 14px;
  font-weight: 950;
  letter-spacing: -.035em;
}
.project-upload-images {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.project-upload-images figure {
  margin: 0;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(20,20,20,.08);
}
.project-upload-images img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.project-upload-images figcaption {
  padding: 8px 9px;
  color: #555;
  font-size: 12px;
  font-weight: 700;
}
.project-upload-files {
  display: grid;
  gap: 8px;
}
.project-file-empty {
  background: rgba(255,255,255,.46);
  border: 1px dashed rgba(20,20,20,.16);
  color: #666;
  padding: 12px 11px;
  font-size: 12px;
  font-weight: 750;
}
.frame.image-frame {
  width: min(100%, 620px);
  min-height: 320px;
  padding: 12px;
  display: grid;
  place-items: center;
  background: #f2f2f2;
}
.project-image-figure {
  width: 100%;
  margin: 0;
  display: grid;
  gap: 10px;
}
.project-image-figure a {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 280px;
  background: #fff;
  border: 1px dashed rgba(20,20,20,.18);
  text-decoration: none;
}
.project-image-figure.has-image a {
  border-style: solid;
}
.project-image-figure img {
  display: none;
  width: 100%;
  max-height: 360px;
  object-fit: contain;
}
.project-image-figure.has-image img {
  display: block;
}
.project-image-figure figcaption {
  width: 100%;
  min-height: 22px;
  color: #777;
  font-size: 12px;
  font-weight: 850;
  text-align: center;
}
.asset-text-panel {
  display: grid;
  gap: 6px;
  background: rgba(255,255,255,.7);
  border-top: 1px solid rgba(20,20,20,.08);
  padding: 13px 16px;
  text-align: left;
}
.asset-text-panel .asset-type {
  justify-self: start;
}
.asset-text-panel .asset-title {
  font-size: 20px;
}
.asset-text-panel .asset-desc {
  margin: 0;
}
.project-file-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(20,20,20,.08);
  padding: 10px 11px;
}
.project-file-card strong,
.project-file-card span {
  display: block;
}
.project-file-card strong {
  color: #111;
  font-size: 13px;
  font-weight: 900;
}
.project-file-card span {
  margin-top: 2px;
  color: #666;
  font-size: 11px;
}
.project-file-card a,
.project-file-card em {
  flex: 0 0 auto;
  color: #111;
  border: 1px solid rgba(20,20,20,.18);
  padding: 6px 9px;
  text-decoration: none;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}
.project-file-card a:hover {
  background: #111;
  color: #fff;
}
@media(max-width:700px) {
  .project-attachment-strip {
    grid-template-columns: 1fr;
    padding: 10px 14px;
  }
  .attachment-group {
    grid-template-columns: 48px 1fr;
  }
  .project-upload-images {
    grid-template-columns: 1fr;
  }
  .project-file-card {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media(max-width:1020px) {
  #projectModal .gallery {
    order: -1;
  }
  #projectModal .info {
    order: 1;
  }
  #projectModal .viewer-main {
    min-height: 260px;
    padding: 16px;
  }
  #projectModal .asset-preview-image {
    max-height: 300px;
  }
}

/* ===== Portfolio modal v2: document sheet + image-first gallery ===== */
#projectModal .modal {
  max-width: 1040px !important;
  inset: 28px 28px 20px !important;
  background: rgba(250,250,250,.96) !important;
  border: 1px solid rgba(20,20,20,.18) !important;
  box-shadow: 0 34px 110px rgba(0,0,0,.42) !important;
  grid-template-rows: auto auto 1fr !important;
}

#projectModal .project-modal-top {
  display: grid !important;
  grid-template-columns: minmax(230px, .82fr) minmax(320px, 1.35fr) 44px;
  align-items: start;
  gap: 24px;
  padding: 28px 34px 18px !important;
  background: #fff !important;
  border-bottom: 0 !important;
}

#projectModal .modal-kicker {
  color: #555 !important;
  margin-bottom: 6px;
}

#projectModal .modal h2 {
  color: #111;
  font-size: clamp(28px, 3vw, 42px);
  letter-spacing: -.06em;
}

#projectModal .project-overview-block {
  padding-top: 7px;
}

#projectModal .project-overview-block b {
  display: block;
  color: #111;
  font-size: 14px;
  font-weight: 950;
  margin-bottom: 4px;
}

#projectModal .project-overview-block .lead {
  margin: 0;
  color: #333;
  font-size: 14px;
  line-height: 1.55;
}

#projectModal .project-attachment-strip {
  display: block;
  padding: 0 34px 12px;
  background: #fff;
  border: 0;
}

#projectModal .project-attachment-empty {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  color: #777;
  font-size: 11px;
  font-weight: 850;
}

#projectModal .project-sheet {
  display: block !important;
  min-height: 0;
  overflow: auto;
  padding: 0 34px 30px;
  background: #fff !important;
}

#projectModal .project-facts {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr 2fr 2fr;
  grid-template-areas:
    "period work metric role tags"
    "short short short short outcome";
  gap: 10px;
  padding: 0 !important;
  background: transparent !important;
}

#projectModal .fact-period { grid-area: period; }
#projectModal .fact-workduration { grid-area: work; }
#projectModal .fact-metric { grid-area: metric; }
#projectModal .fact-role { grid-area: role; }
#projectModal .fact-tags { grid-area: tags; }
#projectModal .fact-short { grid-area: short; }
#projectModal .fact-outcome { grid-area: outcome; }

#projectModal .info-card {
  min-height: 64px;
  padding: 13px 14px !important;
  background: #fff !important;
  border: 2px solid #17384f !important;
}

#projectModal .info-card h3 {
  margin-bottom: 5px;
  color: #111 !important;
  font-size: 12px;
  letter-spacing: -.02em;
}

#projectModal .info-card p {
  color: #222;
  font-size: 13px;
  line-height: 1.45;
}

#projectModal .tags {
  margin-top: 0;
  gap: 5px;
}

#projectModal .tag {
  min-height: 22px;
  background: #efefef;
  color: #333;
  border: 1px solid rgba(20,20,20,.1);
  font-size: 11px;
}

#projectModal .skill-tag {
  color: #af0000;
}

#projectModal .project-gallery-sheet {
  padding: 10px 0 0 !important;
  background: transparent !important;
}

#projectModal .gallery-head {
  display: none;
}

#projectModal .viewer {
  background: transparent !important;
  overflow: visible;
}

#projectModal .viewer-main {
  min-height: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

#projectModal .frame.image-frame {
  position: relative;
  width: 100% !important;
  min-height: 430px !important;
  padding: 22px 48px !important;
  display: grid;
  place-items: center;
  background: #fff !important;
  border: 2px solid #17384f;
}

#projectModal .project-image-figure {
  max-width: 820px;
  width: 100%;
}

#projectModal .project-image-figure a {
  min-height: 360px !important;
  background: #fff !important;
  border: 0 !important;
}

#projectModal .project-image-figure img {
  max-height: 520px !important;
  object-fit: contain;
}

#projectModal .project-image-figure figcaption {
  color: #555;
  font-size: 12px;
  font-weight: 850;
}

#projectModal .gallery-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 34px;
  height: 54px;
  border: 1px solid rgba(20,20,20,.18);
  background: rgba(255,255,255,.88);
  color: #111;
  cursor: pointer;
  font-size: 34px;
  line-height: 1;
  font-weight: 300;
}

#projectModal .gallery-nav.prev { left: 10px; }
#projectModal .gallery-nav.next { right: 10px; }
#projectModal .gallery-nav:hover {
  background: #111;
  color: #fff;
}
#projectModal .gallery-nav:disabled {
  opacity: .18;
  pointer-events: none;
}

#projectModal .asset-text-panel {
  grid-template-columns: 190px 1fr;
  align-items: center;
  gap: 0;
  margin-top: 12px;
  padding: 0 !important;
  background: #14647f !important;
  border: 0 !important;
  color: #fff;
}

#projectModal .asset-text-panel .asset-type,
#projectModal .asset-text-panel .asset-title {
  min-height: 38px;
  display: flex;
  align-items: center;
  padding: 0 13px;
}

#projectModal .asset-text-panel .asset-type {
  background: #14647f !important;
  color: #fff !important;
  font-size: 13px;
  justify-self: stretch;
}

#projectModal .asset-text-panel .asset-title {
  background: #14647f;
  border-left: 2px solid rgba(255,255,255,.8);
  color: #fff;
  font-size: 15px;
  font-weight: 900;
}

#projectModal .asset-text-panel .asset-desc {
  grid-column: 1 / -1;
  max-width: none;
  margin: 0;
  padding: 10px 13px;
  background: #fff;
  border: 1px solid rgba(20,20,20,.16);
  border-top: 0;
  color: #333;
  font-size: 13px;
}

#projectModal .thumbs {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  padding: 10px 0 0 !important;
  background: transparent !important;
}

#projectModal .thumb {
  min-height: 56px;
  background: #fff !important;
  border: 2px solid #17384f;
  text-align: center;
}

#projectModal .thumb b {
  color: #111 !important;
}

#projectModal .thumb.active,
#projectModal .thumb:hover {
  background: #f2f2f2 !important;
  box-shadow: inset 0 0 0 2px rgba(175,0,0,.18) !important;
}

#projectModal .project-uploads-panel {
  margin-top: 10px;
}

#projectModal .project-upload-section {
  padding: 0;
  background: transparent;
  border: 0;
}

#projectModal .project-upload-section h4 {
  display: flex;
  align-items: center;
  min-height: 38px;
  margin: 0;
  padding: 0 13px;
  background: #14647f;
  color: #fff;
}

#projectModal .project-upload-files {
  gap: 0;
}

#projectModal .project-file-card {
  min-height: 44px;
  background: #fff;
  border: 1px solid rgba(20,20,20,.16);
  border-top: 0;
}

#projectModal .project-file-card a {
  background: #111;
  color: #fff;
}

@media(max-width: 900px) {
  #projectModal .modal {
    inset: 10px !important;
  }

  #projectModal .project-modal-top {
    grid-template-columns: 1fr 42px;
  }

  #projectModal .project-overview-block {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  #projectModal .project-facts {
    grid-template-columns: 1fr;
    grid-template-areas:
      "period"
      "metric"
      "role"
      "tags"
      "short"
      "outcome";
  }

  #projectModal .frame.image-frame {
    min-height: 300px !important;
    padding: 18px 38px !important;
  }

  #projectModal .project-image-figure a {
    min-height: 240px !important;
  }

  #projectModal .asset-text-panel {
    grid-template-columns: 1fr;
  }

  #projectModal .asset-text-panel .asset-title {
    border-left: 0;
    border-top: 1px solid rgba(255,255,255,.7);
  }

  #projectModal .thumbs {
    grid-template-columns: 1fr;
  }
}

/* ===== Portfolio modal v3: site-tone cleanup ===== */
#projectModal .modal {
  background: rgba(255,255,255,.97) !important;
  border: 0 !important;
  box-shadow: 0 36px 110px rgba(0,0,0,.34) !important;
}

#projectModal .project-modal-top,
#projectModal .project-attachment-strip,
#projectModal .project-sheet {
  background: rgba(255,255,255,.96) !important;
}

#projectModal .project-modal-top {
  border-bottom: 1px dotted rgba(20,20,20,.18) !important;
}

#projectModal .modal-kicker,
#projectModal .project-overview-block b {
  color: #777 !important;
}

#projectModal .modal h2 {
  color: #111 !important;
}

#projectModal .project-overview-block .lead,
#projectModal .info-card p,
#projectModal .asset-text-panel .asset-desc {
  color: #333 !important;
}

#projectModal .project-facts {
  grid-template-columns: 1fr 1.2fr 2.2fr 1.55fr;
  gap: 12px;
}

#projectModal .info-card {
  border: 1px solid rgba(20,20,20,.14) !important;
  background: rgba(250,250,250,.78) !important;
  box-shadow: none !important;
}

#projectModal .info-card h3 {
  color: #777 !important;
}

#projectModal .fact-metric {
  min-width: 0;
}

#projectModal .compact-tags {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-top: 0;
}

#projectModal .tag,
#projectModal .skill-tag,
#projectModal .team-position-chip {
  min-height: 25px;
  padding: 0 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(245,245,245,.92) !important;
  border: 1px solid rgba(20,20,20,.10) !important;
  color: #666 !important;
  font-size: 11px;
  font-weight: 850;
  white-space: nowrap;
}

#projectModal .skill-tag {
  color: var(--red) !important;
}

#projectModal .fact-tags .tags {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

#projectModal .team-position-chip.active {
  background: #111 !important;
  border-color: #111 !important;
  color: #fff !important;
}

#projectModal .frame.image-frame {
  border: 0 !important;
  background: rgba(246,246,246,.78) !important;
  box-shadow: inset 0 0 0 1px rgba(20,20,20,.08);
}

#projectModal .project-image-figure a {
  background: rgba(255,255,255,.72) !important;
}

#projectModal .gallery-nav {
  border: 1px solid rgba(20,20,20,.10);
  background: rgba(255,255,255,.76);
  color: #555;
}

#projectModal .gallery-nav:hover {
  background: #111;
  color: #fff;
}

#projectModal .asset-text-panel {
  grid-template-columns: 170px 1fr;
  background: transparent !important;
}

#projectModal .asset-text-panel.is-empty {
  display: none !important;
}

#projectModal .asset-text-panel .asset-type,
#projectModal .asset-text-panel .asset-title {
  background: rgba(245,245,245,.92) !important;
  color: #333 !important;
  border: 1px solid rgba(20,20,20,.10) !important;
}

#projectModal .asset-text-panel .asset-title {
  border-left: 0 !important;
}

#projectModal .asset-text-panel .asset-desc {
  background: rgba(255,255,255,.86) !important;
  border: 1px solid rgba(20,20,20,.10) !important;
  border-top: 0 !important;
}

#projectModal .asset-text-panel.no-desc .asset-desc {
  display: none;
}

#projectModal .thumbs {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

#projectModal .thumb {
  min-height: 74px;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(20,20,20,.12) !important;
  background: rgba(255,255,255,.76) !important;
}

#projectModal .thumb-image-wrap,
#projectModal .thumb-image-wrap img {
  display: block;
  width: 100%;
  height: 100%;
}

#projectModal .thumb-image-wrap img {
  object-fit: cover;
}

#projectModal .thumb.active,
#projectModal .thumb:hover {
  box-shadow: inset 0 0 0 2px var(--red) !important;
  background: rgba(255,255,255,.96) !important;
}

#projectModal .project-upload-section h4 {
  background: transparent !important;
  color: #777 !important;
  border-top: 1px dotted rgba(20,20,20,.18);
  border-bottom: 1px dotted rgba(20,20,20,.18);
}

#projectModal .project-upload-files {
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
  padding-top: 10px;
}

#projectModal .project-file-card {
  min-height: 38px;
  justify-content: center;
  background: rgba(250,250,250,.78) !important;
  border: 1px solid rgba(20,20,20,.10) !important;
}

#projectModal .project-file-card a,
#projectModal .project-file-card em {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  min-width: 88px;
  padding: 0 12px;
  border: 0;
  background: #111 !important;
  color: #fff !important;
  font-size: 11px;
  font-weight: 900;
  text-decoration: none;
  font-style: normal;
}

#projectModal .project-file-card em {
  background: rgba(20,20,20,.08) !important;
  color: #666 !important;
}

@media(max-width: 900px) {
  #projectModal .project-facts {
    grid-template-columns: 1fr;
  }

  #projectModal .compact-tags,
  #projectModal .fact-tags .tags {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #projectModal .thumbs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ===== Portfolio modal v4: lighter project facts + image-first balance ===== */
#projectModal .project-facts {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) !important;
  grid-template-areas:
    "period role"
    "metric tags"
    "short outcome" !important;
  column-gap: 58px !important;
  row-gap: 14px !important;
  padding: 8px 26px 18px !important;
}

#projectModal .info-card {
  min-height: 0 !important;
  padding: 0 !important;
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  background: transparent !important;
  border: 0 !important;
}

#projectModal .info-card h3 {
  margin: 0 !important;
  color: #111 !important;
  font-size: 15px !important;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: -.04em;
}

#projectModal .info-card p,
#projectModal .info-card .tags {
  margin: 0 !important;
}

#projectModal .info-card p {
  display: inline-block;
  width: fit-content;
  max-width: 100%;
  padding: 6px 11px;
  background: rgba(248,248,248,.76);
  color: #333 !important;
  font-size: 12px !important;
  line-height: 1.45;
  font-weight: 850;
}

#projectModal .fact-short,
#projectModal .fact-outcome {
  grid-template-columns: 108px minmax(0, 1fr);
}

#projectModal .compact-tags,
#projectModal .fact-tags .tags {
  display: flex !important;
  flex-wrap: nowrap;
  gap: 8px !important;
  min-width: 0;
}

#projectModal .tag,
#projectModal .skill-tag,
#projectModal .team-position-chip {
  min-width: 78px;
  min-height: 26px !important;
  background: rgba(250,250,250,.78) !important;
  border: 1px solid rgba(20,20,20,.10) !important;
  color: #555 !important;
}

#projectModal .team-position-chip.active {
  background: #111 !important;
  color: #fff !important;
  border-color: #111 !important;
}

#projectModal .project-gallery-sheet {
  padding-top: 2px !important;
}

#projectModal .frame.image-frame {
  min-height: 470px !important;
  padding: 18px 54px !important;
  background: rgba(248,248,248,.66) !important;
  box-shadow: inset 0 0 0 1px rgba(20,20,20,.06) !important;
}

#projectModal .project-image-figure {
  max-width: 900px;
}

#projectModal .project-image-figure a {
  min-height: 390px !important;
  cursor: default !important;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}

#projectModal .project-image-figure figcaption {
  margin-top: 8px;
  color: #333 !important;
}

#projectModal .asset-text-panel {
  margin-top: 8px;
}

#projectModal .asset-text-panel .asset-type,
#projectModal .asset-text-panel .asset-title,
#projectModal .asset-text-panel .asset-desc {
  border-color: rgba(20,20,20,.08) !important;
  background: rgba(250,250,250,.72) !important;
}

#projectModal .asset-text-panel.is-empty {
  display: none !important;
}

#projectModal .project-image-figure img,
#projectModal .thumb-image-wrap img {
  user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}

#projectModal .thumbs {
  padding-top: 12px !important;
  border-bottom: 1px dotted rgba(20,20,20,.16);
  padding-bottom: 14px !important;
}

#projectModal .thumb {
  border: 1px solid rgba(20,20,20,.10) !important;
  background: rgba(255,255,255,.62) !important;
}

@media(max-width: 900px) {
  #projectModal .project-facts {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "period"
      "metric"
      "role"
      "tags"
      "short"
      "outcome" !important;
    padding: 4px 0 16px !important;
    row-gap: 12px !important;
  }

  #projectModal .info-card {
    grid-template-columns: 92px minmax(0, 1fr);
  }

  #projectModal .compact-tags,
  #projectModal .fact-tags .tags {
    flex-wrap: wrap;
  }

  #projectModal .frame.image-frame {
    min-height: 310px !important;
    padding: 16px 40px !important;
  }
}

/* ===== Hero v3: slogan / planner / name / latin layout ===== */
.portfolio-hero {
  display: grid !important;
  grid-template-columns: 1fr !important;
  place-items: center !important;
  text-align: center !important;
  min-height: 100vh !important;
  padding: clamp(78px, 10vh, 120px) max(7vw, 54px) clamp(76px, 9vh, 110px) !important;
}

.portfolio-hero .portfolio-intro-copy {
  width: min(100%, 980px) !important;
  max-width: 980px !important;
  display: grid !important;
  grid-template-rows: auto auto auto;
  row-gap: clamp(70px, 9vh, 108px);
  justify-self: center !important;
  align-self: center !important;
  text-align: center !important;
}

.portfolio-hero .hero-role-copy {
  margin: 0 auto !important;
  max-width: 940px !important;
  color: rgba(255,255,255,.92) !important;
  font-size: clamp(24px, 2.65vw, 36px) !important;
  line-height: 1.25 !important;
  font-weight: 900 !important;
  letter-spacing: -.055em;
  text-shadow: 0 2px 10px rgba(0,0,0,.24);
}

.portfolio-hero .hero-middle {
  width: min(100%, 760px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(260px, 1fr);
  align-items: end;
  column-gap: clamp(58px, 8vw, 126px);
  text-align: left;
}

.portfolio-hero .hero-planner {
  align-self: end;
  color: #fff;
  text-align: left;
}

.portfolio-hero .hero-planner span {
  display: block;
  color: rgba(255,255,255,.84);
  font-size: clamp(20px, 2.1vw, 28px);
  line-height: 1.1;
  font-weight: 850;
  letter-spacing: -.055em;
}

.portfolio-hero .hero-planner strong {
  display: block;
  margin-top: 6px;
  color: #fff;
  font-size: clamp(48px, 5.4vw, 72px);
  line-height: .95;
  font-weight: 950;
  letter-spacing: -.055em;
  text-shadow: 0 2px 14px rgba(0,0,0,.23);
}

.portfolio-hero .portfolio-intro-name {
  margin: 0 !important;
  padding: 0 !important;
  justify-self: end !important;
  align-self: end !important;
  transform: none !important;
  display: block !important;
  text-align: center !important;
  opacity: 1 !important;
}

.portfolio-hero .portfolio-intro-name .kr {
  display: block !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  font-size: clamp(54px, 5.8vw, 76px) !important;
  line-height: .95 !important;
  font-weight: 950 !important;
  letter-spacing: .18em !important;
  text-indent: .18em;
  text-shadow: 0 2px 14px rgba(0,0,0,.23) !important;
}

.portfolio-hero .portfolio-intro-name .en {
  display: block !important;
  width: 100% !important;
  margin-top: 16px !important;
  color: rgba(255,255,255,.82) !important;
  font-size: clamp(21px, 2.1vw, 29px) !important;
  line-height: 1 !important;
  font-weight: 760 !important;
  letter-spacing: .22em !important;
  text-align: center !important;
  text-shadow: none !important;
}

.portfolio-hero .hero-latin {
  text-align: center;
}

.portfolio-hero .hero-latin h2,
.portfolio-hero .portfolio-intro-copy h2 {
  margin: 0 auto !important;
  max-width: none !important;
  color: rgba(255,255,255,.96) !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: rgba(255,255,255,.96) !important;
  -webkit-text-stroke: 0 !important;
  filter: none !important;
  font-size: clamp(22px, 2.2vw, 31px) !important;
  line-height: 1.08 !important;
  font-weight: 950 !important;
  letter-spacing: -.045em !important;
}

.portfolio-hero .hero-latin .hero-trans {
  margin: 8px auto 0 !important;
  color: rgba(255,255,255,.68) !important;
  font-size: clamp(15px, 1.45vw, 20px) !important;
  line-height: 1.2 !important;
  font-weight: 500 !important;
  letter-spacing: .02em;
}

@media(max-width: 760px) {
  .portfolio-hero {
    padding: 78px 26px 74px !important;
  }

  .portfolio-hero .portfolio-intro-copy {
    row-gap: 56px;
  }

  .portfolio-hero .hero-role-copy {
    font-size: clamp(22px, 7vw, 30px) !important;
    text-align: left;
  }

  .portfolio-hero .hero-middle {
    width: 100%;
    grid-template-columns: 1fr;
    row-gap: 42px;
    text-align: left;
  }

  .portfolio-hero .portfolio-intro-name {
    justify-self: start !important;
    text-align: left !important;
  }

  .portfolio-hero .portfolio-intro-name .kr,
  .portfolio-hero .portfolio-intro-name .en {
    text-align: left !important;
    text-indent: 0;
  }
}

/* ===== Hero v4: centered manifesto stack ===== */
.portfolio-hero .portfolio-intro-copy {
  width: min(100%, 820px) !important;
  max-width: 820px !important;
  row-gap: clamp(56px, 7vh, 82px) !important;
}

.portfolio-hero .hero-role-copy {
  display: grid;
  gap: clamp(24px, 3.3vh, 38px);
  margin: 0 auto !important;
  color: rgba(255,255,255,.93) !important;
  font-size: clamp(25px, 2.55vw, 35px) !important;
  line-height: 1.22 !important;
  font-weight: 920 !important;
  letter-spacing: -.055em;
  text-align: center !important;
}

.portfolio-hero .hero-role-copy span {
  display: block;
}

.portfolio-hero .hero-middle {
  width: min(100%, 760px) !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  justify-items: center;
  row-gap: clamp(56px, 7.2vh, 88px);
  margin: 0 auto !important;
  text-align: center !important;
}

.portfolio-hero .hero-planner {
  text-align: center !important;
}

.portfolio-hero .hero-planner span {
  display: none !important;
}

.portfolio-hero .hero-planner strong {
  margin: 0 !important;
  color: #fff !important;
  font-size: clamp(34px, 3.55vw, 48px) !important;
  line-height: 1.05 !important;
  font-weight: 950 !important;
  letter-spacing: -.055em !important;
  text-shadow: 0 2px 14px rgba(0,0,0,.22) !important;
}

.portfolio-hero .portfolio-intro-name {
  justify-self: center !important;
  text-align: center !important;
}

.portfolio-hero .portfolio-intro-name .kr {
  font-size: clamp(68px, 7.4vw, 102px) !important;
  letter-spacing: .15em !important;
  text-indent: .15em;
  line-height: .95 !important;
}

.portfolio-hero .portfolio-intro-name .en {
  margin-top: 20px !important;
  color: rgba(255,255,255,.88) !important;
  font-size: clamp(30px, 3.05vw, 42px) !important;
  letter-spacing: -.02em !important;
  font-weight: 860 !important;
}

.portfolio-hero .hero-latin {
  display: none !important;
}

@media(max-width: 760px) {
  .portfolio-hero .portfolio-intro-copy {
    width: 100% !important;
    row-gap: 48px !important;
  }

  .portfolio-hero .hero-role-copy {
    font-size: clamp(22px, 6.2vw, 29px) !important;
    text-align: center !important;
  }

  .portfolio-hero .hero-middle {
    row-gap: 46px;
  }

  .portfolio-hero .portfolio-intro-name {
    justify-self: center !important;
  }

  .portfolio-hero .portfolio-intro-name .kr,
  .portfolio-hero .portfolio-intro-name .en {
    text-align: center !important;
  }

  .portfolio-hero .portfolio-intro-name .kr {
    text-indent: .12em;
    letter-spacing: .12em !important;
    font-size: clamp(56px, 15vw, 76px) !important;
  }

  .portfolio-hero .portfolio-intro-name .en {
    font-size: clamp(25px, 7vw, 34px) !important;
  }
}

/* ===== Hero v5: translucent copy + outlined planner ===== */
.portfolio-hero .portfolio-intro-copy {
  width: min(100%, 900px) !important;
  max-width: 900px !important;
  row-gap: clamp(54px, 6.5vh, 76px) !important;
}

.portfolio-hero .hero-role-copy {
  gap: 0 !important;
  color: rgba(255,255,255,.68) !important;
  font-size: clamp(25px, 2.55vw, 35px) !important;
  line-height: 1.24 !important;
  font-weight: 900 !important;
  text-shadow: 0 2px 12px rgba(0,0,0,.24);
}

.portfolio-hero .hero-planner strong {
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  -webkit-text-stroke: .85px rgba(255,255,255,.92) !important;
  text-shadow:
    0 2px 10px rgba(0,0,0,.30),
    0 0 18px rgba(255,255,255,.10) !important;
  font-size: clamp(38px, 3.9vw, 54px) !important;
  letter-spacing: -.04em !important;
}

.portfolio-hero .portfolio-intro-name .kr {
  font-size: clamp(72px, 7.8vw, 108px) !important;
}

.portfolio-hero .portfolio-intro-name .en {
  margin-top: 22px !important;
  font-size: clamp(31px, 3.15vw, 44px) !important;
}

@media(max-width: 760px) {
  .portfolio-hero .hero-role-copy {
    font-size: clamp(21px, 6vw, 28px) !important;
    line-height: 1.3 !important;
  }

  .portfolio-hero .hero-planner strong {
    font-size: clamp(32px, 8vw, 44px) !important;
    -webkit-text-stroke-width: .65px !important;
  }
}

/* ===== Hero v6: soften planner and name weight ===== */
.portfolio-hero .hero-planner strong {
  color: rgba(226,226,226,.72) !important;
  -webkit-text-fill-color: rgba(226,226,226,.72) !important;
  -webkit-text-stroke: 0 !important;
  text-shadow:
    0 2px 10px rgba(0,0,0,.34),
    0 0 20px rgba(255,255,255,.10) !important;
}

.portfolio-hero .portfolio-intro-name .kr {
  color: rgba(255,255,255,.76) !important;
  -webkit-text-fill-color: rgba(255,255,255,.76) !important;
  font-size: clamp(58px, 6.4vw, 86px) !important;
  font-weight: 900 !important;
  letter-spacing: .14em !important;
  text-indent: .14em;
  text-shadow: 0 2px 12px rgba(0,0,0,.26) !important;
}

.portfolio-hero .portfolio-intro-name .en {
  color: rgba(232,232,232,.68) !important;
  font-size: clamp(25px, 2.45vw, 34px) !important;
  font-weight: 760 !important;
  letter-spacing: .02em !important;
}

@media(max-width: 760px) {
  .portfolio-hero .portfolio-intro-name .kr {
    font-size: clamp(48px, 13vw, 64px) !important;
  }

  .portfolio-hero .portfolio-intro-name .en {
    font-size: clamp(22px, 6vw, 29px) !important;
  }
}

/* ===== Hero v7: emphasized ghost planner + wider rhythm ===== */
.portfolio-hero .portfolio-intro-copy {
  row-gap: clamp(62px, 7.8vh, 92px) !important;
}

.portfolio-hero .hero-middle {
  row-gap: clamp(136px, 15vh, 190px) !important;
}

.portfolio-hero .hero-planner strong {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: .18em .58em .24em;
  background: rgba(255,255,255,.64);
  color: rgba(0,0,0,.86) !important;
  -webkit-text-fill-color: rgba(0,0,0,.86) !important;
  font-size: clamp(44px, 4.45vw, 62px) !important;
  font-weight: 950 !important;
  text-shadow: none !important;
}

.portfolio-hero .portfolio-intro-name .kr {
  color: rgba(255,255,255,.94) !important;
  -webkit-text-fill-color: rgba(255,255,255,.94) !important;
  text-shadow:
    0 2px 10px rgba(0,0,0,.26),
    0 0 12px rgba(255,255,255,.10) !important;
}

.portfolio-hero .portfolio-intro-name .en {
  color: rgba(255,255,255,.54) !important;
  -webkit-text-fill-color: rgba(255,255,255,.54) !important;
  -webkit-text-stroke: 0 !important;
  text-shadow: 0 2px 8px rgba(0,0,0,.18) !important;
}

@media(max-width: 760px) {
  .portfolio-hero .portfolio-intro-copy {
    row-gap: 52px !important;
  }

  .portfolio-hero .hero-middle {
    row-gap: 104px !important;
  }

  .portfolio-hero .hero-planner strong {
    font-size: clamp(34px, 8.7vw, 48px) !important;
  }
}

/* ===== Story: four-card section strip restored ===== */
.story-v6-card-strip a:nth-child(3) {
  grid-column: 4 !important;
}

.story-v6-card-strip a:nth-child(4) {
  grid-column: 5 !important;
}

/* ===== Final Background: image fades into darker gray base ===== */
html {
  background: linear-gradient(180deg, #727272 0%, #898989 28%, #c7c7c7 66%, #f5f5f5 100%) !important;
}

body {
  position: relative !important;
  isolation: isolate !important;
  overflow-x: hidden !important;
  background-color: #727272 !important;
  background-image: linear-gradient(180deg, #727272 0%, #898989 28%, #c7c7c7 66%, #f5f5f5 100%) !important;
}

body::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: clamp(760px, 106vw, 1420px) !important;
  z-index: 0 !important;
  display: block !important;
  background-image: var(--bg-image) !important;
  background-repeat: no-repeat !important;
  background-position: center top !important;
  background-size: 170% auto !important;
  opacity: .96 !important;
  pointer-events: none !important;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 58%, rgba(0,0,0,.68) 76%, rgba(0,0,0,.20) 91%, transparent 100%) !important;
  mask-image: linear-gradient(180deg, #000 0%, #000 58%, rgba(0,0,0,.68) 76%, rgba(0,0,0,.20) 91%, transparent 100%) !important;
}

.page {
  position: relative !important;
  z-index: 1 !important;
}

.modal-root {
  z-index: 100 !important;
}

/* ===== Portfolio modal v5: cleaner facts, red chips, in-modal image zoom ===== */
#projectModal .project-modal-top {
  grid-template-columns: minmax(0, 1fr) 44px !important;
  gap: 18px !important;
  padding-top: 18px !important;
  padding-bottom: 4px !important;
}

#projectModal .project-title-block {
  display: flex !important;
  align-items: baseline !important;
  gap: 22px !important;
}

#projectModal .project-title-block .modal-kicker {
  flex: 0 0 auto !important;
  margin: 0 !important;
}

#projectModal .project-title-block h2 {
  margin: 0 !important;
}

#projectModal .close {
  margin-top: -6px !important;
}

#projectModal .project-overview-block b,
#projectModal .info-card h3 {
  font-size: 12px !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
  letter-spacing: -.035em !important;
}

#projectModal .project-overview-block .lead {
  font-size: 12px !important;
  line-height: 1.48 !important;
}

#projectModal .project-attachment-strip {
  display: none !important;
}

#projectModal .project-sheet {
  padding-top: 4px !important;
}

#projectModal .project-facts {
  column-gap: 44px !important;
  row-gap: 12px !important;
  padding: 4px 18px 14px !important;
}

#projectModal .info-card {
  grid-template-columns: 94px minmax(0, 1fr) !important;
  gap: 10px !important;
}

#projectModal .fact-short,
#projectModal .fact-outcome {
  grid-template-columns: 94px minmax(0, 1fr) !important;
}

#projectModal .info-card p {
  padding: 5px 9px !important;
  font-size: 11px !important;
  line-height: 1.42 !important;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

#projectModal .compact-tags,
#projectModal .fact-tags .tags {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  flex-wrap: nowrap !important;
  gap: 6px !important;
  width: 100%;
}

#projectModal .tag,
#projectModal .skill-tag,
#projectModal .team-position-chip {
  min-width: 0 !important;
  max-width: 100%;
  min-height: 24px !important;
  padding: 0 8px !important;
  font-size: 10px !important;
  line-height: 1.15 !important;
  white-space: normal !important;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

#projectModal .skill-tag {
  background: rgba(250,250,250,.78) !important;
  border-color: rgba(20,20,20,.10) !important;
  color: #555 !important;
}

#projectModal .skill-tag.active,
#projectModal .team-position-chip.active {
  background: var(--red) !important;
  border-color: var(--red) !important;
  color: #fff !important;
}

#projectModal .frame.image-frame {
  min-height: 520px !important;
  padding: 20px 56px !important;
}

#projectModal .project-image-figure a {
  min-height: 440px !important;
  cursor: zoom-in !important;
  pointer-events: auto !important;
}

#projectModal .project-image-figure img {
  max-height: 620px !important;
}

#projectModal.image-zoomed .frame.image-frame {
  position: fixed !important;
  inset: 58px 86px !important;
  z-index: 145 !important;
  min-height: auto !important;
  padding: 24px 82px !important;
  background: rgba(250,250,250,.98) !important;
  box-shadow: 0 28px 95px rgba(0,0,0,.38), inset 0 0 0 1px rgba(20,20,20,.08) !important;
  overflow: hidden !important;
  align-items: center !important;
}

#projectModal.image-zoomed .project-image-figure {
  max-width: min(1080px, calc(100vw - 260px)) !important;
  width: 100% !important;
  min-width: 0 !important;
}

#projectModal.image-zoomed .project-image-figure a {
  display: grid !important;
  place-items: center !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: calc(100vh - 190px) !important;
  cursor: zoom-out !important;
  overflow: hidden !important;
}

#projectModal.image-zoomed .project-image-figure img {
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: calc(100vh - 210px) !important;
  display: block !important;
  margin: 0 auto !important;
  transform: scale(var(--project-image-zoom, 1.08)) !important;
  transform-origin: center center !important;
  transition: transform .12s ease-out !important;
}

#projectModal.image-zoomed .gallery-nav {
  position: fixed !important;
  top: 50% !important;
  z-index: 170 !important;
  background: rgba(255,255,255,.92) !important;
  color: #111 !important;
}

#projectModal.image-zoomed .gallery-nav.prev {
  left: 28px !important;
}

#projectModal.image-zoomed .gallery-nav.next {
  right: 28px !important;
}

#projectModal.image-zoomed .close {
  position: relative !important;
  z-index: 160 !important;
}

@media(max-width: 900px) {
  #projectModal .project-modal-top {
    grid-template-columns: 1fr 42px !important;
  }

  #projectModal .project-facts,
  #projectModal .info-card,
  #projectModal .fact-short,
  #projectModal .fact-outcome {
    grid-template-columns: 1fr !important;
  }

  #projectModal .frame.image-frame {
    min-height: 360px !important;
    padding: 18px 42px !important;
  }

  #projectModal .project-image-figure a {
    min-height: 300px !important;
  }

  #projectModal.image-zoomed .frame.image-frame {
    inset: 18px !important;
    padding: 18px 42px !important;
  }
}

/* ===== Portfolio cards: backend-synced thumbnail layer ===== */
#projects .project-card {
  position: relative !important;
  overflow: hidden !important;
}

#projects .project-card .front,
#projects .project-card .hover {
  position: relative !important;
  z-index: 2 !important;
}

#projects .project-card-thumb {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: .48;
  filter: grayscale(.62) contrast(.98) saturate(1.02);
  transform: scale(1.02);
  transition: opacity .22s ease, filter .22s ease, transform .22s ease;
  pointer-events: none;
}

#projects .project-card.has-project-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(255,255,255,.48);
  pointer-events: none;
}

#projects .project-card.has-project-thumb:hover .project-card-thumb {
  opacity: .68;
  filter: grayscale(.12) contrast(1.08) saturate(1.16);
  transform: scale(1.05);
}

#projects .project-card.has-project-thumb:hover::after {
  background: rgba(244,244,244,.30);
}

/* ===== Portfolio modal v6: compact two-column summary layout ===== */
#projectModal .project-facts {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0, 0.52fr) minmax(0, 0.52fr) minmax(0, 1fr) !important;
  grid-template-areas:
    "period work lead"
    "role role short"
    "tags tags short"
    "metric metric outcome" !important;
  column-gap: 32px !important;
  grid-auto-rows: minmax(32px, auto) !important;
  row-gap: 6px !important;
  padding: 6px 16px 12px !important;
}

#projectModal .fact-workduration { grid-area: work !important; }

#projectModal .fact-lead {
  grid-area: lead;
}

#projectModal .project-facts::before {
  content: "";
  position: absolute;
  top: 6px;
  bottom: 12px;
  left: 53.5%;
  border-left: 1px dotted rgba(20,20,20,.28);
}

#projectModal .info-card {
  display: grid !important;
  grid-template-columns: 100px minmax(0, 1fr) !important;
  align-items: center !important;
  min-height: 32px !important;
  gap: 10px !important;
  padding: 0 !important;
  border-bottom: 0 !important;
}

#projectModal .fact-short,
#projectModal .fact-outcome,
#projectModal .fact-lead {
  align-content: start !important;
  grid-template-columns: 86px minmax(0, 1fr) !important;
  padding-top: 0 !important;
}

#projectModal .fact-short {
  align-content: center !important;
  align-items: center !important;
  min-height: 78px !important;
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

#projectModal .fact-short h3 {
  padding-top: 0 !important;
}

#projectModal .fact-short p {
  min-height: 62px !important;
  align-items: center !important;
}

#projectModal .fact-outcome {
  min-height: 32px !important;
}

#projectModal .info-card h3 {
  font-size: 11px !important;
  font-weight: 750 !important;
  color: #111 !important;
  align-self: center !important;
  justify-self: center !important;
  text-align: center !important;
  line-height: 1.18 !important;
}

#projectModal .info-card p {
  width: 100% !important;
  background: rgba(248,248,248,.66) !important;
  min-height: 26px !important;
  display: inline-flex !important;
  align-items: center !important;
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}

#projectModal .fact-lead {
  min-height: 30px !important;
}

#projectModal .fact-lead p {
  display: flex !important;
  padding: 4px 8px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#projectModal .fact-short p {
  display: block !important;
  min-height: 62px !important;
  max-height: 62px !important;
  padding: 7px 8px !important;
  white-space: normal !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  text-overflow: clip !important;
  line-height: 1.42 !important;
  word-break: keep-all !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(20,20,20,.22) transparent;
}

#projectModal .fact-short p::-webkit-scrollbar {
  width: 5px;
}

#projectModal .fact-short p::-webkit-scrollbar-thumb {
  background: rgba(20,20,20,.22);
}

#projectModal .compact-tags,
#projectModal .fact-tags .tags {
  align-items: center !important;
}

#projectModal .tag,
#projectModal .skill-tag,
#projectModal .team-position-chip {
  min-height: 24px !important;
}

/* ===== Dashboard featured project from admin ===== */
.recent-content h4 {
  color: #151515 !important;
}

.recent-meta dd#dashboardRecentTags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.recent-tag {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  background: rgba(20,20,20,.055);
  color: #333;
  font-size: 10.5px;
  font-weight: 700;
}

.recent-tag.muted {
  color: #888;
  font-weight: 500;
}

/* 여러 featured 카드(최대 3개) 스택 — Claude 추가 */
.recent-item {
  padding: 0 0 18px;
  margin: 0 0 18px;
  border-bottom: 1px solid rgba(40,40,40,.12);
}
.recent-item:last-child {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: none;
}
.recent-item h4 {
  color: #151515;
  margin: 0 0 10px;
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: -.04em;
  font-weight: 800;
}
.recent-item h4 em {
  color: #b5121b;
  font-style: normal;
  font-weight: 700;
  font-size: 15px;
  margin-left: 4px;
}
.recent-item .recent-meta { margin-bottom: 0; }
.recent-item .recent-meta dd {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.recent-empty {
  margin: 0;
  color: #888;
  font-size: 12px;
  line-height: 1.7;
  letter-spacing: -.03em;
}

/* 메모 허니팟: 사람 눈에 안 보이게(봇만 채움) — Claude 추가 */
.memo-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.memo-status {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  color: #2a7d2a;
  letter-spacing: -.02em;
}

/* ===== Front v1: notice line, mobile header fit, visible timeline points ===== */
.portfolio-hero .hero-planner strong {
  background: rgba(255,255,255,.48) !important;
}

.site-notice-line {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  height: 20px;
  margin-top: -2px;
  overflow: hidden;
  color: rgba(45,45,45,.72);
  border-top: 1px dotted rgba(20,20,20,.12);
}

.site-notice-line span {
  flex: 0 0 auto;
  color: var(--red);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.site-notice-line p {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 760;
  letter-spacing: -.03em;
}

.timeline-staged .grid-event.js-open-project,
.timeline-staged .grid-event.js-open-project.is-revealed,
body.skill-filtering .timeline-staged .grid-event.js-open-project:not(.is-revealed) {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  filter: none !important;
}

.timeline-staged .phase {
  cursor: default !important;
}

@media(max-width: 760px) {
  .topbar {
    grid-template-columns: 1fr !important;
    gap: 9px !important;
    padding: 14px 16px !important;
  }

  .site-search {
    width: 100% !important;
    min-width: 0 !important;
    grid-template-columns: minmax(0, 1fr) 28px !important;
  }

  .site-search input {
    min-width: 0 !important;
    width: 100% !important;
  }

  .topbar-right-stack {
    width: 100% !important;
    min-width: 0 !important;
  }

  .topbar-section-nav {
    width: 100% !important;
    min-width: 0 !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  .topbar-section-tab,
  .topbar-section-tab.tab,
  .topbar-section-nav .tab {
    min-width: 0 !important;
    padding: 0 3px !important;
    font-size: clamp(9px, 2.45vw, 10px) !important;
    letter-spacing: -.055em !important;
  }

  .site-notice-line {
    width: 100%;
    height: 19px;
  }
}
.memo-status.is-error { color: #b5121b; }

/* ===== 에세이 본문 서식 표시 (Claude 추가) ===== */
.essay-modal-body h2 {
  font-size: clamp(20px, 2.4vw, 26px);
  letter-spacing: -.04em;
  margin: 1.4em 0 .5em;
  color: #1a1a1a;
}
.essay-modal-body h3 {
  font-size: clamp(17px, 2vw, 20px);
  letter-spacing: -.03em;
  margin: 1.2em 0 .4em;
  color: #222;
}
.essay-modal-body strong { font-weight: 800; color: #111; }
.essay-modal-body em { font-style: italic; }
.essay-modal-body u { text-decoration: underline; }
.essay-modal-body blockquote {
  margin: 1.2em 0;
  padding: .6em 1.2em;
  border-left: 3px solid var(--accent, #af0000);
  color: #555;
  font-style: italic;
}
.essay-modal-body ul, .essay-modal-body ol {
  margin: 1em 0;
  padding-left: 1.4em;
}
.essay-modal-body li { margin: .3em 0; line-height: 1.7; }
.essay-modal-body hr {
  border: none;
  border-top: 1px solid rgba(40,40,40,.18);
  margin: 2em 0;
}
.essay-modal-body img {
  max-width: 100%;
  height: auto;
  margin: 1.2em 0;
  border-radius: 2px;
}

/* ===== 에세이 카드 대표이미지 배경 (Claude 추가, #essay로 우선순위 확보) ===== */
#essay .essay-card.has-cover,
.essay-card.has-cover {
  position: relative;
  background-image: var(--essay-cover) !important;
  background-size: cover !important;
  background-position: center !important;
  overflow: hidden;
}
#essay .essay-card.has-cover::after,
.essay-card.has-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,10,12,.28) 0%, rgba(10,10,12,.74) 100%);
  z-index: 0;
}
#essay .essay-card.has-cover .front,
#essay .essay-card.has-cover .hover {
  position: relative;
  z-index: 1;
}
#essay .essay-card.has-cover strong,
#essay .essay-card.has-cover .front strong {
  color: #fff !important;
  text-shadow: 0 1px 8px rgba(0,0,0,.55);
}
#essay .essay-card.has-cover .front em,
#essay .essay-card.has-cover .front .essay-card-tags small {
  color: rgba(255,255,255,.9) !important;
}
#essay .essay-card.has-cover .essay-card-tags small {
  background: rgba(255,255,255,.2) !important;
  border-color: rgba(255,255,255,.32) !important;
  color: #fff !important;
}

/* ===== Front v2: notice rail below header menu + softer hero planner glass ===== */
.portfolio-hero .hero-planner strong {
  background: rgba(255,255,255,.72) !important;
  border: 1px solid rgba(255,255,255,.78) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.22),
    0 10px 26px rgba(0,0,0,.08) !important;
  color: rgba(0,0,0,.78) !important;
  -webkit-text-fill-color: rgba(0,0,0,.78) !important;
  backdrop-filter: blur(1px) saturate(108%);
}

.topbar {
  align-items: start !important;
}

.site-notice-line {
  grid-column: 1 / -1 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 20px !important;
  margin: -2px 0 0 !important;
  padding: 5px 0 0 !important;
  overflow: hidden !important;
  border-top: 1px dotted rgba(20,20,20,.18) !important;
  color: rgba(45,45,45,.72) !important;
}

.site-notice-line[hidden] {
  display: none !important;
}

.site-notice-line span {
  flex: 0 0 auto !important;
  color: var(--red) !important;
  font-size: 10px !important;
  font-weight: 950 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
}

.site-notice-line p {
  min-width: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: rgba(40,40,40,.70) !important;
  font-size: 11px !important;
  font-weight: 760 !important;
  letter-spacing: -.03em !important;
}

@media(max-width: 760px) {
  .site-notice-line {
    height: 19px !important;
    margin-top: 0 !important;
    padding-top: 4px !important;
  }
}

/* ===== Front v3: footer legibility + notice glass rail + deeper page gradient ===== */
html {
  background: linear-gradient(180deg, #5f5f5f 0%, #747474 30%, #b5b5b5 68%, #f2f2f2 100%) !important;
}

body {
  background-color: #5f5f5f !important;
  background-image: linear-gradient(180deg, #5f5f5f 0%, #747474 30%, #b5b5b5 68%, #f2f2f2 100%) !important;
}

.site-notice-line {
  min-height: 23px !important;
  height: auto !important;
  margin-top: 2px !important;
  padding: 5px 12px 4px !important;
  background: rgba(255,255,255,.58) !important;
  border-top: 1px dotted rgba(20,20,20,.16) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.34) !important;
  backdrop-filter: blur(5px) saturate(112%);
}

.site-notice-line p {
  color: rgba(25,25,25,.78) !important;
}

footer {
  max-width: 1240px;
  margin: 26px auto 0 !important;
  padding: 0 24px;
  color: #444 !important;
  text-shadow: none !important;
  line-height: 1.55;
}

footer span {
  color: #444 !important;
}

footer .footer-desc {
  color: #555 !important;
}

@media(max-width: 760px) {
  .site-notice-line {
    padding: 5px 9px 4px !important;
  }

  footer {
    padding: 0 14px;
  }
}

/* ===== Front v4: mobile background extends through the header area ===== */
@media(max-width: 760px) {
  html {
    background: linear-gradient(180deg, #101010 0%, #181818 42%, #4b4141 72%, #efefef 100%) !important;
  }

  body {
    background-color: #101010 !important;
    background-image: linear-gradient(180deg, #101010 0%, #181818 42%, #4b4141 72%, #efefef 100%) !important;
  }

  body::before {
    display: block !important;
    content: "" !important;
    height: clamp(980px, 260vw, 1420px) !important;
    background-image: var(--bg-image) !important;
    background-position: center top !important;
    background-size: auto clamp(1040px, 282vw, 1380px) !important;
    opacity: .98 !important;
    -webkit-mask-image: linear-gradient(
      180deg,
      #000 0%,
      #000 66%,
      rgba(0,0,0,.86) 78%,
      rgba(0,0,0,.42) 91%,
      transparent 100%
    ) !important;
    mask-image: linear-gradient(
      180deg,
      #000 0%,
      #000 66%,
      rgba(0,0,0,.86) 78%,
      rgba(0,0,0,.42) 91%,
      transparent 100%
    ) !important;
  }
}

/* ===== Front v5: same deep image-to-gradient background on desktop and mobile ===== */
html {
  background: linear-gradient(180deg, #101010 0%, #1a1a1a 26%, #4b4141 48%, #efefef 70%) !important;
}

body {
  background-color: #101010 !important;
  background-image: linear-gradient(180deg, #101010 0%, #1a1a1a 26%, #4b4141 48%, #efefef 70%) !important;
}

body::before {
  display: block !important;
  content: "" !important;
  width: 100% !important;
  height: clamp(820px, 96vw, 1180px) !important;
  background-image: var(--bg-image) !important;
  background-repeat: no-repeat !important;
  background-position: center top !important;
  background-size: cover !important;
  opacity: .98 !important;
  -webkit-mask-image: linear-gradient(
    180deg,
    #000 0%,
    #000 62%,
    rgba(0,0,0,.7) 80%,
    rgba(0,0,0,.3) 92%,
    transparent 100%
  ) !important;
  mask-image: linear-gradient(
    180deg,
    #000 0%,
    #000 62%,
    rgba(0,0,0,.7) 80%,
    rgba(0,0,0,.3) 92%,
    transparent 100%
  ) !important;
}

@media(max-width: 760px) {
  body::before {
    height: clamp(820px, 200vw, 1180px) !important;
    background-size: cover !important;
  }
}

/* 프로젝트 기간 / 작업 기간 분리 (Claude 추가) */
.fact-workduration h3 { white-space: nowrap; }