.journey-page { padding-bottom: 110px; }

.journey-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(390px, 0.76fr);
  gap: clamp(48px, 8vw, 112px);
  align-items: center;
  padding: clamp(64px, 9vw, 112px) 0 90px;
}

.journey-hero h1 { max-width: 750px; font-size: clamp(48px, 5.3vw, 68px); letter-spacing: -0.06em; }

.journey-ticket {
  position: relative;
  overflow: hidden;
  padding: 28px;
  background: var(--night);
  color: #eaf8f7;
  box-shadow: 16px 16px 0 rgba(21, 95, 155, 0.14);
}

.journey-ticket::after {
  content: "WEB";
  position: absolute;
  right: -14px;
  bottom: -26px;
  color: rgba(28, 169, 161, 0.08);
  font: 700 100px/1 Consolas, monospace;
}

.journey-ticket-heading {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(234, 248, 247, 0.18);
  font-size: 13px;
  font-weight: 700;
}

.journey-ticket-heading span:last-child { color: #9ec0c4; font: 11px/1.4 Consolas, monospace; }
.journey-ticket-heading i { display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; background: var(--aqua); }
.journey-ticket ol { position: relative; z-index: 1; margin: 0; padding: 10px 0 0; list-style: none; }
.journey-ticket li { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 15px 0; border-bottom: 1px dashed rgba(234, 248, 247, 0.16); }
.journey-ticket li span { color: #91aeb2; font-size: 11px; }
.journey-ticket code { color: #eaf8f7; font: 700 12px/1.4 Consolas, monospace; }
.journey-ticket > p { position: relative; z-index: 1; margin: 20px 0 0; color: #86a4a8; font-size: 11px; line-height: 1.6; }

.route-overview { padding-bottom: 84px; }

.route-line {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  border: 1px solid var(--line);
  list-style: none;
}

.route-line li { position: relative; min-height: 170px; padding: 20px; border-right: 1px solid var(--line); background: rgba(248, 252, 251, 0.72); }
.route-line li:last-child { border-right: 0; }
.route-line li:not(:last-child)::after { content: "→"; position: absolute; z-index: 1; top: 24px; right: -8px; color: var(--signal); font: 700 15px/1 Consolas, monospace; }
.route-line b { color: var(--signal); font: 600 11px/1 Consolas, monospace; }
.route-line span { display: block; margin-top: 45px; font-family: "STZhongsong", "SimSun", serif; font-size: 24px; font-weight: 700; }
.route-line p { margin: 8px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }

.connection-section {
  display: grid;
  grid-template-columns: 100px minmax(0, 0.9fr) minmax(360px, 1.1fr);
  gap: 38px;
  align-items: start;
  padding: 64px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.section-index { color: var(--signal); font: 700 24px/1 Consolas, monospace; }
.connection-copy h2,
.tcp-heading h2,
.tls-section h2,
.render-heading h2 { margin: 0; font-family: "STZhongsong", "SimSun", serif; font-size: clamp(32px, 4vw, 50px); letter-spacing: -0.045em; line-height: 1.2; }
.connection-copy > p:last-child, .render-heading > p:last-child { margin: 24px 0 0; color: var(--muted); line-height: 1.8; }

.port-list { margin: 0; }
.port-list div { display: grid; grid-template-columns: 88px 1fr; gap: 22px; padding: 22px 0; border-top: 1px solid var(--line); }
.port-list div:last-child { border-bottom: 1px solid var(--line); }
.port-list dt code { color: var(--blue); font: 700 28px/1 Consolas, monospace; }
.port-list dd { margin: 0; }
.port-list b, .port-list span { display: block; }
.port-list b { font-size: 14px; }
.port-list span { margin-top: 8px; color: var(--muted); font-size: 13px; line-height: 1.7; }

.plain-note { grid-column: 2 / -1; display: grid; grid-template-columns: 140px 1fr; gap: 24px; padding: 24px; border-left: 4px solid var(--aqua); background: rgba(248, 252, 251, 0.72); }
.plain-note b { color: var(--blue); font-size: 12px; }
.plain-note p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.7; }

.tcp-section { padding: 84px 0; }
.tcp-heading { display: grid; grid-template-columns: 180px minmax(0, 720px); gap: 36px; align-items: start; }
.tcp-heading .eyebrow { margin-top: 11px; }
.handshake { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 18px; align-items: center; margin-top: 42px; }
.handshake div { min-height: 150px; padding: 24px; border: 1px solid var(--line); background: rgba(248, 252, 251, 0.72); }
.handshake span { color: var(--blue); font: 600 11px/1.4 Consolas, monospace; }
.handshake b { display: block; margin-top: 50px; font-family: "STZhongsong", "SimSun", serif; font-size: 20px; }
.handshake i { color: var(--signal); font: normal 20px/1 Consolas, monospace; }
.tcp-note { max-width: 860px; margin: 26px 0 0 auto; color: var(--muted); font-size: 13px; line-height: 1.8; }

.tls-section {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(390px, 1.1fr);
  gap: 46px;
  padding: 52px;
  background: var(--night);
  color: #eaf8f7;
}

.tls-section .eyebrow { color: #72d4ce; }
.tls-section > div:first-child > p:last-child { margin: 24px 0 0; color: #9eb7bb; line-height: 1.8; }
.tls-checks { margin: 0; }
.tls-checks div { display: grid; grid-template-columns: 42px 1fr; gap: 18px; padding: 20px 0; border-top: 1px solid rgba(234, 248, 247, 0.18); }
.tls-checks div:last-child { border-bottom: 1px solid rgba(234, 248, 247, 0.18); }
.tls-checks dt { color: var(--signal); font: 600 11px/1.5 Consolas, monospace; }
.tls-checks dd { margin: 0; }
.tls-checks b, .tls-checks span { display: block; }
.tls-checks b { font-size: 14px; }
.tls-checks span { margin-top: 9px; color: #9eb7bb; font-size: 12px; line-height: 1.7; }
.lock-warning { grid-column: 1 / -1; display: grid; grid-template-columns: 44px 1fr; gap: 20px; align-items: center; padding-top: 26px; border-top: 1px solid rgba(234, 248, 247, 0.18); }
.lock-warning > span { display: grid; width: 40px; height: 40px; place-items: center; border: 1px solid var(--signal); border-radius: 50%; color: var(--signal); font: 700 16px/1 Consolas, monospace; }
.lock-warning p { margin: 0; color: #9eb7bb; font-size: 13px; line-height: 1.75; }
.lock-warning strong { color: #eaf8f7; }

.http-section { padding-top: 84px; }
.exchange-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.message-panel { min-width: 0; padding: 30px; border: 1px solid var(--line); background: rgba(248, 252, 251, 0.72); }
.message-panel > span { color: var(--blue); font: 700 11px/1.4 Consolas, monospace; }
.message-panel h3 { margin: 40px 0 18px; font-family: "STZhongsong", "SimSun", serif; font-size: 28px; }
.message-panel pre { margin: 0; padding: 20px; overflow-x: auto; border-left: 3px solid var(--signal); background: var(--night); color: #eaf8f7; }
.message-panel pre code { font: 600 12px/1.8 Consolas, monospace; }
.message-panel p { margin: 20px 0 0; color: var(--muted); font-size: 13px; line-height: 1.75; }
.message-panel p code { color: var(--blue); font: 600 12px/1.5 Consolas, monospace; }
.response-panel { border-top: 4px solid var(--aqua); }
.request-panel { border-top: 4px solid var(--blue); }

.status-guide { margin-top: 48px; }
.status-guide > h3 { margin: 0 0 22px; font-family: "STZhongsong", "SimSun", serif; font-size: 28px; }
.status-guide > div { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line); }
.status-guide article { min-height: 165px; padding: 22px; border-right: 1px solid var(--line); background: rgba(248, 252, 251, 0.72); }
.status-guide article:last-child { border-right: 0; }
.status-guide code { color: var(--signal); font: 700 18px/1 Consolas, monospace; }
.status-guide b { display: block; margin-top: 34px; font-size: 15px; }
.status-guide p { margin: 9px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; }

.render-section { padding-top: 96px; }
.render-heading { display: grid; grid-template-columns: 170px minmax(320px, 0.9fr) minmax(300px, 0.7fr); gap: 36px; align-items: start; }
.render-heading .eyebrow { margin-top: 11px; }
.render-heading > p:last-child { margin-top: 8px; }
.material-stack { display: grid; grid-template-columns: repeat(3, 1fr) 1.1fr; margin-top: 42px; border: 1px solid var(--line); }
.material-stack article { min-height: 210px; padding: 24px; border-right: 1px solid var(--line); background: rgba(248, 252, 251, 0.72); }
.material-stack code { color: var(--blue); font: 700 12px/1.4 Consolas, monospace; }
.material-stack b { display: block; margin-top: 62px; font-family: "STZhongsong", "SimSun", serif; font-size: 23px; }
.material-stack p { margin: 10px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.screen-result { display: flex; flex-direction: column; justify-content: space-between; min-height: 210px; padding: 24px; background: var(--signal); color: #fff; }
.screen-result span { font: 700 11px/1.4 Consolas, monospace; }
.screen-result strong { font-family: "STZhongsong", "SimSun", serif; font-size: clamp(25px, 3vw, 36px); line-height: 1.2; }
.final-note { display: grid; grid-template-columns: 270px 1fr; gap: 30px; margin-top: 18px; padding: 28px; border: 1px solid var(--line); background: rgba(248, 252, 251, 0.72); }
.final-note b { color: var(--blue); font-size: 14px; }
.final-note p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.75; }

@media (max-width: 900px) {
  .journey-hero { grid-template-columns: 1fr; gap: 48px; }
  .journey-ticket { width: min(100%, 620px); }
  .route-line { grid-template-columns: repeat(3, 1fr); }
  .route-line li:nth-child(3) { border-right: 0; }
  .route-line li:nth-child(-n + 3) { border-bottom: 1px solid var(--line); }
  .route-line li:nth-child(3)::after { display: none; }
  .connection-section { grid-template-columns: 76px 1fr; }
  .port-list { grid-column: 2; }
  .plain-note { grid-column: 2; }
  .tcp-heading { grid-template-columns: 1fr; gap: 0; }
  .handshake { grid-template-columns: 1fr; }
  .handshake i { transform: rotate(90deg); justify-self: center; }
  .tls-section { grid-template-columns: 1fr; padding: 40px; }
  .lock-warning { grid-column: auto; }
  .render-heading { grid-template-columns: 1fr; gap: 0; }
  .render-heading > p:last-child { margin-top: 24px; }
  .material-stack { grid-template-columns: repeat(2, 1fr); }
  .material-stack article:nth-child(2) { border-right: 0; }
  .material-stack article:nth-child(-n + 2) { border-bottom: 1px solid var(--line); }
}

@media (max-width: 560px) {
  .journey-page { padding-bottom: 76px; }
  .journey-hero { padding: 52px 0 68px; }
  .journey-hero h1 { font-size: clamp(34px, 10.25vw, 42px); white-space: nowrap; }
  .journey-ticket { padding: 23px; box-shadow: 8px 8px 0 rgba(21, 95, 155, 0.14); }
  .route-overview { padding-bottom: 64px; }
  .route-line { grid-template-columns: 1fr 1fr; }
  .route-line li { min-height: 145px; }
  .route-line li:nth-child(3) { border-right: 1px solid var(--line); }
  .route-line li:nth-child(2n) { border-right: 0; }
  .route-line li:nth-child(-n + 4) { border-bottom: 1px solid var(--line); }
  .route-line li:nth-child(3)::after { display: block; }
  .route-line li:nth-child(2n)::after { display: none; }
  .connection-section { grid-template-columns: 1fr; gap: 26px; padding: 48px 0; }
  .port-list, .plain-note { grid-column: auto; }
  .plain-note { grid-template-columns: 1fr; }
  .tcp-section { padding: 64px 0; }
  .handshake div { min-height: 130px; }
  .handshake b { margin-top: 38px; }
  .tls-section { padding: 28px 22px; }
  .exchange-grid, .status-guide > div, .material-stack { grid-template-columns: 1fr; }
  .message-panel { padding: 24px 22px; }
  .message-panel pre code { white-space: pre-wrap; overflow-wrap: anywhere; }
  .status-guide article { min-height: auto; border-right: 0; border-bottom: 1px solid var(--line); }
  .status-guide article:last-child { border-bottom: 0; }
  .render-section { padding-top: 72px; }
  .material-stack article { min-height: 170px; border-right: 0; border-bottom: 1px solid var(--line); }
  .material-stack article:nth-child(2) { border-bottom: 1px solid var(--line); }
  .material-stack b { margin-top: 42px; }
  .final-note { grid-template-columns: 1fr; }
}