/*
   terminal.css: terminal version stylesheet. terminal.html 전용이다.

   concept은 녹색 phosphor(phosphor) CRT terminal이다.
   모든 것을 monospace text와 ASCII art로 표현한다.

   목차
   01. theme 변수 (green 기본, amber toggle)
   02. CRT base (scanline, 글로우, flicker)
   03. layout과 boot sequence
   04. section header와 구분선
   05. ASCII art block (pre)
   06. 본문 text, link, button
   07. countdown과 progress bar
   08. 계좌와 복사
   09. approve와 ASCII confetti
   10. footer와 반응형
 */


/* 01. theme 변수 */

:root {
  /* green phosphor (기본) */
  --bg: #060a07;
  --bg-deep: #03050300;
  --fg: #8ef6b0;          /* 본문 */
  --fg-bright: #c9ffda;   /* 강조 */
  --fg-dim: #3f7a55;      /* 흐림 */
  --accent: #ffd479;      /* amber 포인트 */
  --cyan: #74e0e0;        /* 보조 */
  --rose: #ff9bbb;        /* heart/신부 */
  --err: #ff6b6b;
  --glow: rgba(120, 255, 170, 0.55);
  --scan: rgba(0, 0, 0, 0.28);
  --mono: 'JetBrains Mono', monospace;
}

[data-ascii-theme='amber'] {
  /* amber phosphor */
  --bg: #0b0803;
  --fg: #ffcf7e;
  --fg-bright: #ffe7b8;
  --fg-dim: #8a6326;
  --accent: #9be8a0;
  --cyan: #ffd9a0;
  --rose: #ff9bbb;
  --glow: rgba(255, 200, 110, 0.5);
  --scan: rgba(0, 0, 0, 0.3);
}


/* 02. CRT base */

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.85;
  text-shadow: 0 0 6px var(--glow);
  -webkit-font-smoothing: antialiased;
  transition: background 0.4s ease, color 0.4s ease;
}

/* scanline */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 80;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, transparent 0 2px, var(--scan) 2px 3px);
  opacity: 0.6;
}

/* vignetting + 미세 flicker */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 81;
  pointer-events: none;
  background: radial-gradient(120% 90% at 50% 50%, transparent 60%, rgba(0, 0, 0, 0.55) 100%);
  animation: flicker 5.5s infinite steps(60);
}

@keyframes flicker {
  0%, 96%, 100% { opacity: 1; }
  97% { opacity: 0.82; }
  98% { opacity: 0.94; }
}


/* 03. layout & boot sequence */

.wrap {
  max-width: 480px;
  min-height: 100dvh;
  margin: 0 auto;
  padding: 16px 18px 70px;
  border-left: 1px solid var(--fg-dim);
  border-right: 1px solid var(--fg-dim);
  position: relative;
}

#doc { counter-reset: s; }
#doc section { counter-increment: s; }

/* 상단 상태바 */
.statusbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px dashed var(--fg-dim);
  font-size: 12px;
  color: var(--fg-dim);
}

.statusbar .blink-dot {
  color: var(--fg-bright);
  animation: blink 1.1s steps(1) infinite;
}

.statusbar .sb-right {
  margin-left: auto;
  display: flex;
  gap: 10px;
  align-items: center;
}

.theme-toggle {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--fg-dim);
  background: transparent;
  border: 1px solid var(--fg-dim);
  border-radius: 0;
  padding: 3px 8px;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}

.theme-toggle:hover {
  color: var(--accent);
  border-color: var(--accent);
}

@keyframes blink { 50% { opacity: 0; } }

/* boot typing 영역 */
#boot {
  white-space: pre-wrap;
  word-break: break-word;
  min-height: 150px;
  font-size: 12.5px;
  color: var(--fg-dim);
}

#boot .ok { color: var(--fg-bright); }
#boot .cur {
  display: inline-block;
  width: 8px;
  height: 14px;
  vertical-align: -2px;
  background: var(--fg-bright);
  box-shadow: 0 0 8px var(--glow);
  animation: blink 1s steps(1) infinite;
}

/* boot 후 본문. 처음에는 숨겨 둔다. */
#doc { display: none; }
#doc.show { display: block; animation: turn-on 0.5s ease; }

@keyframes turn-on {
  0%   { opacity: 0; transform: scaleY(0.004); filter: brightness(3); }
  40%  { opacity: 1; transform: scaleY(0.02); }
  100% { opacity: 1; transform: scaleY(1); filter: none; }
}

