@charset "utf-8";
/* Maker : H.J Jeon // E-Mail : jinia21@naver.com */

/* ------------------------------------------------------------
   theme-basic.css — 디자인 토큰

   ① 프로젝트 설정 : 새 프로젝트마다 여기만 채움 (시안에서 잼)
   ② 역할 토큰     : ① 에서 저절로 계산. 화면 CSS 는 이 이름만 씀
   부품 모양은 여기 두지 않음 — 버튼 · 폼은 form.css, 그 밖은 common.css
   (버튼 · 입력칸 크기 같은 부품 토큰은 ② 에 있음)

   화면 CSS 에는 값을 직접 쓰지 않음
   새 토큰 이름을 만들기 전에 있는 토큰부터 찾음
   값이 안 맞으면 새 이름 대신 토큰 값을 바꾸자고 제안함
   developer.css 는 사람이 쓰는 덮어쓰기 자리. AI 는 손대지 않음
------------------------------------------------------------ */


/* ------------------------------------------------------------
   반응형 기준표 — 모바일 먼저. 모든 CSS 가 이 숫자만 씀
   미디어 쿼리는 변수를 못 써서 숫자를 여기 정해 둠

   기본값(쿼리 밖)이 폰. 넓어질 때 min-width 로 덮음
   max-width 는 쓰지 않음. 새 구간을 만들지 않음
   기기 이름이 아니라 「한 줄에 몇 개 들어가나」로 나눔
   (구글 머티리얼 창 크기 등급과 같은 숫자)

   기본       폰 — 아이폰 393 · 갤럭시 S 384 · 폴드7 바깥 412
              · 아이폰 듀오 바깥 466                      1열
   600 이상   중간 — 아이패드 미니 세로 744 · 아이패드 세로 820
              · 아이폰 듀오 안쪽 626~890 · 폰 가로 734~832 2열
   840 이상   넓음 — 폴드7 안쪽 984 · 아이패드 가로 1180
              · 노트북 · PC                               3열
   1240 이상  넓은 PC — 넓게 펼치는 배치가 필요할 때만    4열

   입력 방식 — 가로 메뉴 · 마우스 올림 펼침은 넓고 마우스일 때만
     @media (min-width: 840px) and (hover: hover) and (pointer: fine)
     폴드 펼침 · 태블릿 가로처럼 넓어도 손가락 기기면 전체 메뉴 버튼
     기기 미리보기가 손가락 기기를 흉내 내면 html[data-touch]
     → 선택자 앞에 :root:not([data-touch]) 를 붙임

   - 최소 폭 320 에서 가로 스크롤이 없어야 함 (웹 접근성 —
     PC 브라우저 400% 확대가 곧 320 폭)
   - 높이는 브라우저 안 기준. 폰은 주소창 · 도구 막대를 빼면
     세로가 660~750 안팎 → 첫 화면은 100vh 하나로 채우지 말고 svh
   - 글자 크기 · 섹션 여백 · 헤더 높이는 ② 역할 토큰에서 저절로
     커짐 → 화면 CSS 에서 이것 때문에 미디어 쿼리를 쓰지 않음
   - JS 는 common.js config.mq 의 같은 조건을 씀
   - 기기에서 어떻게 보이나 : 주소 뒤 ?device-mode=on
     (kit devframe on <폴더> 로 붙였을 때)
------------------------------------------------------------ */


/* ============================================================
   ① 프로젝트 설정 — 새로 만들 때 여기만 채움
   시작 점검에서 Claude 가 시안을 재서 제안함 (잰 값 / 추정 값 밝힘)
   ============================================================ */
:root {
    /* 브랜드 색 */
    --brand-point: #0219C8;     /* 주 색 — 버튼 · 링크 · 활성 탭. 파랑새 로고 색 (흰 바탕 대비 10.6) */
    --brand-sub: #3E6DD1;       /* 보조 색 — 두 번째 버튼 · 보조 강조 */
    --brand-accent: #FB4455;    /* 강조 — 뱃지 · 실시간 · 새 글 표시 */
    --brand-on: #FFF;           /* 주 색 · 보조 색 위 글자 */

    /* 글자 · 회색 · 어두운 바탕 */
    --brand-text: #191A1C;      /* 본문 글자 */
    --brand-gray: #697486;      /* 회색 기준 — 안내 글자 · 선 · 옅은 바탕이 이 색에서 나옴 (흰 바탕 대비 4.7) */
    --brand-dark: #0F0F10;      /* 어두운 섹션 · 푸터 바탕 */
    --brand-bg: #FFF;           /* 페이지 바탕 */

    /* 서체 */
    --font-basic: 'Pretendard Variable';
    --font-point: var(--font-basic);    /* 영문 제목처럼 눈에 띄어야 하는 곳. 정하기 전까지 본문 서체 */
    --tracking-title: 0;                /* 제목 자간 — 시안이 좁으면 -0.02em 처럼 */

    /* 레이아웃 */
    --container-width: 1440px;          /* 좌우 여백 포함. 1440 이면 내용 폭 1400 */
    --container-wide: 1640px;
    --container-padding: 20px;
    --header-height-pc: 90px;
    --header-height-pc-slim: 70px;      /* 내려서 줄어든 헤더 */
    --header-height-m: 64px;            /* 폰 (600 미만) */
    --header-height-m-slim: 56px;
    --section-space: 100px;             /* 메인 섹션 위아래 여백 (840 이상 값). 폰 · 중간에서 저절로 줄어듦 */

    /* 모양 */
    --radius-base: 8px;                 /* 각진 사이트 4 · 보통 8 · 둥근 사이트 12~16. 단계가 여기서 나옴 */
}

