/* ========== Reset ========== */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  width: 100%;
  font-family: 'Pretendard', sans-serif;
  background-color: #ffffff;
  overflow-x: hidden;
  margin-top: 30px;
  margin-bottom: 30px;
}


/* ========== Vars & Scale ========== */
:root { --content-scale: 1; --footer-h: 60px; }

/* 중앙 영역만 글자 스케일 적용 (홈/하위 공통) */
main, .container, .content, .page, .home {
  font-size: calc(1em * var(--content-scale));
}

/* ========== Layout ========== */
:root {
  --header-h: 60px;
  --footer-h: 60px;
}

.container {
  display: flex;
  flex-direction: column;
  padding: 20px;
  box-sizing: border-box;
  flex: 1;
  min-height: auto;
}

.container :is(img, svg) {
  display: block; 
  margin: 20px -20px 10px;
  width: calc(100% + 40px); 
  height: auto;
}

.container .info{
  margin-top: 5px;
  display:flex;
  align-items:center;
  gap:5px;
  line-height:1.5;
}



/* ========== Font System ========== */
:root{
  --font-sans: 'Pretendard';

  --fs-title: 32px;   --fw-title: 700; /* Bold */
  --fs-sub:   24px;   --fw-sub:   600; /* SemiBold */
  --fs-body:  16px;   --fw-body:  500; /* Medium */

  --lh-title: 1.25;
  --lh-sub:   1.35;
  --lh-body:  1.6;
}

/* 본문 기본(스케일 반영) */
:is(main, .container, .content, .page, .home){
  font-family: var(--font-sans);
}

.text-title, .title{
  font-family: var(--font-sans);
  font-size: calc(var(--fs-title) * var(--content-scale));
  font-weight: var(--fw-title);
  line-height: var(--lh-title);
  letter-spacing: -0.01em;
  margin-bottom: calc(40px * var(--content-scale));
}

.text-subtitle, .subtitle{
  font-family: var(--font-sans);
  font-size: calc(var(--fs-sub) * var(--content-scale));
  font-weight: var(--fw-sub);
  line-height: var(--lh-sub);
  letter-spacing: -0.005em;
  margin-bottom: calc(20px * var(--content-scale));
}

.text-body, .body-text{
  font-family: var(--font-sans);
  font-size: calc(var(--fs-body) * var(--content-scale));
  font-weight: var(--fw-body);
  line-height: var(--lh-body);
  margin-bottom: calc(5px * var(--content-scale));
}

.caption {
  font-family: var(--font-sans);
  font-size: calc(12px * var(--content-scale));
  font-weight: 500;
  line-height: 1.4;
  margin-bottom: 0px;
  color: #000000;
}

.numbered-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.numbered-list li {
  display: flex;
  align-items: flex-start;
  margin-bottom: 16px;
}

.number-box {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #333;
  color: #fff;
  font-weight: bold;
  text-align: center;
  line-height: 28px;
  margin-right: 8px;
  flex-shrink: 0;
}


.caption {
  color: #555;
  margin-top: 2px;
}


/* 캡션 다크 모드 */
html.dark-mode .caption {
  color: #ffffff;
}

/* 넘버링 문구 컨테이너 */
.numbered-text {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 12px;
  position: relative;
  padding-left: calc((28px + 8px) * var(--content-scale));
  font-family: var(--font-sans);
  font-size: calc(var(--fs-body) * var(--content-scale));
  font-weight: var(--fw-body);
  line-height: var(--lh-body);
}


