ㄴ/* layout.css — 달콤이 전용 미니 킷 */
*,*::before,*::after{ box-sizing:border-box; }

:root{
  --pad: clamp(12px, 2.5vw, 24px);
  --gap: 12px;
  --maxw: 1100px;
  --radius: 16px;
  --border: 1px solid #e5e7eb;
  --text: #666666;          /* 본문 */
  --muted: #6b7280;         /* 보조 텍스트 */
  --accent: #0ea5e9;        /* 강조 색(링크/하이라이트) */
  --mark-bg: #fff3bf;       /* 형광펜 느낌 */
    
}
html,body{margin:0}
body{font-family:system-ui,-apple-system,"Apple SD Gothic Neo",Roboto,"Noto Sans KR",sans-serif;}


/* 1) 컨테이너(가운데 정렬 + 좌우 패딩) */
.container{ max-width:var(--maxw); width:95%; margin-inline:auto; padding:var(--pad); }

/* 2) 카드(박스) */
.card{background:#fff;border:var(--border);border-radius:var(--radius);padding:var(--pad);box-shadow:0 2px 12px rgba(0,0,0,.05)}

/* 3) 스택(수직 간격만 자동) */
.stack>*+*{margin-top:var(--gap)}

/* 4) 그리드(모바일 1열 → 넓어지면 2/3열) */
.grid{display:grid;gap:var(--gap)}
@media (min-width:768px){ .grid.cols-2{grid-template-columns:1fr 1fr} }
@media (min-width:1024px){ .grid.cols-3{grid-template-columns:1fr 1fr 1fr} }
.grid .full{grid-column:1/-1} /* 넓게 펼치기 */

/* 5) 폼 기본 */
label{display:block;font-weight:600;margin:6px 0}
button,textarea{width:90%;padding:12px;border:1px solid #ddd;border-radius:12px; font-size:16px; inline-size: min(100%, 600px);}
input,select{width:100%;padding:12px;border:1px solid #ddd; height:30px; border-radius:12px; font-size:16px; inline-size: min(90%, 600px);}
button{background:#111;color:#fff;border:0;font-weight:700}


.box{
  display:inline-block;   /* ← 추가 */
  align:right;
  width:80px;
  height:30px;
  line-height:30px;       /* 세로 가운데 */
  padding:0 8px;          /* 위아래 패딩은 높이와 겹치니 좌우만 */
  background:#eee;
  color:#666;             /* ← # 빠져있었음! */
  border-radius:6px;
  font-weight:400;
}

/* 
6) 레거시 표 안전 보완
*/
.table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
table { width:100%; border-collapse:collapse; }
td { padding:8px 6px; }

 /* 7) 모바일에서 라벨 칼럼/이미지 대응 */
@media (max-width:640px){
  img[width="600"]{ max-width:100%; height:auto; }
  .gray_01 { white-space:nowrap; } 
}


.at{color:#999999;}
.ats{color:red;}

/* 추천 바디 css */

body{
  color: var(--text);
  line-height: 1.6;
  letter-spacing: -0.2px;   /* 한글 가독성 보정 */
}

/* 본문 폭 제어(선택) */
.prose{
  max-width: 72ch;          /* 한 줄 길이 제한 */
}

/* 제목 */
h1, .h1{
  color:#000;
  font-size: clamp(26px, 4.2vw, 36px);
  line-height: 1.2;
  font-weight: 800;
  margin: 0.6em 0 0.4em;
}
h2, .h2{
  color:#006699;    
  font-size: clamp(20px, 3.2vw, 28px);
  line-height: 1.25;
  font-weight: 700;
  margin: 1.2em 0 0.5em;
}
h3, .h3{
  font-size: clamp(18px, 2.6vw, 22px);
  line-height: 1.3;
  font-weight: 700;
  margin: 1.1em 0 0.4em;
}

/* 본문 텍스트 */
p{ margin: 0.8em 0; font-size: 16px; }
.lead{ font-size: 18px; line-height: 1.7; color: var(--muted); }  /* 도입/요약 */
.small{ font-size: 14px; line-height:17px; color: var(--muted); }
.smallred{ font-size: 14px; line-height:17px; color:red; }
.smallunder{ font-size: 14px; text-decoration: underline; color: var(--muted); }
.muted{ color: var(--muted); }

/* 강조 */
.em{ font-style: italic; }
.strong{ font-weight: 700; }
.strongred{ color:red; font-weight: 700; }
.mark{ background: var(--mark-bg); padding: 0 .2em; border-radius: 4px; }
.badge{
  display:inline-block; font-size:12px; font-weight:700;
  padding: .2em .55em; border-radius: 999px; background:#eef2ff; color:#3730a3;
}

/* 구분선 */
.hr{ border:0; height:1px; background:#e5e7eb; margin: 1.5rem 0; }
.hr2{ border:0; height:1px; background::#eeeeee; margin: 0; }

/* 링크 */
a{ color: var(--accent); text-decoration: none; }
a:hover{ text-decoration: underline; }

/* 목록 */
ul, ol{ padding-left: 1.2em; margin: .6em 0; }
li+li{ margin-top: .25em; }

/* 인용문 */
blockquote{
  margin: 1em 0; padding: .6em .9em; background:#f8fafc; border-left: 4px solid #cbd5e1;
}

/* 코드(인라인/블록) */
code{ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .95em; background:#f3f4f6; padding:.1em .3em; border-radius:4px; }
pre{
  background:#0b1020; color:#e5e7eb; padding:14px; border-radius:12px; overflow:auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; line-height:1.55;
}


/* ========== Table: 기본 ========== */
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  background: #fff;
}  

.rd {
border: 1px solid #e5e7eb;
border-radius: 20px;
}

.rb {
  background: #eeeeee;
    border-radius: 20px;
}

.table th, .table td {
  padding: 10px 32px;
  border: 1px solid #e5e7eb;
  vertical-align: middle;
}
.table thead th {
  background: #f8fafc;
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
}
.table tbody tr:hover {
  background: #f9fafb;
}


/* 숫자/정렬 유틸 */
.t-right { text-align: right; }
.t-center{ text-align: center; }
.nowrap  { white-space: nowrap; }
.clip    { max-width: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 스크롤 래퍼(작은 화면 가로 스크롤) */
.table-scroll {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
}
 .table-scroll .table { min-width: 720px; }   /* 컬럼 많은 표 보호 */

/* 헤더 고정(스크롤 래퍼 안에서) */
.table-sticky thead th {
  position: sticky; top: 0; z-index: 1;
  box-shadow: 0 1px 0 #e5e7eb;
}

/* 상태 배지 */
.badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
}
.badge.-paid    { background:#ecfdf5; color:#065f46; }  /* 입금 */
.badge.-pending { background:#fef3c7; color:#92400e; }  /* 미입금 */
.badge.-cancel  { background:#fee2e2; color:#991b1b; }  /* 취소 */

/* ========== Table: 모바일 스택 모드 ========== */
/* data-label을 이용해 카드형으로 변환 */
@media (max-width: 640px) {
  .table--stacked thead { display: none; }
  .table--stacked, .table--stacked tbody, .table--stacked tr, .table--stacked td {
    display: block;
    width: 100%;
    border: 0;
  }
  .table--stacked tbody tr {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 8px 10px;
    margin: 10px 0;
    background: #fff;
  }
  .table--stacked td { 
    display: grid;
    grid-template-columns: 9em 1fr;
    gap: 8px;
    padding: 6px 0;
    border: 0;
  }
  .table--stacked td::before {
    content: attr(data-label);
    font-weight: 700;
    color: #4b5563;
  }
  .table--stacked .t-right { text-align: left; } /* 카드형에선 좌측 정렬 */
}

/* 상단 이미지: 데스크톱에서만 노출 */
.hero-pc { display:none; margin:16px 0; }
.hero-pc img { max-width:100%; height:auto; border-radius:8px; }

/* 공통 네비 */
.info-nav { margin:12px 10px 20px; }

/* 모바일(기본): 가로 스크롤 ‘필(Tab)’ */
.info-nav ul{
  display:flex; gap:8px; padding:0; margin:0;
  list-style:none; overflow-x:auto; -webkit-overflow-scrolling:touch;
}
.info-nav li{ flex:0 0 auto; }
.info-nav a{
  display:block; padding:10px 14px; border:1px solid #e5e7eb; border-radius:999px;
  background:#fff; color:#111; text-decoration:none; white-space:nowrap; font-size:14px;
}
.info-nav a.active{ background:#111; color:#fff; border-color:#111; }

/* 데스크톱: 좌측 세로 메뉴 + 상단 이미지 노출 */
@media (min-width: 992px){
  .hero-pc{ display:block; }

    
    
  /* 레이아웃: 좌측 메뉴 200px, 우측 본문 */
  .info-layout{
    display:grid; grid-template-columns: 200px 1fr; gap:24px;
    align-items:start;
  }

  /* 세로 메뉴 스타일로 전환 */
  .info-nav ul{
    display:block; overflow:visible; border:1px solid #e5e7eb; border-radius:8px;
    padding:8px; background:#fafafa;
  }
  .info-nav li + li{ margin-top:6px; }
  .info-nav a{
    border-radius:8px; display:block; width:100%;
    padding:10px 12px; font-size:15px;
  }
}




/*
Footer base 
하단영
*/


.site-footer{
  margin-top: 32px;
  border-top: 1px solid #e5e7eb;
  background:#fff; /* 다크모드 고려 시 변경 */
}
.site-footer .footer-wrap{
  max-width: 1100px;
  margin: 0 auto;
  padding: 16px clamp(12px,2.5vw,24px);
  display: grid;
  grid-template-columns: 1fr;        /* 모바일: 한 줄 */
  gap: 16px;
  align-items: start;
}

/* 브랜드 로고: 모바일에선 작게/옵션으로 숨김 */
.footer-brand img{
  display:block;
  width: 180px;         /* 모바일에서 작게 */
  height: auto;
  object-fit: contain;
}

/* 텍스트 영역 */
.footer-title{ display:block; font-size:16px; font-weight:700; margin-bottom:6px; }
.footer-address,
.footer-contact,
.footer-org,
.footer-copy{ 
  margin: 4px 0;
  color: #555; 
  font-size: 14px;
  line-height: 1.3;
}
.footer-contact a{ color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.footer-copy{ color:#777; font-size: 13px; }

/* 데스크톱 배치: 로고 좌측, 텍스트 우측 */
@media (min-width: 768px){
  .site-footer .footer-wrap{
    grid-template-columns: 300px 1fr; /* 왼쪽 로고, 오른쪽 텍스트 */
    gap: 24px;
  }
  .footer-brand img{ width: 250px; }  /* 데스크톱에서 조금 크게 */
}

/* 더 큰 화면에서 로고 키우기 */
@media (min-width: 1024px){
  .footer-brand img{ width: 300px; }
}

/* (옵션) 정말 모바일에서 로고를 완전히 숨기고 싶다면 이 한 줄만 교체*/
@media (max-width: 767px){
  .footer-brand{ display:none; }
}


.footer-contact .email-block{
  white-space: nowrap;        /* 라벨과 메일 시작은 같은 줄에 */
}
.footer-contact .email-block a{
  white-space: normal;        /* 링크 내부는 줄바꿈 가능 */
  overflow-wrap: anywhere;
  word-break: break-word;
}




/* 데스크탑 */
@media (min-width: 769px){
  #menu-toggle, .menu-icon{ display:none; }
  .menu{ display:flex !important; }
}

/* 모바일 */
@media (max-width: 768px){
  .menu{ display:none; flex-direction:column; background:#fff; }
  #menu-toggle:checked + .menu-icon + .menu{ display:flex; }
}


/* 공용 타이포 래퍼 */
.prose{
  max-width: 70ch;            /* PC에서 한 줄 길이 제한 */
  margin: 0 auto;             /* 가운데 정렬 */
  font-size: clamp(15px, 1.8vw, 18px);
  line-height: 1.75;
  color: #222;
}

/* 한국어 줄바꿈/띄어쓰기 품질 */
.prose p{
  word-break: keep-all;       /* 한국어 단어 중간 강제분절 방지 */
  overflow-wrap: anywhere;    /* 긴 영문/URL은 알아서 개행 */
  line-break: strict;         /* 한글 문장부호 줄바꿈 규칙 강화 */
  margin: 0 0 1em;
}

/* 제목 줄나눔 균형(지원 브라우저에서 예쁨) */
.prose h1,.prose h2{ 
  text-wrap: balance;         /* Chrome/Safari 최신 */
}

/* 좁은 화면에서는 좌우 여백만 챙김 */
@media (max-width: 768px){
  .prose{ max-width: 100%; padding: 0 16px; }
}

/*모바일에서 문단 바꾸기 */
.br-sm { display: none; }
@media (max-width: 768px){ .br-sm { display: block; height: 0; margin:-7px; } }
/* 약관 카드 */
.agree{max-width:960px;margin:0 auto}
.term{border:1px solid #e5e7eb;border-radius:12px;background:#fff;margin:10px 0;overflow:hidden}
.term summary{list-style:none;cursor:pointer;padding:14px 16px;background:#f8fafc;font-weight:700}
.term summary::-webkit-details-marker{display:none}
.term-body{padding:10px 16px 14px}
.term-content{max-height:180px;overflow:auto;-webkit-overflow-scrolling:touch;padding:10px;border:1px solid #eef2f7;border-radius:8px;background:#fff;line-height:1.6;font-size:14.5px;color:#444}

.agree-row{display:flex;align-items:center;justify-content:space-between;margin-top:10px;gap:10px;flex-wrap:wrap}
.btnbar{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:16px}
.btn{padding:12px 18px;border-radius:10px;cursor:pointer;border:0}
.btn-primary{background:#0b64d8;color:#fff;font-weight:700}
.btn-light{background:#f3f4f6;color:#111;border:1px solid #e5e7eb}
@media (max-width:640px){.term-content{max-height:160px;font-size:14px}}