/* scroll reveal */
.rv { opacity: 0; transform: translateY(14px); transition: opacity 0.7s ease, transform 0.7s ease; }
.rv.in { opacity: 1; transform: none; }


/* 04. section header & 구분선 */

section { padding: 30px 0 6px; }

.sec {
  margin-bottom: 16px;
  font-size: 12.5px;
  color: var(--fg-dim);
  white-space: nowrap;
  overflow: hidden;
}

.sec::before { content: '── '; }
.sec b { color: var(--accent); font-weight: 400; }
.sec::after {
  content: ' ' counter(s, decimal-leading-zero) ' ───────────────────────────────────────';
}

.divider {
  margin: 18px 0;
  color: var(--fg-dim);
  text-align: center;
  font-size: 12px;
  letter-spacing: 1px;
  overflow: hidden;
  white-space: nowrap;
}


/* 05. ASCII art block */

.art {
  white-space: pre;
  overflow-x: auto;
  overflow-y: hidden;
  font-size: 12px;
  line-height: 1.5;
  scrollbar-width: thin;
  scrollbar-color: var(--fg-dim) transparent;
}

.art::-webkit-scrollbar { height: 4px; }
.art::-webkit-scrollbar-thumb { background: var(--fg-dim); }

/* banner(heart/이름) */
.banner {
  text-align: center;
  margin: 8px 0 4px;
}

.banner .heart {
  color: var(--rose);
  text-shadow: 0 0 10px rgba(255, 120, 160, 0.6);
}

.names {
  margin-top: 14px;
  text-align: center;
}

.names .ko {
  font-size: 21px;
  letter-spacing: 0.12em;
  color: var(--fg-bright);
}

.names .ko .amp { color: var(--rose); margin: 0 6px; }
.names .en { margin-top: 6px; font-size: 12px; color: var(--fg); }
.names .ver { margin-top: 10px; font-size: 11px; color: var(--fg-dim); letter-spacing: 0.2em; }
.names .when { margin-top: 4px; font-size: 12.5px; color: var(--accent); letter-spacing: 0.06em; }

/* ASCII 데이트 사진 (polaroid) */
.photo-wrap { margin-top: 18px; text-align: center; }
/* polaroid. frame(+ - | 과 header)은 고정이고, frame 안의 사람 글자(.ppl)만 움직인다.
   frame을 ASCII로 그리는 이유는 terminal.js의 renderPhoto()에 적어 두었다.
   CLI나 dot게임처럼 딱딱 끊어지게 살짝 앉았다 일어난다.
   step-end는 보간 없이 스냅하므로 낮은 FPS처럼 보인다. */
.photo {
  line-height: 1.35;
  color: var(--fg-dim);
}
/* polaroid는 30칸 폭이라 .art 기본(12px/mobile 10.5px)에선 좁게 보인다 → 키운다.
   .art.photo(0,2,0)로 기본 .art와 mobile @media .art(0,1,0)를 모두 덮는다. ASCII frame이라 어떤 크기든 정렬 유지. */
.art.photo { font-size: 15px; }
.photo .ppl {
  color: var(--fg-bright);
  position: relative;                       /* top 으로 살짝 내렸다 올렸다 (frame은 그대로) */
  animation: char-bob 1.2s step-end infinite;
}
.photo .hk { color: var(--rose); text-shadow: 0 0 9px rgba(255, 120, 160, 0.6); }
/* 운명의 붉은 실. step-end 스냅으로 낮은 FPS처럼 붉었다 흐려진다. */
.photo .thread {
  color: #ff2d4f;
  text-shadow: 0 0 10px rgba(255, 45, 79, 0.85);
  animation: thread-blink 0.9s step-end infinite;
}

/* step-end: 각 keyframe 값을 다음 keyframe까지 '유지'하다 점프 → 보간 없이 딱딱 끊김(저FPS) */
@keyframes char-bob {
  0%  { top: 0; }      /* 서 있음 */
  50% { top: 3px; }    /* 살짝 앉음(아래로) */
}
@keyframes thread-blink {
  0%  { opacity: 1; }
  50% { opacity: 0.4; }
}
.photo .cap-in { color: var(--accent); }
.photo-cap {
  margin-top: 8px;
  font-size: 12px;
  color: var(--fg-dim);
}
.photo-cap b { color: var(--cyan); }

