/* ============================================================
   Lunar Soopoolleaf — 양력 ↔ 음력 변환기

   home.css 를 먼저 얹어 머리말 · 배경 · 테마를 그대로 쓰고,
   이 파일은 변환기 부분만 담당합니다.
   ============================================================ */

.tc-main {
  flex:1;
  padding:6px 0 40px;
}


/* ---------- 머리글 ---------- */

.tc-intro {
  text-align:center;
  margin:8px 0 20px;
}

.tc-hello {
  display:inline-block;
  padding:7px 14px;
  border-radius:999px;
  background:var(--surface);
  box-shadow:var(--shadow-sm);
  font-size:12.5px;
  font-weight:700;
  color:var(--muted);
}

.tc-intro h1 {
  margin:14px 0 8px;
  font-size:clamp(21px,5.4vw,28px);
  line-height:1.42;
  letter-spacing:-.02em;
  word-break:keep-all;
}

.tc-intro p {
  margin:0;
  font-size:14px;
  line-height:1.8;
  color:var(--muted);
  word-break:keep-all;
}


/* ---------- 입력 ---------- */

.tc-entry {
  width:min(100%,460px);
  margin:0 auto;
  display:grid;
  gap:10px;
}


/* 추가 날짜 정보 — 입력칸 위 */

.tc-extra {
  padding:12px 14px 13px;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--surface);
  box-shadow:var(--shadow-sm);
}

.tc-extra-title {
  display:block;
  margin-bottom:9px;
  font-size:11.5px;
  font-weight:800;
  color:var(--muted);
}