/* 관리자 화면 — ① 만 덮음. 반드시 <html data-site="admin"> 에 붙임
   (② 는 :root 에서 계산돼 내려오므로 body 에 붙이면 안 바뀜) */
[data-site="admin"] {
    /* 2026-10-18 새 관리자 디자인 — 사이트 대표색(로고 파랑)을 그대로 씀. 관리자만 다른 색을 쓰려면 여기 --brand-point 를 넣음 */
}


/* ============================================================
   ② 역할 토큰 — ① 에서 계산. 화면 CSS 는 이 이름만 씀
   반투명은 color-mix(in srgb, 색이름 8%, transparent) 형태로 씀
   ============================================================ */

/* 색 — 이름은 쓰임새로 */
:root {
    --color-white: #FFF;
    --color-black: #000;

    /* 브랜드 */
    --color-point: var(--brand-point);
    --color-point-hover: color-mix(in srgb, var(--brand-point), #000 20%);
    --color-point-soft: color-mix(in srgb, var(--brand-point) 8%, var(--brand-bg));
    --color-sub: var(--brand-sub);
    --color-sub-hover: color-mix(in srgb, var(--brand-sub), #000 20%);
    --color-accent: var(--brand-accent);
    --color-on-brand: var(--brand-on);

    /* 글자 — 진한 순 */
    --color-text: var(--brand-text);
    --color-text-hover: color-mix(in srgb, var(--brand-text), #000 40%);
    --color-text-sub: color-mix(in srgb, var(--brand-text) 45%, var(--brand-gray));       /* 부제 · 설명 */
    --color-text-sub-hover: color-mix(in srgb, var(--brand-text) 80%, var(--brand-gray));
    --color-text-weak: var(--brand-gray);                                                  /* 안내 · 날짜 · 입력칸 안내 글자 */
    --color-text-faint: color-mix(in srgb, var(--brand-gray) 68%, var(--brand-bg));        /* 한 단계 더 물러남. 글자로 쓰면 대비 모자람 */
    --color-text-inverse: var(--color-white);

    /* 면 */
    --color-bg: var(--brand-bg);
    --color-bg-soft: color-mix(in srgb, var(--brand-gray) 3%, var(--brand-bg));            /* 옅은 섹션 */
    --color-bg-gray: color-mix(in srgb, var(--brand-gray) 6%, var(--brand-bg));            /* 회색 섹션 · 표 머리 */
    --color-bg-dark: var(--brand-dark);
    --color-surface: var(--brand-bg);                                                      /* 카드 · 입력칸 · 상자 */

    /* 선 */
    --color-line: color-mix(in srgb, var(--brand-gray) 16%, var(--brand-bg));
    --color-line-soft: color-mix(in srgb, var(--brand-gray) 6%, var(--brand-bg));
    --color-line-strong: color-mix(in srgb, var(--brand-gray) 78%, var(--brand-bg));      /* 체크 · 라디오 · 스위치 테두리. 흰 바탕 3:1 넘김 */
    --color-line-field: var(--color-line);                                                 /* 입력칸 테두리. 3:1 을 요구받으면 line-strong */

    /* 상태 */
    --color-error: #E4032E;     /* 흰 바탕 대비 4.83 */
    --color-success: #008236;
    --color-warning: #B45309;
    --color-info: #0052FF;
    --color-sun: var(--color-error);    /* 달력 일요일 */
    --color-sat: var(--color-info);     /* 달력 토요일 */

    /* 푸터 — 어두운 바탕에서 계산 */
    --color-footer-bg: var(--brand-dark);
    --color-footer-line: color-mix(in srgb, var(--color-white) 14%, transparent);
    --color-footer-dim: color-mix(in srgb, var(--color-white) 76%, var(--brand-dark));
    --color-footer-copy: color-mix(in srgb, var(--color-white) 40%, var(--brand-dark));
    --color-footer-link: var(--color-white);

    /* 키보드 초점 테두리. 주 색이 연하면 진한 색으로 따로 */
    --focus-color: var(--color-point);
}


/* 글자 — 단계 (값) */
:root {
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;

    --font-size-2xs: 0.813rem;  /* 13 */
    --font-size-xs: 0.875rem;   /* 14 */
    --font-size-sm: 0.938rem;   /* 15 */
    --font-size-md: 1rem;       /* 16 본문 */
    --font-size-lg: 1.125rem;   /* 18 */
    --font-size-xl: 1.25rem;    /* 20 */
    --font-size-2xl: 1.5rem;    /* 24 */
    --font-size-3xl: 1.625rem;  /* 26 */
    --font-size-4xl: 2rem;      /* 32 */
    --font-size-5xl: 2.5rem;    /* 40 */
    --font-size-6xl: 2.875rem;  /* 46 */
    --font-size-7xl: 3.125rem;  /* 50 */

    --leading-tight: 1.3;       /* 제목 */
    --leading-normal: 1.5;      /* 본문 */
    --leading-loose: 1.7;       /* 긴 글 */
}

/* 글자 — 역할. 폰 값이 기본, 넓어지면 커짐 → 화면 CSS 는 이걸 쓰고 미디어 쿼리를 안 씀
   폰 → 600 이상 → 840 이상 */
:root {
    --text-display: var(--font-size-4xl);    /* 첫 화면 큰 제목      32 → 40 → 46 */
    --text-headline: var(--font-size-3xl);   /* 서브 상단 제목       26 → 32 → 40 */
    --text-title-lg: var(--font-size-2xl);   /* 큰 섹션 제목         24 → 26 → 32 */
    --text-title: var(--font-size-2xl);      /* 섹션 제목            24 → 26 → 26 */
    --text-subtitle: var(--font-size-lg);    /* 카드 · 작은 섹션 제목 18 → 20 → 20 */
    --text-lead: var(--font-size-md);        /* 머리 글              16 → 18 → 20 */
    --text-body: var(--font-size-md);        /* 본문                 16 */
    --text-small: var(--font-size-sm);       /* 보조 글              15 */
    --text-caption: var(--font-size-xs);     /* 날짜 · 출처          14 */
}

/* 레이아웃 — 헤더 높이 · 섹션 여백. 폰 값이 기본 */
:root {
    --header-height: var(--header-height-m);
    --header-height-slim: var(--header-height-m-slim);
    --space-section: calc(var(--section-space) * 0.56);
}

@media screen and (min-width: 600px) {
    :root {
        --text-display: var(--font-size-5xl);
        --text-headline: var(--font-size-4xl);
        --text-title-lg: var(--font-size-3xl);
        --text-title: var(--font-size-3xl);
        --text-subtitle: var(--font-size-xl);
        --text-lead: var(--font-size-lg);
        --header-height: var(--header-height-pc);
        --header-height-slim: var(--header-height-pc-slim);
        --space-section: calc(var(--section-space) * 0.72);
    }
}

@media screen and (min-width: 840px) {
    :root {
        --text-display: var(--font-size-6xl);
        --text-headline: var(--font-size-5xl);
        --text-title-lg: var(--font-size-4xl);
        --text-lead: var(--font-size-xl);
        --space-section: var(--section-space);
    }
}


/* 모양 · 크기 */
:root {
    /* 둥글기 — radius-base 에서 계산 (8 이면 4 · 6 · 8 · 12 · 16 · 24) */
    --radius-xs: calc(var(--radius-base) * 0.5);
    --radius-sm: calc(var(--radius-base) * 0.75);
    --radius-md: var(--radius-base);
    --radius-lg: calc(var(--radius-base) * 1.5);
    --radius-xl: calc(var(--radius-base) * 2);
    --radius-2xl: calc(var(--radius-base) * 3);
    --radius-pill: 999px;

    /* 썸네일 비율 — 영상과 사진을 구분함 */
    --ratio-video: 16 / 9;
    --ratio-photo: 4 / 3;
    --ratio-square: 1 / 1;

    /* 아이콘 크기 — lucide 는 svg 라 크기를 매번 지정함 */
    --icon-xs: 14px;
    --icon-sm: 16px;
    --icon-md: 18px;
    --icon-lg: 20px;
    --icon-xl: 22px;

    /* 컨트롤 버튼 */
    --ctrl-size: 50px;
    --ctrl-size-sm: 40px;
    --quick-size: 56px;         /* 오른쪽 아래 퀵 단추 */

    /* 버튼 높이 — sm 목록 전환 · md 일반 · lg 강조 */
    --btn-height-xs: 32px;
    --btn-height-sm: 40px;
    --btn-height-md: 46px;
    --btn-height-lg: 50px;

    /* 간격 */
    --space-2xs: 4px;
    --space-xs: 8px;
    --space-sm: 12px;
    --space-md: 16px;
    --space-lg: 20px;
    --space-xl: 24px;
    --space-2xl: 30px;
    --space-3xl: 40px;
    --gap-flow: 30px;           /* 본문 안 형제끼리의 기본 간격 */

    /* 그림자 */
    --shadow-sm: 0 2px 8px color-mix(in srgb, var(--color-text) 6%, transparent);
    --shadow-md: 0 8px 20px color-mix(in srgb, var(--color-text) 8%, transparent);
    --shadow-lg: 0 24px 60px color-mix(in srgb, var(--color-text) 20%, transparent);

    /* 슬라이딩 탭 활성 배경 */
    --tab-focus-height: 40px;
    --tab-focus-radius: 20px;
}


/* 겹침 순서 — 숫자를 직접 쓰지 않고 이 이름으로 */
:root {
    --z-dropdown: 20;           /* 펼침 목록 — 고르기 상자 · 공유 목록 */
    --z-quick: 90;              /* 오른쪽 아래 퀵 */
    --z-progress: 99;           /* 스크롤 진행 막대 */
    --z-header: 100;            /* 위에 붙은 헤더 */
    --z-tooltip: 500;           /* 툴팁 · 안내 풍선 */
    --z-float-pop: 2900;        /* 메인 떠 있는 팝업 */
    --z-modal: 3000;            /* 모달 · 레이어 팝업 · 공유 시트 */
    --z-picker: 3100;           /* 달력 — 모달 안에서도 위 */
    --z-skip: 4000;             /* 건너뛰기 링크 */
    /* 부품 안쪽끼리의 겹침(0 ~ 2)은 숫자 그대로 씀 */
}


/* 움직임 */
:root {
    --duration-fast: 0.2s;      /* 색 · 테두리 바뀜 */
    --duration: 0.3s;           /* 열고 닫기 · 미끄러짐 · 팝업 나타남 */
    --duration-slow: 0.5s;      /* 사진 확대처럼 천천히 */
    --duration-reveal: 0.7s;    /* 스크롤 들어올 때 (common.js inView 가 읽음) */
    --ease: cubic-bezier(0.22, 1, 0.36, 1);   /* 빠르게 시작해 부드럽게 멈춤 — 탭 배경 · 사진 확대 */
}


/* 아이콘 — 기본 Phosphor(글꼴 <i class="ph ph-이름">), 고르면 Lucide(<i data-lucide> → svg)
   부품 CSS 는 :is(svg, i[class*="ph-"]) 로 둘 다 같은 크기 · 자리에 맞춤 */
i[class*="ph-"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1em;
    height: 1em;
    font-style: normal;
    line-height: 1;
    vertical-align: middle;
}

/* 본문 굵기 */
body,
textarea,
select,
td,
th,
input,
button {
    font-weight: var(--font-weight-regular);
}

/* ============================================================
   관리자 화면 글자 — <html data-site="admin"> 일 때만 (공개 사이트는 위 값 그대로)
   표 · 목록이 많은 화면이라 사이트보다 한 단계 촘촘하게, 단 폰은 16 (아이폰 입력칸 자동 확대 막음)
   위 :root 미디어 블록보다 뒤에 있어야 이긴다 (같은 세기 → 뒤가 이김)
   ============================================================ */
[data-site="admin"] {
    --text-title-lg: var(--font-size-3xl);   /* 숫자 카드 숫자       26 → 32 */
    --text-title: var(--font-size-2xl);      /* 화면 제목            24 → 26 → 32 */
    --text-subtitle: var(--font-size-lg);    /* 카드 · 창 제목       18 */
    --text-lead: var(--font-size-md);        /* 머리 글              16 */
    --text-body: var(--font-size-md);        /* 본문 · 메뉴 · 표     16 → 15 */
    --text-small: var(--font-size-sm);       /* 보조 글              15 → 14 */
    --text-caption: var(--font-size-2xs);    /* 날짜 · 배지 · 표 머리 13 */
}

@media screen and (min-width: 600px) {
    [data-site="admin"] {
        --text-title: var(--font-size-3xl);
    }
}

@media screen and (min-width: 840px) {
    [data-site="admin"] {
        --text-title-lg: var(--font-size-4xl);
        --text-title: var(--font-size-4xl);
        --text-body: var(--font-size-sm);
        --text-small: var(--font-size-xs);
    }
}