/* neofetch / struct 색상 */
.fetch .k { color: var(--accent); }
.fetch .v { color: var(--fg-bright); }
.fetch .logo { color: var(--rose); text-shadow: 0 0 9px rgba(255, 120, 160, 0.5); }
.fetch .dim,
.fetch .c { color: var(--fg-dim); }

/* git log */
.gitlog .g { color: var(--fg-bright); }
.gitlog .b { color: var(--rose); }
.gitlog .h { color: var(--accent); }
.gitlog .tag { color: var(--cyan); }
.gitlog .date { color: var(--cyan); }
.gitlog .dim { color: var(--fg-dim); }

/* 달력 */
/* 달력과 사진 block은 가운데로 둔다. pre 내부 정렬은 그대로 유지한다. */
.cal,
.photo {
  width: max-content;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.cal .dow { color: var(--accent); }
.cal .sun { color: var(--rose); }
.cal .day-mark {
  background: var(--rose);
  color: #14060c;
  text-shadow: none;
  padding: 0 1px;
}

/* pipeline */
.pipe .pass { color: var(--fg-bright); }
.pipe .run { color: var(--accent); }
.pipe .label { color: var(--fg); }
.pipe .st { color: var(--fg-dim); }


/* 06. 본문 text & link & button */

.body-text {
  text-align: center;
  word-break: keep-all;
  line-height: 2.1;
  color: var(--fg);
}

.body-text .hl { color: var(--accent); }
.body-text .hl-r { color: var(--rose); }
.body-text p + p { margin-top: 22px; }
.body-text .small { font-size: 12px; color: var(--fg-dim); line-height: 2; }

.quote {
  margin: 22px auto 0;
  max-width: 320px;
  padding-left: 14px;
  border-left: 2px solid var(--rose);
  text-align: left;
  font-size: 12.5px;
  font-style: italic;
  color: var(--fg-dim);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
  margin-bottom: 16px;   /* button 아래 간격을 위쪽과 같게 맞춘다 */
}

.btn {
  flex: 1;
  min-width: 84px;
  padding: 11px 10px;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;   /* [ naver ] 가 줄바꿈으로 쪼개지지 않게 */
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--fg);
  background: transparent;
  border: 1px solid var(--fg-dim);
  cursor: pointer;
  transition: all 0.2s;
}

.btn::before { content: '[ '; color: var(--fg-dim); }
.btn::after { content: ' ]'; color: var(--fg-dim); }

.btn:hover {
  color: var(--bg);
  background: var(--fg);
  border-color: var(--fg);
  text-shadow: none;
}

.btn:hover::before,
.btn:hover::after { color: var(--bg); }


/* 07. countdown / progress bar */

.countdown { text-align: center; }

.cd-prefix {
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--accent);
}

.lcd {
  display: inline-block;
  margin: 10px auto 0;
  color: var(--fg-bright);
  text-shadow: 0 0 12px var(--glow);
  font-size: 13px;
  line-height: 1.15;
  text-align: left;
}

.cd-clock {
  margin-top: 10px;
  font-size: 16px;
  letter-spacing: 0.2em;
  color: var(--accent);
}

.cd-label { margin-top: 12px; font-size: 11px; letter-spacing: 0.2em; color: var(--fg-dim); }

.progress {
  margin-top: 14px;
  font-size: 12.5px;
  color: var(--fg);
}

.progress .bar { color: var(--fg-bright); }
.progress .pct { color: var(--accent); }


/* 08. 계좌와 복사 */

.acc-group { margin-top: 10px; }

.acc-title {
  font-size: 12.5px;
  color: var(--cyan);
  margin: 14px 0 6px;
}

.acc {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 0;
  font-size: 12.5px;
  border-bottom: 1px dashed var(--fg-dim);
}

.acc .nm { width: 52px; flex: none; color: var(--fg-bright); }
.acc .no { color: var(--fg); }

.acc button {
  margin-left: auto;
  flex: none;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--fg-dim);
  background: transparent;
  border: 1px solid var(--fg-dim);
  padding: 4px 8px;
  cursor: pointer;
  transition: all 0.2s;
}

.acc button::before { content: '['; }
.acc button::after { content: ']'; }
.acc button:hover { color: var(--accent); border-color: var(--accent); }
.acc button.copied { color: var(--fg-bright); border-color: var(--fg-bright); }