.tc-checks {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.tc-check {
  flex:1 1 150px;
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:9px 12px;
  border:1.6px solid var(--line);
  border-radius:14px;
  background:var(--bg);
  cursor:pointer;
  font-size:12.5px;
  font-weight:700;
  line-height:1.3;
  word-break:keep-all;
  transition:border-color .16s ease, background-color .16s ease;
}

.tc-check:hover { border-color:var(--secondary); }

/* 진짜 체크박스는 숨기고 네모만 보여 줍니다 */
.tc-check input {
  position:absolute;
  width:1px;
  height:1px;
  opacity:0;
  pointer-events:none;
}

.tc-check-box {
  flex:0 0 auto;
  width:20px;
  height:20px;
  border:2px solid var(--line);
  border-radius:7px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  transition:background-color .16s ease, border-color .16s ease;
}

.tc-check-box svg {
  width:12px;
  height:12px;
  fill:none;
  stroke:currentColor;
  stroke-width:2.8;
  stroke-linecap:round;
  stroke-linejoin:round;
  opacity:0;
  transform:scale(.6);
  transition:opacity .16s ease, transform .2s cubic-bezier(.2,.8,.2,1);
}

.tc-check:has(input:checked) { border-color:var(--secondary); background:var(--surface); }
.tc-check:has(input:checked) .tc-check-box { background:var(--secondary); border-color:var(--secondary); }
.tc-check:has(input:checked) .tc-check-box svg { opacity:1; transform:none; }

.tc-check:focus-within { outline:2px solid var(--secondary); outline-offset:2px; }


/* 날짜 칸 */

.tc-entry-row {
  display:flex;
  gap:8px;
}

.tc-input-wrap {
  position:relative;
  flex:1 1 auto;
  min-width:0;
  display:flex;
  align-items:center;
}

.tc-input {
  width:100%;
  padding:13px 40px 13px 16px;
  border:1.8px solid var(--line);
  border-radius:16px;
  background:var(--surface);
  color:var(--text);
  font:inherit;
  font-size:19px;
  font-weight:800;
  letter-spacing:.06em;
  text-align:center;
  outline:none;
  transition:border-color .16s ease;
}

.tc-input::placeholder { color:var(--muted); opacity:.55; font-weight:700; }
.tc-input:focus { border-color:var(--secondary); }

.tc-clear {
  position:absolute;
  right:10px;
  width:24px;
  height:24px;
  border:0;
  border-radius:999px;
  background:var(--soft);
  color:var(--muted);
  font-size:15px;
  line-height:1;
  cursor:pointer;
}

.tc-clear[hidden] { display:none; }
.tc-clear:hover { color:var(--text); }

.tc-go {
  flex:0 0 auto;
  width:58px;
  border:0;
  border-radius:16px;
  background:var(--primary);
  color:#fff;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 5px 0 var(--primary-deep);
  transition:transform .16s ease, box-shadow .16s ease;
}

.tc-go svg { width:22px; height:22px; }
.tc-go:hover { transform:translateY(-2px); box-shadow:0 7px 0 var(--primary-deep); }
.tc-go:active { transform:translateY(2px); box-shadow:0 2px 0 var(--primary-deep); }

.tc-hint {
  margin:0 2px;
  text-align:center;
  font-size:11px;
  font-weight:600;
  line-height:1.7;
  color:var(--muted);
}

/* 적는 차례 (연·월·일 / month, day, year …) */
.tc-hint span {
  display:block;
  margin-top:2px;
  font-size:10.5px;
  opacity:.8;
}


/* ---------- 결과 ---------- */

.tc-error {
  width:min(100%,460px);
  margin:16px auto 0;
  padding:13px 16px;
  border:1.6px solid var(--line);
  border-radius:16px;
  background:var(--surface);
  color:var(--text);
  font-size:12.5px;
  font-weight:700;
  line-height:1.7;
  text-align:center;
  word-break:keep-all;
}

.tc-asis {
  width:min(100%,460px);
  margin:20px auto 9px;
  text-align:center;
  font-size:15px;
  font-weight:800;
  letter-spacing:-.01em;
}

.tc-asis span {
  display:block;
  margin-top:3px;
  font-size:11.5px;
  font-weight:700;
  color:var(--muted);
}

.tc-two {
  width:min(100%,460px);
  margin:0 auto;
  display:grid;
  gap:10px;
}

.tc-side {
  padding:15px 17px;
  border:2px solid var(--surface);
  border-radius:22px;
  box-shadow:var(--shadow-soft);
  display:flex;
  flex-direction:column;
  gap:7px;
}

.tc-side-solar {
  background:linear-gradient(140deg,rgba(232,151,79,.16),rgba(232,151,79,.05)),var(--surface);
}

.tc-side-lunar {
  background:linear-gradient(140deg,rgba(111,143,214,.16),rgba(90,200,189,.07)),var(--surface);
}

.tc-side-head {
  display:flex;
  align-items:center;
  gap:7px;
  font-size:12px;
  font-weight:800;
  color:var(--muted);
}

.tc-side-head i {
  display:inline-flex;
  width:20px;
  height:20px;
  align-items:center;
  justify-content:center;
}

.tc-side-head i svg { width:17px; height:17px; }
.tc-side-solar .tc-side-head i { color:#e8974f; }
.tc-side-lunar .tc-side-head i { color:#6f8fd6; }

.tc-side-main {
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:7px;
  font-size:clamp(18px,4.6vw,22px);
  font-weight:800;
  letter-spacing:-.01em;
}

.tc-side-main b {
  font-size:12px;
  font-weight:800;
  color:var(--muted);
}

.tc-side-main em {
  font-style:normal;
  font-size:11.5px;
  font-weight:700;
  color:var(--muted);
  padding:2px 8px;
  border-radius:999px;
  background:var(--soft);
}

.tc-side-none { color:var(--muted); font-size:16px; }

.tc-side-extra {
  display:flex;
  gap:7px;
  align-items:baseline;
  font-size:12.5px;
  font-weight:700;
  word-break:keep-all;
}

.tc-side-extra b {
  flex:0 0 auto;
  font-size:10.5px;
  font-weight:800;
  color:var(--muted);
}

.tc-side-more {
  list-style:none;
  margin:2px 0 0;
  padding:9px 0 0;
  border-top:1.5px dashed var(--line);
  display:grid;
  gap:6px;
}

.tc-side-more li {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
}

.tc-side-more b {
  flex:0 0 auto;
  font-size:11px;
  font-weight:800;
  color:var(--muted);
}

.tc-side-more span {
  display:flex;
  align-items:baseline;
  gap:6px;
  font-size:13.5px;
  font-weight:700;
}

.tc-side-more em {
  font-style:normal;
  font-size:11px;
  font-weight:700;
  color:var(--muted);
}


/* ---------- 범위 ---------- */

.tc-range {
  width:min(100%,460px);
  margin:16px auto 0;
  text-align:center;
  font-size:11px;
  font-weight:600;
  line-height:1.9;
  color:var(--muted);
}

.tc-range span { display:block; font-size:10.5px; opacity:.85; }
.tc-range a { color:inherit; }


/* ---------- 작은 화면 ---------- */

@media (max-width:640px) {

  .tc-input {
    font-size:17px; /* 아이폰에서 칸을 눌러도 화면이 확대되지 않도록 16px 이상 */
    padding:12px 38px 12px 14px;
  }

  .tc-check { flex:1 1 100%; }

  .tc-side { padding:14px 15px; border-radius:20px; }

}

@media (prefers-reduced-motion: reduce) {
  .tc-go, .tc-check, .tc-check-box, .tc-check-box svg { transition:none; }
}