/* 선물·현물 통합 계산기 모달. 터미널(index.html)과 메인(landing.html)이 같이 쓴다.
   2026-08-12: ① style.css에서 떼어냄 ② 두 모달을 하나로 합침 ③ 메인 페이지 문법으로 다시 그림.

   왜 별도 파일인가: 메인은 style.css(터미널 전용, body/html 전역 규칙이 있어 랜딩 디자인을
   덮어쓴다)를 링크하지 않는다. 그래서 계산기 모달이 스타일 없이 페이지 맨 아래에 깔려
   "안 열린다"고 보였다(실제 증상, 2026-08-12).

   왜 이 모양인가: 값(라디우스 6px, 라벨 10.5px 대문자, 입력 전체폭, 파란 CTA)은 랜딩의
   로그인·회원가입 모달과 같은 것을 쓴다. 터미널 문법(라디우스 3px, 폭 130px 입력칸)을
   그대로 쓰면 메인에서 혼자 겉돈다. 터미널도 이 파일 하나를 쓰므로 두 페이지가 같아진다.

   선택자를 전부 #modal-calc로 묶은 이유: 이 파일이 랜딩에도 들어가므로 클래스만 쓰면
   이름이 겹치는 랜딩의 다른 요소까지 물들인다. id로 묶으면 모달 밖으로 새지 않는다. */

/* ── 모달 껍데기 ─────────────────────────────────────────────
   display는 일부러 넣지 않는다 - openModal/closeModal이 인라인 style로 flex/none을
   직접 넣기 때문에 여기 적어봐야 항상 진다. */
#modal-calc {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(4, 6, 10, 0.82); backdrop-filter: blur(8px);
    z-index: 9999; justify-content: center; align-items: center;
    padding: 16px; box-sizing: border-box;
}
#modal-calc .modal-content {
    background: #0e1219; border: 1px solid #2e3b4e; border-radius: 11px;
    width: 100%; max-width: 420px; box-sizing: border-box;
    color: #dce4ee; text-align: left;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                 'Noto Sans KR', 'Malgun Gothic', Arial, sans-serif;
    line-height: 1.6;
}
/* 화면이 짧으면(모바일 주소창까지 감안하면 더 짧다) 모달이 뷰포트보다 커져서 헤더의 X가
   위로 밀려 사라지고 하단이 잘렸다. 헤더·전환버튼은 고정하고 본문만 안에서 스크롤한다. */
#modal-calc .calc-modal-scroll {
    display: flex; flex-direction: column; max-height: 92vh; overflow: hidden;
}
#modal-calc .modal-header {
    flex-shrink: 0; display: flex; justify-content: space-between; align-items: center;
    padding: 16px 20px 0;
}
#modal-calc .modal-header h3 {
    margin: 0; font-size: 17px; font-weight: 800; color: #f1f5f9; letter-spacing: -.02em;
}
#modal-calc .close-btn {
    color: #64748b; font-size: 21px; line-height: 1; cursor: pointer; padding: 4px; transition: .15s;
}
#modal-calc .close-btn:hover { color: #f1f5f9; }

/* ── 선물 / 현물 전환 ────────────────────────────────────────
   랜딩의 언어 전환(알약형 두 개)과 같은 문법. CTA가 아니므로 채운 파랑은 쓰지 않는다. */
#modal-calc .calc-seg { flex-shrink: 0; display: flex; gap: 6px; padding: 11px 20px 0; }
#modal-calc .calc-seg button {
    font-family: inherit; font-size: 12.5px; line-height: 1; cursor: pointer;
    padding: 6px 14px; border-radius: 999px;
    background: transparent; border: 1px solid #222d3d; color: #94a3b8; transition: .15s;
}
#modal-calc .calc-seg button:hover { border-color: #00a3ff; color: #cbd5e1; }
#modal-calc .calc-seg button.on { border-color: #00a3ff; color: #00a3ff; font-weight: 600; }

#modal-calc .calc-modal-body {
    overflow-y: auto; padding: 13px 20px 18px; flex: 1 1 auto; min-height: 0;
    display: flex; flex-direction: column; gap: 9px;
    scrollbar-width: thin; scrollbar-color: #2e3b4e transparent;
}
/* 기본 스크롤바(밝은 회색)가 다크 테마에서 "사이드바"처럼 튀어 보였다 - 얇고 어둡게. */
#modal-calc .calc-modal-body::-webkit-scrollbar { width: 6px; }
#modal-calc .calc-modal-body::-webkit-scrollbar-track { background: transparent; }
#modal-calc .calc-modal-body::-webkit-scrollbar-thumb { background: #2e3b4e; border-radius: 3px; }
#modal-calc .calc-modal-body::-webkit-scrollbar-thumb:hover { background: #3a4658; }

/* 감춰진 모드. [hidden]은 display:flex에 지므로 명시한다. */
#modal-calc .calc-pane[hidden] { display: none; }
#modal-calc .calc-pane { display: flex; flex-direction: column; gap: 9px; }

/* ── 입력 ────────────────────────────────────────────────────
   라벨을 칸 위에 올리고 입력을 전체 폭으로 편다. 예전에는 라벨과 130px 입력칸이 한 줄에
   양끝정렬이라 휴대폰에서 누르기 어려웠다. */
#modal-calc .fld { display: flex; flex-direction: column; gap: 4px; }
#modal-calc .fld label {
    font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #64748b;
}
#modal-calc .fld input {
    width: 100%; background: #0b0e14; border: 1px solid #222d3d; border-radius: 6px;
    color: #f1f5f9; font-size: 14px; padding: 8px 11px;
    font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
    font-variant-numeric: tabular-nums;
}
#modal-calc .fld input:focus { outline: none; border-color: #00a3ff; }
/* 3열 격자. 선물 7칸이 3줄에 들어간다(방향은 두 칸을 쓴다). */
#modal-calc .fld-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
#modal-calc .fld-wide { grid-column: span 2; }