/* 계좌 펼침 button (js/private.js가 채움) */
.reveal-btn { margin-top: 4px; }
/* inline-block라야 세로 margin이 실제 간격으로 적용됨(inline <a>는 무시됨) */
.acc-group .btn { display: inline-block; margin: 18px 0 6px; }
.acc-group .acc .nm { width: auto; }

.acc-note { margin-top: 6px; font-size: 12px; color: var(--fg-dim); }

.note {
  font-size: 12px;
  line-height: 1.9;
  color: var(--fg-dim);
  text-align: center;
  margin-bottom: 10px;
}


/* 09. RSVP & ASCII confetti */

.rsvp { text-align: center; }

/* 축하 한마디 입력. 은은한 phosphor console칸과 왼쪽 prompt로 shell($)처럼 보이게 한다. */
.rsvp-line {
  position: relative;
  width: 100%;
  margin: 16px 0 0;
}

.rsvp-prompt {
  position: absolute;
  left: 11px;
  top: 11px;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  pointer-events: none;
}

.rsvp-input {
  display: block;
  width: 100%;
  padding: 11px 12px 11px 28px;                              /* 왼쪽 prompt($) 자리 */
  background: color-mix(in srgb, var(--fg) 8%, transparent); /* 주변과 구분되는 console칸 */
  border: 1px solid var(--fg-dim);
  font-family: var(--mono);
  font-size: 13px;
  color: var(--fg-bright);
  caret-color: var(--fg-bright);
  text-align: left;
}

.rsvp-input::placeholder { color: var(--fg-dim); }

.rsvp-input:focus {
  outline: none;
  border-color: var(--accent);
  background: color-mix(in srgb, var(--fg) 13%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent),
              0 0 14px color-mix(in srgb, var(--fg) 22%, transparent);
}

.input-hint {
  margin: 6px 0 0;
  font-size: 11px;
  color: var(--fg-dim);
}

/* 축하 한마디 글자수 counter (config.js가 입력창 뒤에 삽입) */
.bless-count {
  margin: 6px 0 0;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--fg-dim);
}

.bless-count.over {
  color: var(--err);
  text-shadow: 0 0 8px color-mix(in srgb, var(--err) 50%, transparent);
}

.rsvp-input.over-limit {
  border-color: var(--err);
}

.rsvp-btn {
  margin-top: 12px;
  padding: 14px 22px;
  font-family: var(--mono);
  font-size: 14px;
  /* shell 명령이라 줄바꿈을 막는다. '$ approve --deploy wedding'이 좁은 화면에서 2줄로 밀리지 않게 한다. */
  white-space: nowrap;
  max-width: 100%;
  color: var(--fg-bright);
  background: transparent;
  border: 1px solid var(--fg);
  cursor: pointer;
  text-shadow: 0 0 8px var(--glow);
  transition: all 0.2s;
}

.rsvp-btn:hover { background: var(--fg); color: var(--bg); text-shadow: none; }
.rsvp-btn.done { border-color: var(--accent); color: var(--accent); pointer-events: none; }

.rsvp-msg {
  min-height: 22px;
  margin-top: 14px;
  font-size: 12.5px;
  color: var(--accent);
  opacity: 0;
  transition: opacity 0.5s;
}

.rsvp-msg.show { opacity: 1; }

/* AI 축하 (회전 라인) */
.ai {
  margin-top: 18px;
  padding: 14px 12px;
  border: 1px solid var(--fg-dim);
  font-size: 12.5px;
}

.ai .ai-head { color: var(--fg-dim); margin-bottom: 8px; }
/* 높이를 고정해 메시지 길이가 달라도 위아래로 흔들리지 않게 한다. */
.ai .ai-line { height: 66px; overflow: hidden; line-height: 1.8; transition: opacity 0.4s; }
.ai .ai-line.fade { opacity: 0; }
.ai .ai-who { color: var(--cyan); }
.ai .ai-msg-txt { color: var(--fg); }

/* 승인 log */
.log {
  margin-top: 18px;
  padding: 12px;
  border: 1px solid var(--fg-dim);
  font-size: 12px;
  text-align: left;
}

.log .log-head { color: var(--fg-dim); margin-bottom: 6px; }

/* log header와 '더보기'에서 prompt, 명령어, 주석의 색을 나눈다.
   code와 주석이 같은 색이면 명령어까지 주석처럼 흐리게 읽히기 때문이다.
   색은 이 theme의 기존 변수를 그대로 쓴다. */