/* 넘버링 */
.number-label {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(28px * var(--content-scale));
  height: calc(28px * var(--content-scale));
  border-radius: 50%;
  background-color: #000;
  color: #fff;
  font-size: calc(var(--fs-body) * var(--content-scale));
  font-weight: var(--fw-title);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 다크 모드 반전 */
html.dark-mode .number-label {
  background-color: #fff;
  color: #000;
}

.info {
  display: flex;                 /* 라벨 + 텍스트 가로 배치 */
  align-items: flex-start;       /* 텍스트 첫 줄 기준 정렬 */
  gap: 8px;                      /* 라벨과 텍스트 간격 */
  margin-top: 5px;

  font-family: 'Pretendard', sans-serif;
  font-size: calc(16px * var(--content-scale));
  font-weight: 500;
  line-height: 1.5;
}

.info-label {
  display: inline-flex;      /* inline-block 대신 inline-flex */
  align-items: center;       /* 라벨 안 글자도 세로 중앙 정렬 */
  white-space: nowrap;
  font-weight: 700;
  font-size: calc(16px * var(--content-scale));
  padding: 4px 14px;
  background-color: #246ff4;
  color: #fff;
  border-radius: 50px;
  margin-right: 5px;
}

/* 불릿박스 */
.bullet-box {
  font-family: var(--font-sans);
  font-size: calc(var(--fs-body) * var(--content-scale));
  font-weight: var(--fw-body);
  line-height: var(--lh-body);
  background-color: #f2f2f2; 
  border-radius: 6px; 
  padding: 12px 16px; 
  margin-top: 10px;
  margin-bottom: 0px; 
}

/* ul 기본 점 스타일 유지 */
.bullet-box ul {
  margin: 0;
  padding-left: 20px;
}

.bullet-box li {
  margin-bottom: 6px;
}

/* 다크 모드 반전 */
html.dark-mode .bullet-box {
  background-color: #424242; 
  color: #ffffff;
}


/* ========== App banner ========== */
.app-banner-wrapper { position: relative; width: 100%; margin-bottom: 80px; }
.app-banner-bg { width: 100%; display: block; }
.download-btn {
  position: absolute; bottom: 20px; left: 20px; width: 80px; height: 80px;
  padding: 0; border: none; background: transparent; cursor: pointer; z-index: 10;
}
.download-btn img { width: 100%; height: auto; display: block; }

/* ========== Header ========== */
.header{
  position: fixed; top: 0; left: 0; width: 100%; height: 60px;
  background-color:#246FF4; z-index:100;
  display:flex; align-items:center; justify-content:space-between; padding:0 16px; gap:8px;
}
.header-symbol { width:30px; height:30px; display:block; }
.header-title  { font-size:20px; font-weight:600; color:#fff; margin:0; }

/* 이전으로 버튼 */
.back-link,
.back-home-link:link,
.back-home-link:visited{
  background:#fff; color:#246ff4;
  text-decoration:none; font-weight:bold; display:inline-block; padding:6px 12px; border-radius:6px;
  border: none;
  outline: none;
}


/* ========== Footer (항상 라이트) ========== */
.footer-accessibility {
  position: fixed; bottom: 0; left: 0;
  width: 100%; height: 60px;
  display: flex; justify-content: center; align-items: center;
  background-color: #fff; color:#000; border-top: 1px solid #000;
  font-size: 16px; padding: 5px 6px; z-index: 100;
  gap: 8px;
}
.footer-accessibility .tool-group { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.footer-accessibility .tool-button { display: flex; align-items: center; }
.footer-accessibility input[type="radio"], .footer-accessibility input[type="checkbox"] { display: none; }
.footer-accessibility label {
  cursor: pointer; 
  padding: 4px 8px; 
  border-radius: 4px; 
  font-weight: 500; 
  color: #000; 
  transition: .2s;
}
.footer-accessibility label{ font-size: 18px !important; }

/* 다크모드 푸터 색*/
html.dark-mode .footer-accessibility,
body.dark-mode .footer-accessibility {
  background:#111 !important;
  color:#fff !important;
  border-top:1px solid #444 !important;
}

/* 라벨은 기존에 #000로 고정돼 있으니 덮어쓰기 */
html.dark-mode .footer-accessibility label,
html.dark-mode .footer-accessibility strong { 
  color:#fff !important;
}

/* 선택된 pill도 반전(라이트에선 검정 pill → 다크에선 흰 pill) */
html.dark-mode .footer-accessibility input:checked + label{
  background:#fff !important;
  color:#000 !important;
}

/* 포커스 아웃라인도 밝게 */
html.dark-mode .footer-accessibility input:focus + label{
  outline-color:#fff !important;
}

/* (경계선 쓰면) 그룹 구분선 색 어둡게 */
html.dark-mode .footer-accessibility .tool-group + .tool-group{
  border-left-color:#444 !important;
}


/* 선택 pill */
.footer-accessibility input:checked + label {
  background-color: #000; color: #fff; font-weight: 700;
}
/* 포커스 표시 깔끔하게 */
.footer-accessibility input:focus, .footer-accessibility label:focus { outline: none; box-shadow: none; }
.footer-accessibility input:focus + label { outline: 2px solid #000; outline-offset: 2px; }

/* ========== Chapter list (홈) ========== */
.chapter-head{
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(160px * var(--content-scale, 1));
  padding: calc(20px * var(--content-scale, 1));
  color: #ffffff;
  font-weight: 700;
  font-size: calc(24px * var(--content-scale));
  margin-top: 60px;
}
.chapter-head > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.chapter-head .icon {
  width: calc(120px * var(--content-scale, 1));
  height: auto;              /* 비율 유지 */
  vertical-align: middle;
  display: inline-block;
  flex: 0 0 auto;     
}
.chapter-body {
  font-weight: 400;
  font-size: calc(18px * var(--content-scale));
  margin-top: 10px;
  padding: 0px;
  color: #fff;
}
.chapter-links a{
  display:flex; justify-content:space-between; align-items:center;
  padding:40px; text-decoration:none; 
  color:#333333; 
  font-size: calc(24px * var(--content-scale)); 
  font-weight:600; 
  position:relative;
}

.chapter-links a { position: relative; }
.chapter-links a::after{
  content:"";
  position:absolute;
  left:20px; right:20px; bottom:0;
  height:1px; background:#b1b1b1;
}

/* ========== Dark Mode ========== */
/* 헤더: 다크모드에서 검정 */
html.dark-mode .header,
body.dark-mode .header { background:#000 !important; color:#fff !important; }
html.dark-mode .header a,
body.dark-mode .header a { color:#fff; }

/* '이전으로' 버튼은 다크에서도 검정 글자/검정 보더 유지 */
html.dark-mode .header .back-link,
html.dark-mode .header .back-link:link,
html.dark-mode .header .back:visited{
  color:#333333 !important; background:#fff; border-color:#000;
}

/* 일반 페이지(컨테이너형) 중앙 영역 반전 */
html.dark-mode :is(main, .container, .content, .page, .section),
body.dark-mode :is(main, .container, .content, .page, .section) {
  background:#333333 !important; color:#ffffff !important;
}

/* 홈 페이지 전체 반전 + 링크 글자 흰색 */
html.dark-mode body.home,
body.dark-mode.home { background:#333 !important; color:#fff !important; }
html.dark-mode body.home .chapter-links a,
html.dark-mode body.home .chapter-links a span,
body.dark-mode.home .chapter-links a,
body.dark-mode.home .chapter-links a span { color:#fff !important; }

/* 홈: 색상 프레임 제목(Chapter head)은 검정 유지 */
html.dark-mode body.home .chapter-head,
body.dark-mode.home .chapter-head { color:#000 !important; }

/* 홈: 구분선(::before) 흰색 */
.chapter-links a { position: relative; } 

/* ::before 기준점 */
html.dark-mode body.home .chapter-links a + a::before,
body.dark-mode.home .chapter-links a + a::before { background:#fff !important; }

/* 홈: 외부 SVG(arrow.svg) 반전 */
html.dark-mode body.home .chapter-links img[src$="arrow.svg"],
body.dark-mode.home .chapter-links img[src$="arrow.svg"] { filter: invert(1) brightness(2); }

/* 홈 링크 hover */
body.dark-mode.home .chapter-links a:hover { background-color: rgba(255,255,255,0.1); }

/* === Footer button sizing === */
.footer-accessibility {
  --btn-fs: 14px; --btn-py: 6px; --btn-px: 10px; --group-gap: 10px; --tool-gap: 6px;
  gap: var(--group-gap);
}
.footer-accessibility .tool-group { gap: var(--tool-gap); }
.footer-accessibility label { font-size: var(--btn-fs); padding: var(--btn-py) var(--btn-px); line-height: 1; display: inline-flex; align-items: center; }


/* 다크모드일 때 페이지 배경도 어둡게 (마지막 빈 공간까지 검정) */
html.dark-mode,
html.dark-mode body {
  background:#333 !important;
}

html.dark-mode .chapter-body,
body.dark-mode .chapter-body {
  color: #000;
}

.chapter-body {
  max-width: 100%;
  overflow-wrap: break-word; 
  word-break: keep-all; 
  box-sizing: border-box;
}


html.dark-mode .footer-accessibility {
  border-top: none;
}

:root { --side-gap: 20px; }



/* 고지 문구 */
.site-legal{
  box-sizing: border-box;
  width: auto;
  margin: 24px
          max(var(--side-gap), env(safe-area-inset-right))
          max(var(--side-gap), env(safe-area-inset-left));
  margin-top: auto;
  text-align: left;
  font-size: 12px;
  line-height: 1.5;
}

/* 데스크톱 스크롤바로 인한 좌우 비대칭 방지 */
html { scrollbar-gutter: stable both-edges; }

/* 다크모드 색 */
html.dark-mode .site-legal { color:#ffffff; }

html.dark-mode .info-label {
  background-color: #fff;
  color: #333;
}

.group {
  margin-bottom: 80px;
}

/* 화면 중앙 배치 */
.center-stage{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
}

/* 클릭 영역 */
.yt-button{ display:inline-block; }

/* 397×118 비율 유지하며 축소 대응(큰 화면에선 397px로 고정) */
.yt-img{
  display:block;
  width: min(397px, 100%);
  height: auto;
  padding: 0 20px;
  aspect-ratio: 397 / 118;
}

video {
display: block;
  width: calc(100% - 0px);
  margin: 0 auto;
}




/* PC 디스플레이 */
@media (min-width: 1024px) {


  :root {
    --content-scale: 1.05;
    --side-gap: 40px;
  }


  body {
    margin-top: 80px;
    margin-bottom: 80px;
  }

  .container,
  .page,
  .content,
  .home {
    max-width: 400px;
    margin: 0 auto;
    padding: 40px 32px;
  }


  .container :is(img, svg) {
    margin: 24px 0 16px;
    width: 100%;
  }


  .chapter-head {
    max-width: 400px;
    margin: 80px auto 0;
    padding: 40px 32px;
  }

  
    .chapter-links {
    max-width: 400px;
    margin: 0 auto;
  }

  
  .site-legal {
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
  }
}


@media (min-width: 1024px) {

  .header {
    width: 600px;
    left: 50%;
    transform: translateX(-50%);
  }
}

@media (min-width: 1024px) {

  .footer-accessibility {
    width: 600px;
    left: 50%;
    transform: translateX(-50%);
  }
}

@media (min-width: 1024px) {
  .site-legal {
    max-width: 400px;
    margin: 24px auto;
    text-align: center;
  }
}

@media (min-width: 1024px) {


  .app-banner-wrapper {
    max-width: 400px;
    margin: 0 auto 80px;
  }


  .app-banner-bg {
    width: 100%;      
  }


  .download-btn {
    width: 60px;
    height: 60px;
    bottom: 20px;
    left: 20px;
  }

  .download-btn img {
    width: 100%;
    height: auto;
  }
}

.back-link,
.back-home-link {
  cursor: pointer;
}