/* 수수료 기본값 버튼 - 3열에서는 입력칸 옆에 둘 자리가 없어 라벨 줄로 올렸다. */
#modal-calc .fld-head { display: flex; justify-content: space-between; align-items: center; gap: 4px; }
#modal-calc .preset-btn {
    flex: 0 0 auto; white-space: nowrap; line-height: 1;
    background: transparent; border: 1px solid #222d3d; border-radius: 4px; color: #94a3b8;
    font-family: inherit; font-size: 9.5px; font-weight: 700; padding: 2px 6px;
    cursor: pointer; transition: .15s;
}
#modal-calc .preset-btn:hover { border-color: #00a3ff; color: #00a3ff; }
#modal-calc .preset-btn.done { border-color: #5cb894; color: #5cb894; }

/* 방향 - 드롭다운은 열어봐야 뭘 골랐는지 알 수 있어서 두 칸으로 폈다. 롱/숏은
   초록/빨강 관례를 그대로 따른다(사이트 다른 곳의 상승·하락 색과 같은 값). */
#modal-calc .dir-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#modal-calc .dir-btn {
    font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer; padding: 8px;
    border-radius: 6px; background: transparent; border: 1px solid #222d3d; color: #94a3b8;
    transition: .15s;
}
#modal-calc .dir-btn:hover { color: #cbd5e1; }
#modal-calc .dir-btn.on[data-dir="Long"] {
    border-color: rgba(92, 184, 148, .5); color: #5cb894; background: rgba(92, 184, 148, .07);
}
#modal-calc .dir-btn.on[data-dir="Short"] {
    border-color: rgba(217, 125, 122, .5); color: #d97d7a; background: rgba(217, 125, 122, .07);
}

/* ── 계산 버튼 ───────────────────────────────────────────────
   랜딩 로그인 모달의 제출 버튼(.sbmt)과 같은 값. 광택·그라디언트·그림자는 쓰지 않는다
   (결제·신뢰 버튼이 스캠처럼 보이는 걸 막는 기존 규칙). */
#modal-calc .calc-btn {
    width: 100%; margin-top: 1px; padding: 10px; border-radius: 6px;
    background: #00a3ff; border: 1px solid #00a3ff; color: #04121d;
    font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer; transition: .15s;
}
#modal-calc .calc-btn:hover { background: #0088ff; border-color: #0088ff; }

/* ── 결과 ────────────────────────────────────────────────────
   숫자는 고정폭 + tabular-nums라 자릿수가 바뀌어도 우측 끝이 흔들리지 않는다. */
#modal-calc .result-title-row {
    font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #64748b;
    border-bottom: 1px dashed #222d3d; padding-bottom: 4px; white-space: pre-line;
}
#modal-calc .res-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 14px; }
#modal-calc .res { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
#modal-calc .res span { font-size: 10.5px; color: #64748b; letter-spacing: .02em; }
#modal-calc .res strong {
    font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
    font-variant-numeric: tabular-nums; font-weight: 600; font-size: 13px; color: #cbd5e1;
    line-height: 1.4;
}
#modal-calc .res.key strong { color: #f1f5f9; font-size: 15px; }
#modal-calc .res strong.up { color: #5cb894; }
#modal-calc .res strong.down { color: #d97d7a; }

/* ── 면책조항 (두 모드 공통, 항상 맨 아래) ─────────────────────
   접어 둔다. 펼친 채로 두면 146px을 먹어 노트북 화면에서도 스크롤이 생겼다(2026-08-12 실측).
   요약 줄은 접힌 상태에서도 늘 보이므로 고지 자체가 사라지지는 않는다. */
#modal-calc .calc-disclaimer {
    border-top: 1px dashed #222d3d; padding-top: 9px; margin-top: 1px;
    font-size: 11px; color: #64748b; line-height: 1.6;
}
#modal-calc .calc-disclaimer summary {
    cursor: pointer; list-style: none; color: #64748b;
    display: flex; justify-content: space-between; align-items: center; gap: 10px;
}
#modal-calc .calc-disclaimer summary::-webkit-details-marker { display: none; }
#modal-calc .calc-disclaimer summary::after { content: "+"; font-size: 13px; line-height: 1; }
#modal-calc .calc-disclaimer[open] summary::after { content: "\2212"; }
#modal-calc .calc-disclaimer summary:hover { color: #94a3b8; }
#modal-calc .calc-disclaimer p { margin: 8px 0 0; }
#modal-calc .calc-disclaimer b { color: #94a3b8; font-weight: 700; }

#modal-calc button:focus-visible, #modal-calc input:focus-visible {
    outline: 2px solid #00a3ff; outline-offset: 2px;
}

@media screen and (max-width: 560px) {
    #modal-calc { padding: 10px; }
    #modal-calc .modal-header { padding: 14px 14px 0; }
    #modal-calc .calc-seg { padding: 10px 14px 0; }
    #modal-calc .calc-modal-body { padding: 12px 14px 16px; }
    /* 좁은 화면에서 두 칸을 유지하면 입력칸이 너무 좁아 숫자가 잘린다 - 한 칸으로 편다. */
    /* 좁은 화면에서 3열을 유지하면 입력칸이 40px대가 되어 숫자가 잘린다 - 2열로 편다. */
    #modal-calc .fld-grid { grid-template-columns: 1fr 1fr; gap: 9px; }
    #modal-calc .fld-wide { grid-column: span 2; }
}