.log .p   { color: var(--fg-bright); }
.log .cmd { color: var(--fg); }
.log .cm  { color: var(--fg-dim); }
.log .log-line { color: var(--fg); line-height: 1.6; word-break: keep-all; overflow-wrap: anywhere; }
.log .log-line + .log-line { margin-top: 5px; }
.log .log-line .ts { color: var(--cyan); }
.log .log-line .ok { color: var(--fg-bright); }
/* 목록만 세로로 scroll한다. 합계(.log-total)는 scroll 영역 밖이라 항상 보인다.
   마지막 줄이 반쯤 걸쳐 보이는 것 자체가 아래에 더 있다는 신호가 된다. */
.log .log-lines {
  max-height: 140px;
  overflow-y: auto;
  padding-right: 8px;                /* scrollbar와 글자 사이 여백 */
  overscroll-behavior: contain;      /* 끝까지 내려도 page가 따라 밀리지 않게 */
  -webkit-overflow-scrolling: touch; /* iOS 관성 scroll */
  scrollbar-width: thin;
  scrollbar-color: var(--fg-dim) transparent;
}

.log .log-lines::-webkit-scrollbar { width: 4px; }
.log .log-lines::-webkit-scrollbar-track { background: transparent; }
.log .log-lines::-webkit-scrollbar-thumb { background: var(--fg-dim); border-radius: 99px; }

/* '더보기'. scroll 영역 안, 목록 맨 끝에 있어 끝까지 내려야 보인다.
   점선 테두리에 좌측 정렬이면 입력칸처럼 읽혀서, 이 theme의 표준 button(.btn, .rsvp-btn)과
   같은 차림으로 맞춘다. 실선 테두리, 옅은 phosphor 배경, 가운데 정렬, 글로우, 눌림 반응을 준다.
   CRT theme라 radius는 주지 않는다. 다른 button도 모두 각져 있다. */
.log .log-more {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 9px 10px;
  background: color-mix(in srgb, var(--fg) 7%, transparent);
  border: 1px solid var(--fg-dim);
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
  color: var(--fg);
  text-shadow: 0 0 8px var(--glow);
  cursor: pointer;
  transition: all 0.2s;
}

@media (hover: hover) {
  .log .log-more:hover {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
  }

  .log .log-more:hover .cmd { color: var(--accent); }
}

.log .log-more:active { transform: scale(0.97); }

.log .log-more:disabled { cursor: default; opacity: 0.55; transform: none; }

.log .log-total { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--fg-dim); color: var(--fg-bright); }
.log .log-total b { color: var(--accent); }

.confetti {
  position: fixed;
  z-index: 90;
  pointer-events: none;
  font-family: var(--mono);
  font-size: 14px;
  color: var(--fg-bright);
  text-shadow: 0 0 8px var(--glow);
  animation: fall linear forwards;
}

@keyframes fall {
  to { transform: translateY(108vh) rotate(360deg); opacity: 0.1; }
}


/* 10. footer & 반응형 */

footer {
  margin-top: 30px;
  padding-top: 18px;
  border-top: 1px dashed var(--fg-dim);
  font-size: 11.5px;
  color: var(--fg-dim);
}

footer .ft { white-space: pre-wrap; word-break: break-word; }
footer .p { color: var(--fg-bright); }
footer .heart { color: var(--rose); }
footer .err { color: var(--err); }

.switch {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 16px 0 22px;
}

.switch a {
  padding: 11px 12px;
  text-decoration: none;
  text-align: center;
  font-size: 12.5px;
  color: var(--fg);
  border: 1px solid var(--fg-dim);
  transition: all 0.2s;
}

.switch a:hover { color: var(--accent); border-color: var(--accent); }

/* 다른 version link. 2열 반반. */
.switch-row { display: flex; gap: 8px; }
.switch-row a { flex: 1; white-space: nowrap; }

/* 청첩장 공유 button (amber 포인트로 강조) */
.switch .share-btn {
  padding: 11px 12px;
  text-align: center;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--accent);
  background: transparent;
  border: 1px solid var(--accent);
  cursor: pointer;
  transition: all 0.2s;
}

.switch .share-btn:hover { color: var(--bg); background: var(--accent); border-color: var(--accent); }

@media (max-width: 400px) {
  body { font-size: 12px; }
  .art { font-size: 10.5px; }
  .lcd { font-size: 11px; }
  .names .ko { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .rv { opacity: 1; transform: none; }
  body::after { animation: none; }
}