/* =========================================================================
   어플라이플라자 — style.css (정리본)
   - Tailwind CDN과 함께 사용 (빌드 없음)
   - 중복/충돌 제거, 명명 정비, 시각 톤 개선
   ------------------------------------------------------------------------- */

/* ========== 1) CSS 변수(테마) ============================================ */
:root{
  /* 포인트 & 상태 */
  --accent:      #2563eb;
  --accent-600:  #2563eb;
  --accent-700:  #1d4ed8;
  --accent-50:   #eff6ff;
  --ok-50:       #ecfdf5;
  --ok-700:      #047857;
  --bad-50:      #fef2f2;
  --bad-700:     #b91c1c;

  /* 텍스트/배경/테두리 */
  --ink:   #0f172a;
  --muted: #6b7280;
  --card:  #ffffff;
  --border:#e5e7eb;
}

/* ========== 2) 베이스 ==================================================== */
html, body {
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont,
               "Segoe UI Variable Display", "Segoe UI",
               Helvetica, "Apple Color Emoji", Arial, sans-serif,
               "Segoe UI Emoji", "Segoe UI Symbol";
  color: var(--ink);
  background: #fafafa; /* 페이지 톤 업 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 모바일 반응형 디자인 활성화 */
body {
  min-width: auto; /* 최소 너비 제한 해제 */
  overflow-x: auto;  /* 가로 스크롤 허용 */
}

/* 모바일 반응형 디자인을 위한 기본 스타일 */
/* Tailwind의 반응형 클래스들이 정상적으로 작동하도록 함 */

/* header는 배경 이미지보다 앞에 표시 */
header {
  position: relative;
  z-index: 10;
}



/* 유틸 */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 인터랙션 기본 전환 (무분별한 * 셀렉터 대신 핵심 요소만) */
.btn, .chip, .ui-card, .table-clean tr, a, button, details>summary {
  transition: background-color .15s ease, color .15s ease, border-color .15s ease,
              box-shadow .15s ease, transform .02s ease;
}

/* 버튼 텍스트 줄바꿈 방지 (모바일 대응) */
button, .btn, a[role="button"],
a.inline-flex[class*="px-"][class*="py-"],
button.inline-flex[class*="px-"][class*="py-"] {
  white-space: nowrap;
}

/* ===================== 페이지 배경 (전체) ===================== */
/* bg_base.png를 반복 무늬로 사용(투명 PNG 가정) */
html, body {
  background-image: url('bg_base.png');
  background-repeat: repeat;            /* 패턴이면 repeat, 사진이면 no-repeat로 바꿔도 됨 */
  background-attachment: fixed;         /* 패럴랙스 느낌 없이 고정 */
  background-size: auto;                /* 패턴이면 auto, 사진이면 cover/contain 고려 */
}

/* ===================== 좌/우 장식 이미지 (세로 반복 버전) ===================== */
body::before,
body::after {
  content: "";
  position: fixed;
  top: 0;
  bottom: 0;
  width: min(22vw, 360px);
  pointer-events: none;
  z-index: 0;
  background-repeat: repeat-y;           /* ← 세로로만 반복 */
  background-size: auto;                 /* ← 원본 크기 유지 */
  background-position: center top;       /* ← 세로 반복의 기준점 */
  background-attachment: fixed;
  opacity: 1;
}

/* 왼쪽 사이드 배경 */
body::before {
  left: 0;
  background-image: url('bg_left.png');
  background-position: left top;         /* ← 좌측 정렬 */
}

/* 오른쪽 사이드 배경 */
body::after {
  right: 0;
  background-image: url('bg_right.png');
  background-position: right top;        /* ← 우측 정렬 */
}

/* 간격 조정: 이미지 사이 여백 추가 (선택) */
body::before,
body::after {
  background-origin: content-box;
  background-clip: content-box;
  padding-top: 40px;                     /* ↑ 이미지 사이 여백 높이 */
  background-repeat: repeat-y;
}

/* 좁은 화면에서도 배경 이미지 유지 (PC 전용이므로) */
/* @media (max-width: 1024px) {
  body::before, body::after { display: none; }
} */

/* ===================== 메인 콘텐츠 반투명 카드 ===================== */
/* 모든 페이지의 <main>에 반투명 화이트 박스 적용 */
main {
  position: relative;
  z-index: 1;                           /* 좌우 장식 위로 */
  background: rgba(255, 255, 255, 0.85);/* 흰색 + 투명도 15% (= 불투명도 85%) */
  /* 만약 "불투명도 15%"를 원하셨다면 0.15로 조절하세요. */
  margin-top: 1rem;
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 8px 28px rgba(2,6,23,.06);
}

/* ===================== 메인 콘텐츠 반응형 여백 ===================== */
/* 모바일 우선(Mobile First) 방식 */

/* 기본(모바일): ~ md (768px 미만) */
@media (max-width: 767px) {
  main {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
    margin-top: 0;
    border-radius: 0;
    border-top: none;
    border-left: none;
    border-right: none;
  }
  
  /* 모바일에서 배경 이미지 너비 조정 */
  body::before,
  body::after {
    width: min(15vw, 240px);
  }
}

/* 태블릿/데스크톱: md (768px) 이상 */
@media (min-width: 768px) {
  main {
    margin-left: min(24vw, 380px);
    margin-right: min(24vw, 380px);
  }
}

.logo{
  width: auto;
  height: 46px;
  display: block;
}

/* ========== 3) 배지/모노스페이스 ======================================== */
.code-badge{
  font-family: Consolas, "Courier New", monospace;
  font-weight: 600;
  letter-spacing: .4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex: 0 0 auto;
  background: #dbeafe;
  color: #1e40af;
  border: 1px solid #93c5fd;
  border-radius: 0.5rem;
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  line-height: 1;
  transition: all 0.15s ease;
}
.code-badge:hover {
  background: #bfdbfe;
  border-color: #60a5fa;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(59, 130, 246, 0.15);
}

/* 코드/JSON 공통 폰트 */
.json-pre, pre.code, code, kbd, samp {
  font-family: Consolas, "SFMono-Regular", Menlo, Monaco, "Liberation Mono", "Courier New", monospace;
  font-size: 13px;
  line-height: 1.65;
}

/* ========== 4) 버튼 컴포넌트 ============================================ */
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  border-radius:.75rem; padding:.625rem .9rem; font-weight:600;
  border:1px solid var(--border); background:#fff; color:#111827;
}
.btn:hover{ background:#f8fafc; }
.btn:active{ transform: translateY(1px); }
.btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* 변형 */
.btn-primary{ background:var(--accent-600); color:#fff; border-color:transparent; }
.btn-primary:hover{ filter:brightness(.98); }
.btn-ghost{ background:transparent; border-color:transparent; color:#111827; }
.btn-outline{ background:#fff; color:var(--accent-600); border-color:var(--accent-600); box-shadow: inset 0 0 0 1px var(--accent-600); }
.btn-danger{ background:#fff; color:#ef4444; border-color:#ef4444; box-shadow: inset 0 0 0 1px #ef4444; }

/* XS 변형 */
.btn.btn-xs { font-size:11px; padding:2px 8px; border:1px solid #d4d8e0; border-radius:6px; }
.btn.btn-xs:hover { background:#f4f6f9; }
.btn[aria-pressed="true"] { background:#eef2f7; }

/* Tailwind 기본 '검은 버튼' 강제 환치 → 포인트 컬러 */
.bg-neutral-900.text-white,
[class~="bg-neutral-900"][class~="text-white"],
.bg-black.text-white,
[class~="bg-black"][class~="text-white"]{
  background-color: var(--accent-600) !important;
  border-color: transparent !important;
  color: #fff !important;
}
.bg-neutral-900.text-white:hover,
.bg-black.text-white:hover{ filter: brightness(0.98); }
.bg-neutral-900.text-white:active,
.bg-black.text-white:active{ transform: translateY(0.5px); }
.bg-neutral-900.text-white:focus-visible,
.bg-black.text-white:focus-visible{
  outline: 2px solid transparent;
  box-shadow: 0 0 0 3px var(--accent-50);
}

/* 삭제/위험 버튼(Tailwind 계열) */
.bg-red-600.text-white:hover { background-color: #dc2626 !important; }
.bg-red-600.text-white:focus-visible { box-shadow: 0 0 0 3px #fee2e2; }

/* ========== 5) 칩(필터 태그) ============================================== */
.chip{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.45rem .7rem; border-radius:9999px;
  border:1px solid var(--border); background:#f4f4f5; color:#374151; font-weight:600;
}
.chip:hover{ background:#eeeeef; }
.chip.is-active{
  background:#eef2ff; color:var(--accent-600); border-color:#c7d2fe;
}

/* 레거시 filter-btn 호환(선택) */
.filter-btn {
  background: #fff;
  border-color: var(--border);
  color: #374151;
}
.filter-btn:hover { background: #f8fafc; border-color: #93c5fd; }
.filter-btn.active {
  background: var(--accent-600);
  border-color: var(--accent-700);
  color: #fff;
  font-weight: 600;
}

/* ========== 6) 카드/테이블/탭 ============================================ */
.ui-card{
  background:#fff; border:1px solid var(--border);
  border-radius:1rem; box-shadow:0 2px 20px rgba(0,0,0,.04);
}
.card, .border.rounded.bg-white, .border.rounded.p-3.bg-white {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: .5rem;
  box-shadow: 0 0 0 rgba(0,0,0,0);
}
.card:hover, .border.rounded.bg-white:hover, .border.rounded.p-3.bg-white:hover {
  box-shadow: 0 6px 20px rgba(2,6,23,.06);
  transform: translateY(-1px);
}
.card:focus-within, .border.rounded.bg-white:focus-within, .border.rounded.p-3.bg-white:focus-within {
  outline: 2px solid transparent;
  box-shadow: 0 0 0 3px var(--accent-50);
}

/* 표 */
.table-clean{ border:1px solid var(--border); border-radius:.75rem; overflow:hidden; }
.table-clean thead th{ background:#f8fafc; color:#334155; font-weight:700; }
.table-clean tr + tr td{ border-top:1px solid var(--border); }
table.w-full tbody tr:hover { background: #f8fafc; }

/* 탭/링크 */
a, .tab-link { color: inherit; }
.tab-link { border-bottom: 2px solid transparent; }
.tab-link:hover { color: var(--accent-700); border-color: var(--accent-50); }
.tab-link.active, .tab-link[aria-current="page"] {
  color: var(--accent-700);
  border-color: var(--accent-600);
  font-weight: 600;
}

/* 사이드바 현재 위치 강조 */
aside nav a:hover { background: #f8fafc; }
aside nav a.bg-neutral-900.text-white { background: var(--accent-600) !important; }
aside nav a.bg-neutral-900.text-white:hover { background: var(--accent-700) !important; }

/* ========== 7) JSON 카드/뷰(다크) ======================================== */
.json-card {
  border: 1px solid #e6e9ef;
  background: #fbfcfe;
  border-radius: 12px;
  box-shadow: 0 6px 14px rgba(17, 24, 39, 0.06);
  overflow: hidden;
}
.json-card__hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px;
  background: linear-gradient(180deg, #ffffff 0%, #f5f7fb 100%);
  border-bottom: 1px solid #eef2f7;
}
.json-card__title { display:flex; align-items:center; gap:8px; font-weight:600; font-size:13px; color:#111827; }
.json-badge { display:inline-block; padding:2px 6px; border-radius:6px; background:#0ea5e9; color:#fff; font-weight:700; font-size:11px; letter-spacing:.4px; }
.json-toolbar { display:inline-flex; gap:6px; }

/* 컨테이너가 캔버스가 되도록 */
.json-card__body {
  max-height: 420px;
  overflow: auto;
  background: #0b1020;     /* 다크 코드 캔버스 */
  padding: 14px 16px;
  border-top: 1px solid #0f1222;
}

/* pre는 내용만 표시 (투명) */
.json-pre {
  margin: 0;
  padding: 0;
  background: transparent;
  color: #e6edf3;
  white-space: pre;
  tab-size: 2;
}
.json-pre[data-wrap="true"] {
  white-space: pre-wrap;
  word-break: break-word;
}

/* 하이라이트 색 */
.json-pretty .j-key    { color:#79c0ff; }
.json-pretty .j-string { color:#a5d6c5; }
.json-pretty .j-number { color:#f2cc60; }
.json-pretty .j-bool   { color:#d2a8ff; font-weight:600; }
.json-pretty .j-null   { color:#9ca3af; font-style:italic; }
.json-pretty .j-punct  { color:#cdd9e5; }

/* 줄번호 */
.line-numbers { counter-reset: ln; }
.line-numbers .ln { display:block; position:relative; padding-left:44px; }
.line-numbers .ln::before {
  counter-increment: ln; content: counter(ln);
  position:absolute; left:10px; width:28px; text-align:right;
  color:#94a3b8; opacity:.75;
}

/* ========== 8) 접근성 ===================================================== */
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible {
  outline: 2px solid transparent;
  box-shadow: 0 0 0 3px var(--accent-50), 0 0 0 1px var(--accent-600);
  border-radius: .375rem;
}

/* ========== 9) 다운로드 카드/토글 몰입감 =================================== */
#tab-downloads .border.rounded.p-3.bg-white:hover {
  box-shadow: 0 6px 18px rgba(2,6,23,.06);
}
details > summary {
  list-style: none;
  cursor: pointer;
}
details > summary:hover { color: var(--accent-700); }
details > summary::-webkit-details-marker { display: none; }

/* ===================== 푸터 스타일 ===================== */
/* Footer: 좌 로고 · 우 텍스트 */
/* 공통 컨테이너 폭(헤더/메인/푸터 통일) */
.shell {
  max-width: 72rem;           /* ≈ Tailwind max-w-6xl */
  margin: 0 auto;
  padding: 0 1rem;
}

/* Footer: 배경/라인 제거, 그리드 정렬 */
.site-footer{
  position: relative;
  z-index: 2;
  background: transparent;    /* 반투명 배경 제거 */
  border-top: none;           /* 라인 제거 */
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.site-footer .footer-inner{
  display: grid;
  grid-template-columns: auto 1fr; /* 좌: 로고, 우: 텍스트 */
  align-items: center;
  gap: 1rem 1.25rem;
}
.footer-logo{
  width: auto;               /* 542x86의 50% */
  height: 30px;
  display: block;
}
.footer-text{
  font-size: .75rem;
  color: var(--muted);
  line-height: 1.45;
  text-align: right;
}

/* 푸터: sm (640px) 이상 - 글자 크기 증가 */
@media (min-width: 640px){
  .footer-text{
    font-size: .8125rem;  /* 13px */
  }
}

/* 푸터: ~ sm (640px 미만) - 수직 스택 */
@media (max-width: 639px){
  .site-footer .footer-inner{
    grid-template-columns: 1fr;
    text-align: center;
  }
  .footer-logo{ display: none; }  /* 모바일에서 로고 숨김 */
  .footer-text{ text-align: center; }
}

/* ===================== 중첩 main 전용(관리 화면) ===================== */
/* 바깥 <main>은 그대로 두고, 그 안쪽 <main>만 2열 레이아웃 적용 */
/* ===================== 1) nested main(= main 안의 main)만 카드화/패딩 ===================== */
main main{
  margin: 0;
}

/* 버튼/라벨 세로깨짐 방지 + 고정폭(w-*) 무력화(안쪽만) */
main main .btn,
main main button,
main main label{
  white-space:nowrap;
  word-break:keep-all;
}
main main .btn{ width:auto !important; }  /* w-10 등 강제폭 무시 */

/* 테이블 가독성 & 가로 스크롤 허용(좁을 때 깨짐 방지) */
main main .table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
main main table th,
main main table td{ padding:.5rem .75rem; vertical-align:middle; }
main main select, 
main main input[type="file"]{ max-width:100%; }

/* (선택) 좌측 사이드 같은 보조영역 최소폭만 확보 */
main main aside{ min-width:240px; }
/* 중첩 main aside: ~ lg (1024px 미만) */
@media (max-width:1023px){ main main aside{ min-width:0; } }