@charset "utf-8";


/* =========================
   스킨 독립화 - custom.css 없이도 작동
   외부 의존 변수 자체 정의
========================= */
:root {
    --background-color: #ffffff;
    --background-color-gray: #dadada;
    --base-color-black: #000000;
    --base-color-darkblack: #1a1a1a;
    --base-color-sub-black: #555;
    --base-color-white: #fff;
    --color-accent-blue: #3a8afd;
    --color-accent-red-bright: #ff3061;
    --color-accent-red-soft: #ff484f;
    --color-black-rgb: 0, 0, 0;
    --color-gray-100: #f4f4f4;
    --color-gray-150: #ececec;
    --color-gray-180: #dedede;
    --color-gray-190: #dfdfdf;
    --color-gray-200: #eeeeee;
    --color-gray-250: #e9e9e9;
    --color-gray-270: #b8bfc4;
    --color-gray-280: #b5b8bb;
    --color-gray-290: #b3b3b3;
    --color-gray-300: #C0C0C0;
    --color-gray-310: #b2b2b2;
    --color-gray-320: #bbb;
    --color-gray-350: #ccc;
    --color-gray-380: #777;
    --color-gray-400: #919191;
    --color-gray-420: #6b757c;
    --color-gray-430: #676e70;
    --color-gray-440: #656565;
    --color-gray-500: #666666;
    --color-gray-600: #555555;
    --color-gray-900: #333333;
    --color-hex-00aced: #00aced;
    --color-hex-3597d9: #3597d9;
    --color-hex-3a589b: #3a589b;
    --color-hex-4a5158: #4a5158;
    --color-hex-4b5259: #4b5259;
    --color-hex-4e546f: #4e546f;
    --color-hex-565656: #565656;
    --color-hex-6794d3: #6794d3;
    --color-hex-7d7d7d: #7d7d7d;
    --color-hex-d5d5d5: #d5d5d5;
    --color-hex-e74c3c: #e74c3c;
    --color-hex-ed6479: #ed6479;
    --color-sns-facebook: #3b5997;
    --color-sns-google: #ea4026;
    --color-sns-kakao: #fbe300;
    --color-sns-twitter: #09aeee;
    --color-ui-99c2fc: #99c2fc;
    --color-ui-bed4f4: #bed4f4;
    --color-ui-blue-bg: #d6e9ff;
    --color-ui-dde7e9: #dde7e9;
    --color-ui-e2eaf6: #e2eaf6;
    --color-ui-f0f0f0: #f0f0f0;
    --color-ui-f1f1f1: #f1f1f1;
    --color-ui-f3f3f3: #f3f3f3;
    --color-ui-input-bg: #d0d3db;
    --color-ui-light-bg-alt: #f6f6f6;
    --color-ui-line: #e8e8e8;
    --color-white-rgb: 255, 255, 255;
    --font-KR-base: "europa", sans-serif;
    --signature-color: #181d60;
    --sidebar-width-min: 14rem;
    --sidebar-width-pref: 18vw;
    --sidebar-width-max: 20rem;
    --sidebar-width: clamp(var(--sidebar-width-min), var(--sidebar-width-pref), var(--sidebar-width-max));
    --svh-100: 100svh;
    --sub-title-font-size-min: 1.375rem;
    --sub-title-font-size-pref: 1.4583vw;
    --sub-title-font-size-max: 2.125rem;
    --sub-title-font-size: clamp(var(--sub-title-font-size-min), var(--sub-title-font-size-pref), var(--sub-title-font-size-max));
    --sub-title-font-size-line-min: 2.125rem;
    --sub-title-font-size-line-pref: 2.0833vw;
    --sub-title-font-size-line-max: 2.875rem;
    --sub-title-font-size-line: clamp(var(--sub-title-font-size-line-min), var(--sub-title-font-size-line-pref), var(--sub-title-font-size-line-max));
    --text-font-size-min: 0.9375rem;
    --text-font-size-pref: 0.8333vw;
    --text-font-size-max: 1.0625rem;
    --text-font-size: clamp(var(--text-font-size-min), var(--text-font-size-pref), var(--text-font-size-max));
    --text-font-size-line-min: 1.4375rem;
    --text-font-size-line-pref: 1.2500vw;
    --text-font-size-line-max: 1.5625rem;
    --text-font-size-line: clamp(var(--text-font-size-line-min), var(--text-font-size-line-pref), var(--text-font-size-line-max));
    --text-font-title-size-min: 1.125rem;
    --text-font-title-size-pref: 1.0417vw;
    --text-font-title-size-max: 1.375rem;
    --text-font-title-size: clamp(var(--text-font-title-size-min), var(--text-font-title-size-pref), var(--text-font-title-size-max));
    --text-font-title-size-line-min: 1.875rem;
    --text-font-title-size-line-pref: 1.6667vw;
    --text-font-title-size-line-max: 2.125rem;
    --text-font-title-size-line: clamp(var(--text-font-title-size-line-min), var(--text-font-title-size-line-pref), var(--text-font-title-size-line-max));

    /* hardcode 변환 신규 토큰 (자동 추가) */
    --space-1: 0.0625rem;
    --space-2-min: 0.0625rem;
    --space-2-pref: 0.13vw;
    --space-2-max: 0.125rem;
    --space-2: clamp(var(--space-2-min), var(--space-2-pref), var(--space-2-max));
    --space-3-min: 0.125rem;
    --space-3-pref: 0.2vw;
    --space-3-max: 0.1875rem;
    --space-3: clamp(var(--space-3-min), var(--space-3-pref), var(--space-3-max));
    --space-4-min: 0.1875rem;
    --space-4-pref: 0.26vw;
    --space-4-max: 0.25rem;
    --space-4: clamp(var(--space-4-min), var(--space-4-pref), var(--space-4-max));
    --space-5-min: 0.25rem;
    --space-5-pref: 0.33vw;
    --space-5-max: 0.3125rem;
    --space-5: clamp(var(--space-5-min), var(--space-5-pref), var(--space-5-max));
    --space-6-min: 0.3125rem;
    --space-6-pref: 0.39vw;
    --space-6-max: 0.375rem;
    --space-6: clamp(var(--space-6-min), var(--space-6-pref), var(--space-6-max));
    --space-7-min: 0.3125rem;
    --space-7-pref: 0.46vw;
    --space-7-max: 0.4375rem;
    --space-7: clamp(var(--space-7-min), var(--space-7-pref), var(--space-7-max));
    --space-8-min: 0.375rem;
    --space-8-pref: 0.52vw;
    --space-8-max: 0.5rem;
    --space-8: clamp(var(--space-8-min), var(--space-8-pref), var(--space-8-max));
    --space-10-min: 0.5rem;
    --space-10-pref: 0.65vw;
    --space-10-max: 0.625rem;
    --space-10: clamp(var(--space-10-min), var(--space-10-pref), var(--space-10-max));
    --space-12-min: 0.625rem;
    --space-12-pref: 0.78vw;
    --space-12-max: 0.75rem;
    --space-12: clamp(var(--space-12-min), var(--space-12-pref), var(--space-12-max));
    --space-13-min: 0.625rem;
    --space-13-pref: 0.85vw;
    --space-13-max: 0.8125rem;
    --space-13: clamp(var(--space-13-min), var(--space-13-pref), var(--space-13-max));
    --space-14-min: 0.6875rem;
    --space-14-pref: 0.91vw;
    --space-14-max: 0.875rem;
    --space-14: clamp(var(--space-14-min), var(--space-14-pref), var(--space-14-max));
    --space-15-min: 0.75rem;
    --space-15-pref: 0.98vw;
    --space-15-max: 0.9375rem;
    --space-15: clamp(var(--space-15-min), var(--space-15-pref), var(--space-15-max));
    --space-16-min: 0.8125rem;
    --space-16-pref: 1.04vw;
    --space-16-max: 1rem;
    --space-16: clamp(var(--space-16-min), var(--space-16-pref), var(--space-16-max));
    --space-17-min: 0.875rem;
    --space-17-pref: 1.1vw;
    --space-17-max: 1.0625rem;
    --space-17: clamp(var(--space-17-min), var(--space-17-pref), var(--space-17-max));
    --space-18-min: 0.875rem;
    --space-18-pref: 1.17vw;
    --space-18-max: 1.125rem;
    --space-18: clamp(var(--space-18-min), var(--space-18-pref), var(--space-18-max));
    --space-20-min: 1rem;
    --space-20-pref: 1.3vw;
    --space-20-max: 1.25rem;
    --space-20: clamp(var(--space-20-min), var(--space-20-pref), var(--space-20-max));
    --space-24-min: 1.125rem;
    --space-24-pref: 1.56vw;
    --space-24-max: 1.5rem;
    --space-24: clamp(var(--space-24-min), var(--space-24-pref), var(--space-24-max));
    --space-25-min: 1.25rem;
    --space-25-pref: 1.63vw;
    --space-25-max: 1.5625rem;
    --space-25: clamp(var(--space-25-min), var(--space-25-pref), var(--space-25-max));
    --space-26-min: 1.3125rem;
    --space-26-pref: 1.69vw;
    --space-26-max: 1.625rem;
    --space-26: clamp(var(--space-26-min), var(--space-26-pref), var(--space-26-max));
    --space-28-min: 1.375rem;
    --space-28-pref: 1.82vw;
    --space-28-max: 1.75rem;
    --space-28: clamp(var(--space-28-min), var(--space-28-pref), var(--space-28-max));
    --space-30-min: 1.5rem;
    --space-30-pref: 1.95vw;
    --space-30-max: 1.875rem;
    --space-30: clamp(var(--space-30-min), var(--space-30-pref), var(--space-30-max));
    --space-32-min: 1.625rem;
    --space-32-pref: 2.08vw;
    --space-32-max: 2rem;
    --space-32: clamp(var(--space-32-min), var(--space-32-pref), var(--space-32-max));
    --space-34-min: 1.75rem;
    --space-34-pref: 2.21vw;
    --space-34-max: 2.125rem;
    --space-34: clamp(var(--space-34-min), var(--space-34-pref), var(--space-34-max));
    --space-35-min: 1.75rem;
    --space-35-pref: 2.28vw;
    --space-35-max: 2.1875rem;
    --space-35: clamp(var(--space-35-min), var(--space-35-pref), var(--space-35-max));
    --space-38-min: 1.875rem;
    --space-38-pref: 2.47vw;
    --space-38-max: 2.375rem;
    --space-38: clamp(var(--space-38-min), var(--space-38-pref), var(--space-38-max));
    --space-40-min: 2rem;
    --space-40-pref: 2.6vw;
    --space-40-max: 2.5rem;
    --space-40: clamp(var(--space-40-min), var(--space-40-pref), var(--space-40-max));
    --space-45-min: 2.25rem;
    --space-45-pref: 2.93vw;
    --space-45-max: 2.8125rem;
    --space-45: clamp(var(--space-45-min), var(--space-45-pref), var(--space-45-max));
    --space-48-min: 2.5rem;
    --space-48-pref: 3.13vw;
    --space-48-max: 3rem;
    --space-48: clamp(var(--space-48-min), var(--space-48-pref), var(--space-48-max));
    --space-50-min: 2.5rem;
    --space-50-pref: 3.26vw;
    --space-50-max: 3.125rem;
    --space-50: clamp(var(--space-50-min), var(--space-50-pref), var(--space-50-max));
    --space-70-min: 3.5rem;
    --space-70-pref: 4.56vw;
    --space-70-max: 4.375rem;
    --space-70: clamp(var(--space-70-min), var(--space-70-pref), var(--space-70-max));
    --space-80-min: 4rem;
    --space-80-pref: 5.21vw;
    --space-80-max: 5rem;
    --space-80: clamp(var(--space-80-min), var(--space-80-pref), var(--space-80-max));
    --space-88-min: 4.375rem;
    --space-88-pref: 5.73vw;
    --space-88-max: 5.5rem;
    --space-88: clamp(var(--space-88-min), var(--space-88-pref), var(--space-88-max));
    --space-100-min: 5rem;
    --space-100-pref: 6.51vw;
    --space-100-max: 6.25rem;
    --space-100: clamp(var(--space-100-min), var(--space-100-pref), var(--space-100-max));
    --space-120-min: 6rem;
    --space-120-pref: 7.81vw;
    --space-120-max: 7.5rem;
    --space-120: clamp(var(--space-120-min), var(--space-120-pref), var(--space-120-max));
    --space-130-min: 6.5rem;
    --space-130-pref: 8.46vw;
    --space-130-max: 8.125rem;
    --space-130: clamp(var(--space-130-min), var(--space-130-pref), var(--space-130-max));
    --space-200-min: 10rem;
    --space-200-pref: 13vw;
    --space-200-max: 12.5rem;
    --space-200: clamp(var(--space-200-min), var(--space-200-pref), var(--space-200-max));
    --space-300-min: 15rem;
    --space-300-pref: 19.53vw;
    --space-300-max: 18.75rem;
    --space-300: clamp(var(--space-300-min), var(--space-300-pref), var(--space-300-max));
    --space-350-min: 17.5rem;
    --space-350-pref: 22.8vw;
    --space-350-max: 21.875rem;
    --space-350: clamp(var(--space-350-min), var(--space-350-pref), var(--space-350-max));
    --space-400-min: 20rem;
    --space-400-pref: 26.04vw;
    --space-400-max: 25rem;
    --space-400: clamp(var(--space-400-min), var(--space-400-pref), var(--space-400-max));
    --space-500-min: 25rem;
    --space-500-pref: 32.55vw;
    --space-500-max: 31.25rem;
    --space-500: clamp(var(--space-500-min), var(--space-500-pref), var(--space-500-max));
    --transition-fast: 0.3s ease;

    /* hardcode 변환 신규 토큰 (자동 추가) */
    --space-46-min: 2.3125rem;
    --space-46-pref: 2.99vw;
    --space-46-max: 2.875rem;
    --space-46: clamp(var(--space-46-min), var(--space-46-pref), var(--space-46-max));
    --space-58-min: 2.9375rem;
    --space-58-pref: 3.78vw;
    --space-58-max: 3.625rem;
    --space-58: clamp(var(--space-58-min), var(--space-58-pref), var(--space-58-max));
    --space-135-min: 6.75rem;
    --space-135-pref: 8.79vw;
    --space-135-max: 8.4375rem;
    --space-135: clamp(var(--space-135-min), var(--space-135-pref), var(--space-135-max));
    --space-165-min: 8.25rem;
    --space-165-pref: 10.74vw;
    --space-165-max: 10.3125rem;
    --space-165: clamp(var(--space-165-min), var(--space-165-pref), var(--space-165-max));
    --space-180-min: 9rem;
    --space-180-pref: 11.72vw;
    --space-180-max: 11.25rem;
    --space-180: clamp(var(--space-180-min), var(--space-180-pref), var(--space-180-max));
    --space-250-min: 12.5rem;
    --space-250-pref: 16.28vw;
    --space-250-max: 15.625rem;
    --space-250: clamp(var(--space-250-min), var(--space-250-pref), var(--space-250-max));
    --space-330-min: 16.5rem;
    --space-330-pref: 21.48vw;
    --space-330-max: 20.625rem;
    --space-330: clamp(var(--space-330-min), var(--space-330-pref), var(--space-330-max));
    --space-870-min: 43.5rem;
    --space-870-pref: 56.64vw;
    --space-870-max: 54.375rem;
    --space-870: clamp(var(--space-870-min), var(--space-870-pref), var(--space-870-max));
    --space-1600-min: 80rem;
    --space-1600-pref: 104.17vw;
    --space-1600-max: 100rem;
    --space-1600: clamp(var(--space-1600-min), var(--space-1600-pref), var(--space-1600-max));
    --space-10000: 625rem;
    --transition-quick: 0.15s ease;
    --transition-snappy: 0.2s ease;
    --transition-swift: 0.25s ease;
    --anim-spin-slow: 4s linear infinite;

    /* hardcode 변환 신규 토큰 (자동 추가) */
    --px-2: 2px;
    --px-3: 3px;
    --px-4: 4px;
    --px-5: 5px;
    --px-6: 6px;
    --px-8: 8px;
    --px-20: 20px;
    --px-30: 30px;
    --px-200: 200px;

    /* hardcode 변환 신규 토큰 (자동 추가) */
    --px-18: 18px;

    /* hardcode 변환 신규 토큰 (자동 추가) */
    --px-1600: 1600px;
    --history-pad-side-min: 1.25rem;
    --history-pad-side-pref: 3vw;
    --history-pad-side-max: 2.5rem;
    --history-pad-side: clamp(var(--history-pad-side-min), var(--history-pad-side-pref), var(--history-pad-side-max));
    --history-pad-tb-min: 2.5rem;
    --history-pad-tb-pref: 5vw;
    --history-pad-tb-max: 5rem;
    --history-pad-tb: clamp(var(--history-pad-tb-min), var(--history-pad-tb-pref), var(--history-pad-tb-max));

    /* 누락 토큰 추가 */
    --card-padding-min: 1.875rem;
    --card-padding-pref: 2.5vw;
    --card-padding-max: 3.125rem;
    --card-padding: clamp(var(--card-padding-min), var(--card-padding-pref), var(--card-padding-max));
    --card-padding-lg-min: 2.5rem;
    --card-padding-lg-pref: 4vw;
    --card-padding-lg-max: 4.375rem;
    --card-padding-lg: clamp(var(--card-padding-lg-min), var(--card-padding-lg-pref), var(--card-padding-lg-max));
    --spacing-section-xl-min: 5rem;
    --spacing-section-xl-pref: 8vw;
    --spacing-section-xl-max: 8.75rem;
    --spacing-section-xl: clamp(var(--spacing-section-xl-min), var(--spacing-section-xl-pref), var(--spacing-section-xl-max));

    /* 사용처 clamp 토큰화 (자동 추가) */
    --cv-history-1-min: 1.25rem;
    --cv-history-1-pref: 2vw;
    --cv-history-1-max: 1.875rem;
    --cv-history-1: clamp(var(--cv-history-1-min), var(--cv-history-1-pref), var(--cv-history-1-max));
    --cv-history-2-min: 3.125rem;
    --cv-history-2-pref: 5vw;
    --cv-history-2-max: 6.25rem;
    --cv-history-2: clamp(var(--cv-history-2-min), var(--cv-history-2-pref), var(--cv-history-2-max));
    --cv-history-3-min: 1.875rem;
    --cv-history-3-pref: 3vw;
    --cv-history-3-max: 3.125rem;
    --cv-history-3: clamp(var(--cv-history-3-min), var(--cv-history-3-pref), var(--cv-history-3-max));
    --cv-history-4-min: 2rem;
    --cv-history-4-pref: 4vw;
    --cv-history-4-max: 4rem;
    --cv-history-4: clamp(var(--cv-history-4-min), var(--cv-history-4-pref), var(--cv-history-4-max));
    --cv-history-5-min: 0.9375rem;
    --cv-history-5-pref: 1.5vw;
    --cv-history-5-max: 1.5625rem;
    --cv-history-5: clamp(var(--cv-history-5-min), var(--cv-history-5-pref), var(--cv-history-5-max));
    --cv-history-6-min: 0.8125rem;
    --cv-history-6-pref: 0.85vw;
    --cv-history-6-max: 0.9375rem;
    --cv-history-6: clamp(var(--cv-history-6-min), var(--cv-history-6-pref), var(--cv-history-6-max));
    --cv-history-7-min: 0.25rem;
    --cv-history-7-pref: 0.5vw;
    --cv-history-7-max: 0.5rem;
    --cv-history-7: clamp(var(--cv-history-7-min), var(--cv-history-7-pref), var(--cv-history-7-max));
    --cv-history-8-min: 3.125rem;
    --cv-history-8-pref: 5vw;
    --cv-history-8-max: 5rem;
    --cv-history-8: clamp(var(--cv-history-8-min), var(--cv-history-8-pref), var(--cv-history-8-max));
    --cv-history-9-min: 1.875rem;
    --cv-history-9-pref: 4vw;
    --cv-history-9-max: 5rem;
    --cv-history-9: clamp(var(--cv-history-9-min), var(--cv-history-9-pref), var(--cv-history-9-max));
    --cv-history-10-min: 2.25rem;
    --cv-history-10-pref: 4.2vw;
    --cv-history-10-max: 5rem;
    --cv-history-10: clamp(var(--cv-history-10-min), var(--cv-history-10-pref), var(--cv-history-10-max));
    --cv-history-11-min: 5rem;
    --cv-history-11-pref: 8vw;
    --cv-history-11-max: 8.125rem;
    --cv-history-11: clamp(var(--cv-history-11-min), var(--cv-history-11-pref), var(--cv-history-11-max));
    --cv-history-12-min: 1.25rem;
    --cv-history-12-pref: 2vw;
    --cv-history-12-max: 2rem;
    --cv-history-12: clamp(var(--cv-history-12-min), var(--cv-history-12-pref), var(--cv-history-12-max));
    --cv-history-13-min: 0.625rem;
    --cv-history-13-pref: 1vw;
    --cv-history-13-max: 0.875rem;
    --cv-history-13: clamp(var(--cv-history-13-min), var(--cv-history-13-pref), var(--cv-history-13-max));
    --cv-history-14-min: 0.5rem;
    --cv-history-14-pref: 0.7vw;
    --cv-history-14-max: 0.625rem;
    --cv-history-14: clamp(var(--cv-history-14-min), var(--cv-history-14-pref), var(--cv-history-14-max));
    --cv-history-15-min: 1.25rem;
    --cv-history-15-pref: 1.8vw;
    --cv-history-15-max: 1.75rem;
    --cv-history-15: clamp(var(--cv-history-15-min), var(--cv-history-15-pref), var(--cv-history-15-max));
    --cv-history-16-min: 0.375rem;
    --cv-history-16-pref: 0.6vw;
    --cv-history-16-max: 0.5rem;
    --cv-history-16: clamp(var(--cv-history-16-min), var(--cv-history-16-pref), var(--cv-history-16-max));
    --cv-history-17-min: 0.375rem;
    --cv-history-17-pref: 0.5vw;
    --cv-history-17-max: 0.4375rem;
    --cv-history-17: clamp(var(--cv-history-17-min), var(--cv-history-17-pref), var(--cv-history-17-max));
    --cv-history-18-min: 0.25rem;
    --cv-history-18-pref: 0.4vw;
    --cv-history-18-max: 0.375rem;
    --cv-history-18: clamp(var(--cv-history-18-min), var(--cv-history-18-pref), var(--cv-history-18-max));
    --cv-history-19-min: 0.75rem;
    --cv-history-19-pref: 0.85vw;
    --cv-history-19-max: 0.875rem;
    --cv-history-19: clamp(var(--cv-history-19-min), var(--cv-history-19-pref), var(--cv-history-19-max));
    --cv-history-20-min: 1.75rem;
    --cv-history-20-pref: 3vw;
    --cv-history-20-max: 3rem;
    --cv-history-20: clamp(var(--cv-history-20-min), var(--cv-history-20-pref), var(--cv-history-20-max));
    --cv-history-21-min: 0.5rem;
    --cv-history-21-pref: 0.8vw;
    --cv-history-21-max: 0.75rem;
    --cv-history-21: clamp(var(--cv-history-21-min), var(--cv-history-21-pref), var(--cv-history-21-max));
    --cv-history-22-min: 1.25rem;
    --cv-history-22-pref: 3vw;
    --cv-history-22-max: 3.125rem;
    --cv-history-22: clamp(var(--cv-history-22-min), var(--cv-history-22-pref), var(--cv-history-22-max));
    --cv-history-23-min: 0.5rem;
    --cv-history-23-pref: 1vw;
    --cv-history-23-max: 0.9375rem;
    --cv-history-23: clamp(var(--cv-history-23-min), var(--cv-history-23-pref), var(--cv-history-23-max));
    --cv-history-24-min: 0.75rem;
    --cv-history-24-pref: 0.78vw;
    --cv-history-24-max: 0.875rem;
    --cv-history-24: clamp(var(--cv-history-24-min), var(--cv-history-24-pref), var(--cv-history-24-max));
    --cv-history-25-min: 0.375rem;
    --cv-history-25-pref: 0.5vw;
    --cv-history-25-max: 0.625rem;
    --cv-history-25: clamp(var(--cv-history-25-min), var(--cv-history-25-pref), var(--cv-history-25-max));
    --cv-history-26-min: 0.875rem;
    --cv-history-26-pref: 0.9vw;
    --cv-history-26-max: 1rem;
    --cv-history-26: clamp(var(--cv-history-26-min), var(--cv-history-26-pref), var(--cv-history-26-max));
    --cv-history-27-min: 0.9375rem;
    --cv-history-27-pref: 2vw;
    --cv-history-27-max: 1.5625rem;
    --cv-history-27: clamp(var(--cv-history-27-min), var(--cv-history-27-pref), var(--cv-history-27-max));
    --cv-history-28-min: 1.125rem;
    --cv-history-28-pref: 1.3vw;
    --cv-history-28-max: 1.5rem;
    --cv-history-28: clamp(var(--cv-history-28-min), var(--cv-history-28-pref), var(--cv-history-28-max));
    --cv-history-29-min: 1.5rem;
    --cv-history-29-pref: 2.5vw;
    --cv-history-29-max: 2.5rem;
    --cv-history-29: clamp(var(--cv-history-29-min), var(--cv-history-29-pref), var(--cv-history-29-max));
    --cv-history-30-min: 1rem;
    --cv-history-30-pref: 1.5vw;
    --cv-history-30-max: 1.5rem;
    --cv-history-30: clamp(var(--cv-history-30-min), var(--cv-history-30-pref), var(--cv-history-30-max));
    --cv-history-31-min: 10rem;
    --cv-history-31-pref: 12vw;
    --cv-history-31-max: 14rem;
    --cv-history-31: clamp(var(--cv-history-31-min), var(--cv-history-31-pref), var(--cv-history-31-max));
    --cv-history-32-min: 0.75rem;
    --cv-history-32-pref: 1vw;
    --cv-history-32-max: 1rem;
    --cv-history-32: clamp(var(--cv-history-32-min), var(--cv-history-32-pref), var(--cv-history-32-max));
    --cv-history-33-min: 2.75rem;
    --cv-history-33-pref: 3vw;
    --cv-history-33-max: 3.5rem;
    --cv-history-33: clamp(var(--cv-history-33-min), var(--cv-history-33-pref), var(--cv-history-33-max));
    --cv-history-34-min: 2rem;
    --cv-history-34-pref: 3vw;
    --cv-history-34-max: 3rem;
    --cv-history-34: clamp(var(--cv-history-34-min), var(--cv-history-34-pref), var(--cv-history-34-max));
    --cv-history-35-min: 7rem;
    --cv-history-35-pref: 10vw;
    --cv-history-35-max: 12rem;
    --cv-history-35: clamp(var(--cv-history-35-min), var(--cv-history-35-pref), var(--cv-history-35-max));
    --cv-history-36-min: 3rem;
    --cv-history-36-pref: 5vw;
    --cv-history-36-max: 5rem;
    --cv-history-36: clamp(var(--cv-history-36-min), var(--cv-history-36-pref), var(--cv-history-36-max));
    --cv-history-37-min: 1.125rem;
    --cv-history-37-pref: 1.5vw;
    --cv-history-37-max: 1.5rem;
    --cv-history-37: clamp(var(--cv-history-37-min), var(--cv-history-37-pref), var(--cv-history-37-max));
    --cv-history-38-min: 0.875rem;
    --cv-history-38-pref: 1vw;
    --cv-history-38-max: 1rem;
    --cv-history-38: clamp(var(--cv-history-38-min), var(--cv-history-38-pref), var(--cv-history-38-max));
    --cv-history-39-min: 0.75rem;
    --cv-history-39-pref: 0.8vw;
    --cv-history-39-max: 0.8125rem;
    --cv-history-39: clamp(var(--cv-history-39-min), var(--cv-history-39-pref), var(--cv-history-39-max));

    /* 누락 토큰 추가 */
    --em-0-02: 0.02em;
    --em-0-04: 0.04em;
    --em-0-05: 0.05em;
    --em-0-08: 0.08em;
    --em-0-1: 0.1em;
    --em-0-85: 0.85em;
    --em-0-875: 0.875em;
    --em-0-92: 0.92em;
    --em-0-95: 0.95em;
    --em-1: 1em;
    --em-1-083: 1.083em;
    --em-1-167: 1.167em;
    --em-1-2: 1.2em;
    --em-1-4: 1.4em;
    --em-1-5: 1.5em;
    --em-1-7: 1.7em;
    --em-1-8: 1.8em;
    --em-2: 2em;
    --em-2-2: 2.2em;
    --em-2-35: 2.35em;
    --em-neg-0-03: -0.03em;
    --px-1: 1px;
    --space-neg-125: -7.8125rem;
    /* line-height 토큰 */
    --lh-0: 0;
    --lh-1: 1;
    --lh-14: 1.4;
    --lh-19: 1.9;

    /* 자동 변수화 토큰 (fw/op/z) */
    --fw-400: 400;
    --fw-500: 500;
    --fw-600: 600;
    --fw-700: 700;
    --op-0: 0;
    --op-035: 0.35;
    --op-085: 0.85;
    --op-1: 1;
    --z-10: 10;
    --z-2: 2;
    --z-3: 3;
    --z-999: 999;
    --z-9999: 9999;

}
/* =========================
   히스토리 게시판 스킨
   sub1_2 디자인 기반
========================= */

/* 카테고리 */
#bo_cate {
    margin: var(--space-25) 0
}

#bo_cate h2 {
    position: absolute;
    font-size: 0;
    line-height: var(--lh-0);
    overflow: hidden
}

#bo_cate ul {
    zoom: 1
}

#bo_cate ul:after {
    display: block;
    visibility: hidden;
    clear: both;
    content: ""
}

#bo_cate li {
    display: inline-block;
    padding: var(--space-2)
}

#bo_cate a {
    display: block;
    line-height: var(--space-28);
    padding: var(--space-5) var(--space-15);
    border-radius: var(--px-30);
    border: 1px solid var(--color-ui-blue-bg);
    color: var(--color-hex-6794d3)
}

#bo_cate a:focus,
#bo_cate a:hover,
#bo_cate a:active {
    text-decoration: none;
    background: var(--color-accent-blue);
    color: var(--base-color-white)
}

#bo_cate #bo_cate_on {
    z-index: var(--z-2);
    background: var(--color-accent-blue);
    color: var(--base-color-white);
    font-weight: bold;
    border: 1px solid var(--color-accent-blue);
    -webkit-box-shadow: inset 0 var(--px-2) var(--px-5) rgb(33, 135, 202);
    -moz-box-shadow: inset 0 var(--px-2) var(--px-5) rgb(33, 135, 202);
    box-shadow: inset 0 var(--px-2) var(--px-5) rgb(33, 135, 202)
}

/* 체크박스 공통 */
.selec_chk {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--space-1);
    height: var(--space-1);
    opacity: var(--op-0);
    outline: 0;
    overflow: hidden
}

.chk_box {
    position: relative;
    z-index: var(--z-10);
}

.chk_box input[type="checkbox"] + label {
    position: relative;
    display: inline-block;
    padding-left: 0;
    cursor: pointer;
}

.chk_box input[type="checkbox"] + label span {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--space-24);
    height: var(--space-24);
    display: block;
    border-radius: 50%;
    border: none;
    background: rgba(var(--color-white-rgb), 0.5);
    backdrop-filter: blur(var(--px-4));
    -webkit-backdrop-filter: blur(var(--px-4));
    box-shadow: 0 var(--px-2) var(--px-6) rgba(var(--color-black-rgb), 0.2);
    transition: background var(--transition-snappy);
    cursor: pointer;
}

.chk_box input[type="checkbox"] + label span::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--space-8);
    height: var(--space-8);
    border-radius: 50%;
    background: var(--signature-color);
    transform: translate(-50%, -50%) scale(0);
    opacity: var(--op-0);
    transition: transform var(--transition-snappy), opacity var(--transition-quick);
}

.write_div .chk_box input[type="checkbox"] + label,
.bo_vc_w .chk_box input[type="checkbox"] + label {
    padding-left: 0;
}

.write_div .chk_box input[type="checkbox"] + label span,
.bo_vc_w .chk_box input[type="checkbox"] + label span {
    top: 0;
    left: 0;
    width: var(--space-24);
    height: var(--space-24);
}

.chk_box input[type="checkbox"]:checked + label span {
    background: rgba(var(--color-white-rgb), 0.7);
    border: none;
    border-radius: 50%;
}

.chk_box input[type="checkbox"]:checked + label span::after {
    transform: translate(-50%, -50%) scale(1);
    opacity: var(--op-1);
}

.all_chk.chk_box input[type="checkbox"] + label span {
    top: 0;
    left: 0;
}


/* =========================
   게시판 목록 공통
========================= */

#bo_btn_top {
    display: none;
}

#bo_btn_top:after {
    display: block;
    visibility: hidden;
    clear: both;
    content: ""
}

#bo_list_total {
    float: left;
    line-height: var(--space-34);
    font-size: var(--em-0-92);
    color: var(--color-hex-4e546f)
}

.btn_bo_user {
    float: right;
    margin: 0;
    padding: 0;
    list-style: none
}

.btn_bo_user li {
    float: left;
    width: var(--space-40);
    text-align: center;
    margin-left: var(--space-5);

}

.btn_bo_user>li {
    position: relative
}

.bo_fx {
    margin-bottom: var(--space-5);
    float: right;
    zoom: 1
}

.bo_fx:after {
    display: block;
    visibility: hidden;
    clear: both;
    content: ""
}

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

.more_opt {
    display: none;
    position: absolute;
    top: var(--space-45);
    right: 0;
    background: var(--base-color-white);
    border: 1px solid var(--color-gray-270);
    z-index: 999
}

.more_opt:before {
    content: "";
    position: absolute;
    top: -var(--space-8);
    right: var(--space-13);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 var(--px-6) var(--px-8) var(--px-6);
    border-color: transparent transparent var(--color-gray-270) transparent
}

.more_opt:after {
    content: "";
    position: absolute;
    top: -var(--space-6);
    right: var(--space-13);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 var(--px-6) var(--px-8) var(--px-6);
    border-color: transparent transparent var(--base-color-white) transparent
}

.more_opt li {
    border-bottom: 1px solid var(--color-ui-f1f1f1);
    padding: var(--space-10);
    float: inherit;
    width: var(--space-120);
    margin: 0;
    color: var(--color-gray-420);
    text-align: left
}

.more_opt li:last-child {
    border-bottom: 0
}

.more_opt li button,
.more_opt li a {
    width: 100%;
    border: 0;
    background: var(--base-color-white);
    color: var(--color-gray-420)
}

.more_opt li:hover a,
.more_opt li:hover button {
    color: var(--base-color-black)
}

.more_opt li i {
    float: right;
    line-height: var(--space-20)
}


/* =========================
   히스토리 타임라인 레이아웃
========================= */
#bo_history {
    width: 100%;
    background-color: var(--background-color);
    overflow: hidden;
}

/* 타임라인 — contents.css의 raum-history-timeline 스타일을 보드 스킨에서도 사용 */

/* 체크박스 & 수정 버튼 */

.history_chk,
.project_chk {
    margin-bottom: 0;
    z-index: var(--z-3);
}

.history_chk.chk_box input[type="checkbox"] + label,
.project_chk.chk_box input[type="checkbox"] + label {
    padding-left: 0;
    cursor: pointer;
}

.history_chk.chk_box input[type="checkbox"] + label span,
.project_chk.chk_box input[type="checkbox"] + label span {
    top: 0;
    left: 0;
    width: var(--space-24);
    height: var(--space-24);
    border-radius: 50%;
    border: none;
    background: rgba(var(--color-white-rgb), 0.5);
    backdrop-filter: blur(var(--px-4));
    -webkit-backdrop-filter: blur(var(--px-4));
    box-shadow: 0 var(--px-2) var(--px-6) rgba(var(--color-black-rgb), 0.2);
    transition: background var(--transition-snappy);
    cursor: pointer;
}

.history_chk.chk_box input[type="checkbox"] + label span::after,
.project_chk.chk_box input[type="checkbox"] + label span::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--space-8);
    height: var(--space-8);
    border-radius: 50%;
    background: var(--signature-color);
    transform: translate(-50%, -50%) scale(0);
    opacity: var(--op-0);
    transition: transform var(--transition-snappy), opacity var(--transition-quick);
}

.history_chk.chk_box input[type="checkbox"]:checked + label span,
.project_chk.chk_box input[type="checkbox"]:checked + label span {
    background: rgba(var(--color-white-rgb), 0.7);
    border: none;
    border-radius: 50%;
}

.history_chk.chk_box input[type="checkbox"]:checked + label span::after,
.project_chk.chk_box input[type="checkbox"]:checked + label span::after {
    transform: translate(-50%, -50%) scale(1);
    opacity: var(--op-1);
}


.history_admin_wrap {
    display: flex;
    align-items: center;
    gap: var(--space-12);
    margin-bottom: var(--cv-history-1);
}

/* 빈 목록 */
.raum-history-empty {
    padding: var(--space-100) 0;
    text-align: center;
    color: var(--color-gray-400);
    font-size: var(--em-1);
}


/* =========================
   수행 프로젝트 리스트
========================= */
.project_list_section {
    background-color: var(--background-color);
    padding: var(--cv-history-2) 0 0;
}

.project_list_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--cv-history-3);
}

.project_list_title {
    font-size: var(--sub-title-font-size);
    line-height: var(--sub-title-font-size-line);
    font-weight: var(--fw-700);
    color: var(--base-color-darkblack);
}

.raum-projlist-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cv-history-4);
}

.raum-projlist-grid > * {
    flex: 0 1 calc(33.333% - var(--cv-history-4) * 2 / 3);
    min-width: 0;
}

.project_list_card {
    position: relative;
}

.project_list_year {
    font-family: var(--font-KR-base);
    font-size: var(--text-font-title-size);
    font-weight: var(--fw-700);
    color: var(--signature-color);
    background-color: transparent;
    padding: 0 0 var(--space-8);
    margin-bottom: var(--space-12);
    border-bottom: 1px solid rgba(var(--color-black-rgb), 0.12);
    text-align: left;
}

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

.project_list_items li {
    font-size: var(--text-font-size);
    line-height: var(--text-font-size-line);
    color: var(--base-color-black);
    padding: var(--space-4) 0;
}


/* 프로젝트 전체선택 */
.raum-projlist-allchk-wrap {
    margin-bottom: var(--cv-history-5);
}

.raum-projlist-allchk-wrap .all_chk.chk_box input[type="checkbox"]+label {
    font-size: var(--cv-history-6);
    color: var(--color-gray-430);
}

/* 프로젝트 카드 내 체크박스 & 수정 버튼 */
.project_admin_wrap {
    display: flex;
    align-items: center;
    gap: var(--space-12);
    text-align: left;
    margin-bottom: var(--cv-history-1);
}

.project_admin_wrap .project_edit_btn {
    position: static;
}

/* 반응형: 프로젝트 리스트 */
@media (max-width: 1024px) {
    .raum-projlist-grid > * {
        flex: 0 1 calc(50% - var(--cv-history-4) / 2);
    }
}

@media (max-width: 600px) {
    .raum-projlist-grid > * {
        flex: 0 1 100%;
    }
}


/* =========================
   검색
========================= */
.bo_sch_wrap {
    display: none;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999
}

.bo_sch {
    position: absolute;
    top: 50%;
    left: 50%;
    background: var(--base-color-white);
    text-align: left;
    width: var(--space-330);
    max-height: var(--space-300);
    margin-left: var(--space-neg-125);
    margin-top: -var(--space-180);
    overflow-y: auto;
    -webkit-box-shadow: 1px 1px var(--px-18) rgba(var(--color-black-rgb), 0.2);
    -moz-box-shadow: 1px 1px var(--px-18) rgba(var(--color-black-rgb), 0.2);
    box-shadow: 1px 1px var(--px-18) rgba(var(--color-black-rgb), 0.2);
    border: 1px solid var(--color-ui-dde7e9);
    border-radius: var(--px-3)
}

.bo_sch:after {
    display: block;
    visibility: hidden;
    clear: both;
    content: ""
}

.bo_sch h3 {
    padding: var(--space-15);
    border-bottom: 1px solid var(--color-ui-line)
}

.bo_sch legend {
    background: red
}

.bo_sch form {
    padding: var(--space-15);
    display: block
}

.bo_sch select {
    width: 100%;
    height: var(--space-40);
    border: 1px solid var(--color-ui-input-bg);
    border-radius: var(--px-2);
    -webkit-box-shadow: inset 0 1px 1px rgba(var(--color-black-rgb), .075);
    -moz-box-shadow: inset 0 1px 1px rgba(var(--color-black-rgb), .075);
    box-shadow: inset 0 1px 1px rgba(var(--color-black-rgb), .075)
}

.bo_sch .sch_bar {
    display: inline-block;
    width: 100%;
    clear: both;
    margin-top: var(--space-15);
    border: 1px solid var(--color-ui-input-bg);
    border-radius: var(--px-2);
    -webkit-box-shadow: inset 0 1px 1px rgba(var(--color-black-rgb), .075);
    -moz-box-shadow: inset 0 1px 1px rgba(var(--color-black-rgb), .075);
    box-shadow: inset 0 1px 1px rgba(var(--color-black-rgb), .075)
}

.bo_sch .sch_input {
    width: var(--space-250);
    height: var(--space-38);
    border: 0;
    padding: 0;
    background-color: transparent;
    float: left
}

.bo_sch .sch_btn {
    height: var(--space-38);
    float: right;
    color: var(--color-gray-440);
    background: none;
    border: 0;
    width: var(--space-40);
    font-size: var(--space-15)
}

.bo_sch .bo_sch_cls {
    position: absolute;
    right: 0;
    top: 0;
    color: var(--color-gray-280);
    border: 0;
    padding: var(--space-12) var(--space-15);
    font-size: var(--space-16);
    background: var(--base-color-white)
}

.bo_sch_bg {
    background: rgba(var(--color-black-rgb), 0.1);
    width: 100%;
    height: 100%
}


/* =========================
   게시판 읽기
========================= */
#bo_v {
    margin-bottom: var(--space-20);
    background: var(--base-color-white);
    box-sizing: border-box
}

#bo_v_table {
    position: absolute;
    top: 0;
    right: var(--space-16);
    margin: 0;
    padding: 0 var(--space-5);
    height: var(--space-25);
    background: var(--color-accent-red-bright);
    color: var(--base-color-white);
    font-weight: bold;
    line-height: var(--em-2-2)
}


#bo_v_title .bo_v_cate {
    display: inline-block;
    line-height: var(--space-20);
    background: var(--color-ui-e2eaf6);
    color: var(--color-accent-blue);
    padding: 0 var(--space-10);
    border-radius: var(--px-3);
}

#bo_v_title .bo_v_tit {
    display: block;
    font-size: var(--em-2);
    margin: var(--space-5) 0 0;
    word-break: break-all
}

#bo_v_info {
    margin: 0;
    border-bottom: 1px solid var(--color-ui-f1f1f1);
    color: var(--color-gray-500)
}

#bo_v_info:after {
    display: block;
    visibility: hidden;
    clear: both;
    content: ""
}

#bo_v_info h2 {
    position: absolute;
    font-size: 0;
    line-height: var(--lh-0);
    overflow: hidden
}

#bo_v_info .profile_info {
    margin: var(--space-20) 0 var(--space-10);
    display: inline-block;
    float: left
}

#bo_v_info .profile_info .pf_img {
    float: left;
    margin-right: var(--space-10)
}

#bo_v_info .profile_info .pf_img img {
    border-radius: 50%;
    width: var(--space-50);
    height: var(--space-50)
}

#bo_v_info .profile_info .profile_info_ct {
    float: left;
    padding: var(--space-5) 0;
    line-height: var(--space-18)
}

#bo_v_info strong {
    display: inline-block;
    margin: 0 var(--space-10) 0 0;
    font-weight: normal
}

#bo_v_info .sv_member,
#bo_v_info .sv_guest,
#bo_v_info .member,
#bo_v_info .guest {
    font-weight: bold
}

#bo_v_info .profile_img {
    display: none
}

#bo_v_info .sv_member {
    color: var(--base-color-black)
}

#bo_v_info .if_date {
    margin: 0;
    color: var(--color-gray-500)
}

#bo_v_file h2 {
    position: absolute;
    font-size: 0;
    line-height: var(--lh-0);
    overflow: hidden
}

#bo_v_file ul {
    margin: 0;
    list-style: none
}

#bo_v_file li {
    padding: var(--space-15);
    position: relative;
    margin: var(--space-10) 0;
    border: 1px solid var(--color-gray-190);
    border-radius: var(--px-5);
    -webkit-box-shadow: 1px 1px var(--px-5) 0px hsl(232, 36%, 96%);
    -moz-box-shadow: 1px 1px var(--px-5) 0px hsl(232, 36%, 96%);
    box-shadow: 1px 1px var(--px-5) 0px hsl(232, 36%, 96%)
}

#bo_v_file li i {
    float: left;
    color: var(--color-gray-310);
    font-size: var(--em-2-35);
    margin-right: var(--space-20)
}

#bo_v_file a {
    float: left;
    display: block;
    text-decoration: none;
    word-wrap: break-word;
    color: var(--base-color-black)
}

#bo_v_file a:focus,
#bo_v_file li:hover a,
#bo_v_file a:active {
    text-decoration: underline;
    color: var(--color-accent-blue)
}

#bo_v_file img {
    float: left;
    margin: 0 var(--space-10) 0 0
}

#bo_v_file .bo_v_file_cnt {
    color: var(--color-gray-310);
    font-size: var(--em-0-92)
}

#bo_v_file li:hover {
    border-color: var(--color-ui-bed4f4);
    color: var(--color-ui-bed4f4)
}

#bo_v_file li:hover i {
    color: var(--color-accent-blue)
}

#bo_v_file li:hover .bo_v_file_cnt {
    color: var(--color-ui-99c2fc)
}

#bo_v_link h2 {
    position: absolute;
    font-size: 0;
    line-height: var(--lh-0);
    overflow: hidden
}

#bo_v_link li {
    padding: var(--space-15);
    position: relative;
    margin: var(--space-10) 0;
    border: 1px solid var(--color-gray-190);
    border-radius: var(--px-5);
    -webkit-box-shadow: 1px 1px var(--px-5) 0px hsl(232, 36%, 96%);
    -moz-box-shadow: 1px 1px var(--px-5) 0px hsl(232, 36%, 96%);
    box-shadow: 1px 1px var(--px-5) 0px hsl(232, 36%, 96%)
}

#bo_v_link li i {
    float: left;
    color: var(--color-gray-310);
    font-size: var(--em-2-35);
    margin-right: var(--space-20)
}

#bo_v_link a {
    float: left;
    display: block;
    text-decoration: none;
    word-wrap: break-word;
    color: var(--base-color-black)
}

#bo_v_link a:focus,
#bo_v_link li:hover a,
#bo_v_link a:active {
    text-decoration: underline;
    color: var(--color-accent-blue)
}

#bo_v_link .bo_v_link_cnt {
    color: var(--color-gray-310);
    font-size: var(--em-0-92)
}

#bo_v_link li:hover {
    border-color: var(--color-ui-bed4f4);
    color: var(--color-ui-bed4f4)
}

#bo_v_link li:hover i {
    color: var(--color-accent-blue)
}

#bo_v_link li:hover .bo_v_link_cnt {
    color: var(--color-ui-99c2fc)
}

#bo_v_top {
    zoom: 1
}

#bo_v_top:after {
    display: block;
    visibility: hidden;
    clear: both;
    content: ""
}

#bo_v_top h2 {
    position: absolute;
    font-size: 0;
    line-height: var(--lh-0);
    overflow: hidden
}

#bo_v_top ul {
    padding: 0;
    list-style: none;
    word-break: break-all
}

#bo_v_bot {
    zoom: 1
}

#bo_v_bot:after {
    display: block;
    visibility: hidden;
    clear: both;
    content: ""
}

#bo_v_bot h2 {
    position: absolute;
    font-size: 0;
    line-height: var(--lh-0);
    overflow: hidden
}

#bo_v_bot ul {
    padding: 0;
    list-style: none
}

.bo_v_com {
    margin: var(--space-20) 0;
    float: right
}

.bo_v_com>li {
    position: relative;
    float: left;
    margin-left: var(--space-5)
}

.bo_v_nb {
    margin: var(--space-20) 0;
    position: relative;
    clear: both;
    text-align: left
}

.bo_v_nb:after {
    display: block;
    visibility: hidden;
    clear: both;
    content: ""
}

.bo_v_nb li {
    border-top: 1px solid var(--color-ui-f1f1f1);
    padding: var(--space-13)
}

.bo_v_nb li:last-child {
    border-bottom: 1px solid var(--color-ui-f1f1f1)
}

.bo_v_nb li:hover {
    background: var(--color-ui-light-bg-alt)
}

.bo_v_nb li i {
    font-size: var(--space-13);
    color: var(--color-gray-290)
}

.bo_v_nb li .nb_tit {
    display: inline-block;
    padding-right: var(--space-20);
    color: var(--color-gray-290)
}

.bo_v_nb li .nb_date {
    float: right;
    color: var(--color-gray-290)
}

#bo_v_atc {
    height: var(--space-200);
    height: auto
}

#bo_v_atc_title {
    position: absolute;
    font-size: 0;
    line-height: var(--lh-0);
    overflow: hidden
}

#bo_v_img {
    width: 100%;
    overflow: hidden;
    zoom: 1
}

#bo_v_img:after {
    display: block;
    visibility: hidden;
    clear: both;
    content: ""
}

#bo_v_img a.view_image {
    display: block
}

#bo_v_img img {
    margin-bottom: var(--space-20);
    max-width: 100%;
    height: auto
}

#bo_v_con {
    margin: var(--space-10) 0 var(--space-30);
    width: 100%;
    line-height: var(--em-1-7);
    height: var(--space-200);
    word-break: break-all;
    overflow: hidden
}

#bo_v_con a {
    color: var(--base-color-black);
    text-decoration: underline
}

#bo_v_con img {
    max-width: 100%;
    height: auto
}

#bo_v_act {
    margin-bottom: var(--space-30);
    text-align: center
}

#bo_v_act .bo_v_act_gng {
    position: relative
}

#bo_v_act a {
    margin-right: var(--space-5);
    vertical-align: middle;
    color: var(--color-hex-4a5158)
}

#bo_v_act a:hover {
    background-color: var(--base-color-white);
    color: var(--color-accent-red-soft);
    border-color: var(--color-accent-red-soft)
}

#bo_v_act i {
    font-size: var(--em-1-4);
    margin-right: var(--space-5)
}

#bo_v_act_good,
#bo_v_act_nogood {
    display: none;
    position: absolute;
    top: var(--space-30);
    left: 0;
    z-index: var(--z-9999);
    padding: var(--space-10) 0;
    width: var(--space-165);
    background: var(--color-accent-red-bright);
    color: var(--base-color-white);
    text-align: center
}

#bo_v_act .bo_v_good {
    display: inline-block;
    border: 1px solid var(--color-gray-180);
    width: var(--space-70);
    line-height: var(--space-46);
    border-radius: var(--px-30)
}

#bo_v_act .bo_v_nogood {
    display: inline-block;
    border: 1px solid var(--color-gray-180);
    width: var(--space-70);
    line-height: var(--space-46);
    border-radius: var(--px-30)
}

#bo_v_sns {
    padding: 0;
    list-style: none;
    zoom: 1;
    float: left;
    display: inline-block
}

#bo_v_sns:after {
    display: block;
    visibility: hidden;
    clear: both;
    content: ""
}

#bo_v_sns li {
    float: left;
    width: var(--space-135);
    margin-right: var(--space-5);
    text-align: left
}

#bo_v_sns li a {
    height: var(--space-35);
    line-height: var(--space-35);
    text-align: center;
    border-radius: var(--px-5);
    color: var(--base-color-white);
    font-size: var(--em-0-95)
}

#bo_v_sns li img {
    vertical-align: middle;
    margin-right: var(--space-5)
}

#bo_v_sns li .sns_f {
    display: block;
    background: var(--color-sns-facebook)
}

#bo_v_sns li .sns_t {
    display: block;
    background: var(--color-sns-twitter)
}

#bo_v_sns li .sns_g {
    display: block;
    background: var(--color-sns-google)
}

#bo_v_sns li .sns_k {
    display: block;
    background: var(--color-sns-kakao)
}

#bo_v_share {
    position: relative;
    padding: var(--space-20) 0
}

#bo_v_share:after {
    display: block;
    visibility: hidden;
    clear: both;
    content: ""
}

#bo_v_share .btn {
    padding: 0 var(--space-10);
    color: var(--color-gray-600);
    font-weight: normal;
    font-size: var(--em-1);
    width: var(--space-80);
    line-height: var(--space-35);
    height: var(--space-35);
    border-color: var(--color-hex-d5d5d5);
    border-radius: var(--px-5)
}

#bo_v_share .btn:hover {
    background: var(--base-color-white)
}

#bo_v_share .btn i {
    margin-right: var(--space-5);
    color: var(--color-hex-4b5259);
    vertical-align: middle
}


/* =========================
   댓글
========================= */
.cmt_btn {
    width: 100%;
    text-align: left;
    border: 0;
    border-bottom: 1px solid var(--color-ui-f0f0f0);
    background: var(--base-color-white);
    font-weight: bold;
    margin: var(--space-30) 0 0;
    padding: 0 0 var(--space-15)
}

.cmt_btn span.total {
    position: relative;
    display: inline-block;
    margin-right: var(--space-5);
    font-size: var(--em-1);
    color: var(--color-accent-blue)
}

.cmt_btn span.cmt_more {
    float: right;
    display: inline-block;
    width: var(--space-15);
    height: var(--space-10);
    background: url(./img/btn_cmt.png) no-repeat right var(--space-2);
    margin-top: var(--space-5)
}

.cmt_btn_op span.cmt_more {
    background-position: right -var(--space-8)
}

.cmt_btn b {
    font-size: var(--em-1-2);
    color: var(--base-color-black)
}

.cmt_btn span.total:after {
    position: absolute;
    bottom: -var(--space-17);
    left: 0;
    display: inline-block;
    background: var(--color-accent-blue);
    content: "";
    width: 100%;
    height: var(--space-2)
}


#bo_vc h2 {
    position: absolute;
    font-size: 0;
    line-height: var(--lh-0);
    overflow: hidden
}

#bo_vc article {
    margin: var(--space-20) 0;
    position: relative;
    border-bottom: 1px solid var(--color-ui-f0f0f0)
}

#bo_vc article:after {
    display: block;
    visibility: hidden;
    clear: both;
    content: ""
}

#bo_vc article .profile_img img {
    border-radius: 50%
}

#bo_vc article .pf_img {
    float: left;
    margin-right: var(--space-10)
}

#bo_vc article .pf_img img {
    border-radius: 50%;
    width: var(--space-50);
    height: var(--space-50)
}

#bo_vc article .cm_wrap {
    float: left;
    max-width: var(--space-870);
    width: 90%
}

#bo_vc header {
    position: relative;
    width: 100%
}

#bo_vc header:after {
    display: block;
    visibility: hidden;
    clear: both;
    content: ""
}

#bo_vc header .profile_img {
    display: none
}

#bo_vc header .icon_reply {
    position: absolute;
    top: var(--space-15);
    left: -var(--space-20)
}

#bo_vc .member,
#bo_vc .guest,
#bo_vc .sv_member,
#bo_vc .sv_guest {
    font-weight: bold
}

.bo_vc_hdinfo {
    color: var(--color-gray-380)
}

#bo_vc h1 {
    position: absolute;
    font-size: 0;
    line-height: var(--lh-0);
    overflow: hidden
}

#bo_vc .cmt_contents {
    line-height: var(--em-1-8);
    padding: 0 0 var(--space-20)
}

#bo_vc p a {
    text-decoration: underline
}

#bo_vc p a.s_cmt {
    text-decoration: underline;
    color: var(--color-hex-ed6479)
}

#bo_vc_empty {
    margin: 0;
    padding: var(--space-80) 0;
    color: var(--color-gray-380);
    text-align: center
}

#bo_vc #bo_vc_winfo {
    float: left
}

#bo_vc .bo_vl_opt {
    position: absolute;
    top: 0;
    right: 0
}

.bo_vc_act {
    display: none;
    position: absolute;
    right: 0;
    top: var(--space-40);
    width: var(--space-58);
    text-align: right;
    border: 1px solid var(--color-gray-270);
    margin: 0;
    list-style: none;
    background: var(--base-color-white);
    zoom: 1;
    z-index: 9999
}

.bo_vc_act:before {
    content: "";
    position: absolute;
    top: -var(--space-8);
    right: var(--space-5);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 var(--px-6) var(--px-8) var(--px-6);
    border-color: transparent transparent var(--color-gray-270) transparent
}

.bo_vc_act:after {
    content: "";
    position: absolute;
    top: -var(--space-6);
    right: var(--space-5);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 var(--px-6) var(--px-8) var(--px-6);
    border-color: transparent transparent var(--base-color-white) transparent
}

.bo_vc_act li {
    border-bottom: 1px solid var(--color-ui-f0f0f0)
}

.bo_vc_act li:last-child {
    border-bottom: 0
}

.bo_vc_act li a {
    display: inline-block;
    padding: var(--space-10) var(--space-15)
}

.bo_vc_act li a:hover {
    color: var(--color-accent-blue)
}

.bo_vc_w {
    position: relative;
    margin: var(--space-10) 0;
    display: block
}

.bo_vc_w:after {
    display: block;
    visibility: hidden;
    clear: both;
    content: ""
}

.bo_vc_w h2 {
    position: absolute;
    font-size: 0;
    line-height: var(--lh-0);
    overflow: hidden
}

.bo_vc_w #char_cnt {
    display: block;
    margin: 0 0 var(--space-5)
}

.bo_vc_w textarea {
    border: 1px solid var(--color-gray-350);
    background: var(--base-color-white);
    color: var(--base-color-black);
    vertical-align: middle;
    border-radius: var(--px-3);
    padding: var(--space-5);
    width: 100%;
    height: var(--space-120);
    -webkit-box-shadow: inset 0 1px var(--px-2) rgba(var(--color-black-rgb), 0.1);
    -moz-box-shadow: inset 0 1px var(--px-2) rgba(var(--color-black-rgb), 0.1);
    box-shadow: inset 0 1px var(--px-2) rgba(var(--color-black-rgb), 0.1)
}


.bo_vc_w_info {
    margin: var(--space-10) 0;
    float: left
}

.bo_vc_w_info:after {
    display: block;
    visibility: hidden;
    clear: both;
    content: ""
}

.bo_vc_w_info .frm_input {
    float: left;
    margin-right: var(--space-5)
}

.bo_vc_w_info #captcha {
    padding-top: var(--space-10);
    display: block;
    clear: both
}

.bo_vc_w .btn_confirm {
    clear: both;
    margin-top: var(--space-10)
}

.bo_vc_w .btn_confirm label {
    display: inline-block;
    margin-right: var(--space-10);
    border-radius: var(--px-3);
    font-size: var(--em-1-5);
    text-align: center
}

.bo_vc_w .btn_submit {
    height: var(--space-45);
    padding: 0 var(--space-20);
    border-radius: var(--px-3);
    font-weight: bold;
    font-size: var(--em-1-083)
}

.bo_vc_w .btn_confirm .secret_cm label {
    font-size: var(--em-1)
}

.bo_vc_w_wr:after {
    display: block;
    visibility: hidden;
    clear: both;
    content: ""
}

.secret_cm {
    display: inline-block;
    float: left
}

#bo_vc_send_sns {
    display: inline-block;
    float: left
}

#bo_vc_sns {
    display: inline-block;
    margin: 0;
    padding: 0;
    list-style: none;
    zoom: 1
}

#bo_vc_sns:after {
    display: block;
    visibility: hidden;
    clear: both;
    content: ""
}

#bo_vc_sns li {
    float: left;
    margin: 0 var(--space-5) 0 0
}

#bo_vc_sns .sns_li_f {
    border-radius: var(--px-3);
    background: var(--color-hex-3a589b);
    height: var(--space-40);
    line-height: var(--space-40);
    padding: 0 0 0 var(--space-10)
}

#bo_vc_sns .sns_li_t {
    border-radius: var(--px-3);
    background: var(--color-hex-00aced);
    height: var(--space-40);
    line-height: var(--space-40);
    padding: 0 0 0 var(--space-10)
}

#bo_vc_sns .sns_li_off {
    background: var(--color-gray-320)
}

#bo_vc_sns a {
    display: inline-block;
    padding: 0 var(--space-15) 0 var(--space-5)
}

#bo_vc_sns input {
    margin: 0 var(--space-5) 0 0
}


/* =========================
   글쓰기
========================= */
#char_count_desc {
    display: block;
    margin: 0 0 var(--space-5);
    padding: 0
}

#char_count_wrap {
    margin: var(--space-5) 0 0;
    text-align: right
}

#char_count {
    font-weight: bold
}

#autosave_wrapper {
    position: relative
}

/* !important 유지: SmartEditor JS가 인라인 style로 position/height 덮어쓰는 것 방어 */
#autosave_pop {
    display: none;
    z-index: var(--z-10);
    position: absolute !important;
    top: var(--space-34);
    right: 0;
    width: var(--space-350);
    height: auto;
    max-height: var(--space-180);
    border: 1px solid var(--color-hex-565656);
    background: var(--base-color-white);
    -webkit-box-shadow: var(--px-2) var(--px-2) var(--px-3) 0px rgba(var(--color-black-rgb), 0.2);
    -moz-box-shadow: var(--px-2) var(--px-2) var(--px-3) 0px rgba(var(--color-black-rgb), 0.2);
    box-shadow: var(--px-2) var(--px-2) var(--px-3) 0px rgba(var(--color-black-rgb), 0.2)
}

#autosave_pop:before {
    content: "";
    position: absolute;
    top: -var(--space-8);
    right: var(--space-45);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 var(--px-6) var(--px-8) var(--px-6);
    border-color: transparent transparent var(--base-color-black) transparent
}

#autosave_pop:after {
    content: "";
    position: absolute;
    top: -var(--space-7);
    right: var(--space-45);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 var(--px-6) var(--px-8) var(--px-6);
    border-color: transparent transparent var(--base-color-white) transparent
}

html.no-overflowscrolling #autosave_pop {
    height: auto;
    max-height: var(--space-10000) !important
}

#autosave_pop strong {
    position: absolute;
    font-size: 0;
    line-height: var(--lh-0);
    overflow: hidden
}

#autosave_pop div {
    text-align: center;
    margin: 0 !important
}

#autosave_pop button {
    margin: 0;
    padding: 0;
    border: 0
}

#autosave_pop ul {
    padding: var(--space-15);
    border-top: 1px solid var(--color-gray-250);
    list-style: none;
    overflow-y: scroll;
    height: var(--space-130);
    border-bottom: 1px solid var(--color-ui-line)
}

#autosave_pop li {
    padding: var(--space-8) var(--space-5);
    border-bottom: 1px solid var(--base-color-white);
    background: var(--color-gray-200);
    zoom: 1
}

#autosave_pop li:after {
    display: block;
    visibility: hidden;
    clear: both;
    content: ""
}

#autosave_pop a {
    display: block;
    float: left
}

#autosave_pop span {
    display: block;
    float: right;
    font-size: var(--em-0-92);
    font-style: italic;
    color: var(--color-gray-400)
}

.autosave_close {
    cursor: pointer;
    width: 100%;
    height: var(--space-30);
    background: none;
    color: var(--color-gray-500);
    font-weight: bold;
    font-size: var(--em-0-92)
}

.autosave_close:hover {
    background: var(--color-ui-f3f3f3);
    color: var(--color-hex-3597d9)
}

.autosave_content {
    display: none
}

.autosave_del {
    background: url(./img/close_btn.png) no-repeat 50% 50%;
    text-indent: -62.4375rem;
    overflow: hidden;
    height: var(--space-20);
    width: var(--space-20)
}

#bo_w .bo_v_option li {
    display: inline-block;
    float: left;
    text-align: left;
    margin: 0 var(--space-5) 0 0
}

#bo_w .bo_v_option li label {
    vertical-align: baseline
}

#bo_w .bo_v_option .chk_box input[type="checkbox"]+label span {
    margin-left: 0;
    margin-right: var(--space-5)
}

#bo_w .write_div {
    margin: var(--space-10) 0;
    position: relative
}

#bo_w .write_div:after {
    display: block;
    visibility: hidden;
    clear: both;
    content: ""
}

#bo_w .bo_w_info:after {
    display: block;
    visibility: hidden;
    clear: both;
    content: ""
}

#bo_w .bo_w_info .frm_input {
    float: left;
    margin-bottom: var(--cv-history-7)
}

#bo_w #wr_password,
#bo_w #wr_homepage {
    margin-left: var(--cv-history-7)
}

#bo_w .wr_content.smarteditor2 iframe {
    background: var(--base-color-white)
}

#bo_w .bo_w_tit {
    position: relative
}

#bo_w .bo_w_tit .frm_input {
    padding-right: var(--space-120)
}

#bo_w .bo_w_tit #btn_autosave {
    position: absolute;
    top: var(--space-5);
    right: var(--space-5);
    line-height: var(--space-30);
    height: var(--space-30)
}

#bo_w .bo_w_link label {
    position: absolute;
    top: var(--space-1);
    left: var(--space-1);
    border-radius: var(--px-3) 0 0 var(--px-3);
    height: var(--space-38);
    line-height: var(--space-38);
    width: var(--space-40);
    font-size: var(--em-1-2);
    text-align: center;
    color: var(--color-gray-310)
}

#bo_w .bo_w_link .frm_input {
    padding-left: var(--space-50)
}

#bo_w .bo_w_flie .lb_icon {
    position: absolute;
    top: 0;
    left: 0;
    border-radius: var(--px-3) 0 0 var(--px-3);
    height: var(--space-38);
    line-height: var(--space-38);
    width: var(--space-40);
    font-size: var(--em-1-2);
    text-align: center;
    color: var(--color-gray-310)
}

#bo_w .bo_w_flie .frm_file {
    padding-left: var(--space-50);
    margin-top: var(--space-3)
}

#bo_w .bo_w_flie .file_wr {
    position: relative;
    border: 1px solid var(--color-gray-350);
    background: var(--base-color-white);
    color: var(--base-color-black);
    vertical-align: middle;
    border-radius: var(--px-3);
    padding: var(--space-5);
    height: var(--space-40);
    margin: 0
}

#bo_w .bo_w_flie .frm_input {
    margin: var(--space-10) 0 0
}

#bo_w .bo_w_flie .file_del {
    position: absolute;
    top: var(--space-10);
    right: var(--space-10);
    font-size: var(--em-0-92);
    color: var(--color-hex-7d7d7d)
}

#bo_w .bo_w_select select {
    border: 1px solid var(--color-ui-input-bg);
    width: 100%;
    height: var(--space-40);
    border-radius: var(--px-3)
}

#bo_w .btn_submit {
    padding: 0 var(--space-20);
    font-size: var(--em-1-167)
}

#bo_w .btn_cancel {
    border-radius: var(--px-3);
    font-size: var(--em-1-167)
}


/* =========================
   히스토리 상세 보기 (view)
========================= */
.raum-history-view-wrap {
    background-color: var(--background-color);
    margin-bottom: var(--space-20);
    overflow: hidden;
    display: flex;
    height: var(--space-500);
    width: 100%;
}

.raum-history-view-wrap .raum-history-view-text {
    width: 50%;
    flex-shrink: 0;
    padding-top: var(--cv-history-8);
    padding-bottom: var(--cv-history-8);
    padding-right: var(--cv-history-9);
    padding-left: max(var(--history-pad-side), min(var(--px-200), calc((100vw - var(--px-1600)) / 2 + var(--history-pad-side))));
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
}

.raum-history-view-wrap .raum-history-view-year {
    font-family: var(--font-KR-base);
    font-size: var(--cv-history-10);
    font-weight: var(--fw-700);
    letter-spacing: var(--em-neg-0-03);
    color: var(--base-color-darkblack);
    margin-bottom: var(--cv-history-3);
}

.raum-history-view-wrap .raum-history-view-label {
    display: block;
    font-size: var(--text-font-size);
    color: var(--signature-color);
    font-weight: var(--fw-500);
    margin-bottom: var(--space-8);
}

.raum-history-view-wrap .raum-history-view-title {
    font-size: var(--text-font-title-size);
    line-height: var(--text-font-title-size-line);
    font-weight: var(--fw-700);
    color: var(--base-color-darkblack);
    margin-bottom: var(--cv-history-1);
}

.raum-history-view-wrap .raum-history-view-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.raum-history-view-wrap .raum-history-view-list li {
    font-size: var(--text-font-size);
    line-height: var(--text-font-size-line);
    color: var(--base-color-sub-black);
    padding: var(--space-4) 0 var(--space-4) var(--space-14);
    position: relative;
}

.raum-history-view-wrap .raum-history-view-list li::before {
    content: '·';
    position: absolute;
    left: 0;
    color: var(--base-color-sub-black);
}

.raum-history-view-wrap .raum-history-view-img {
    flex: 1;
    overflow: hidden;
}

.raum-history-view-wrap .raum-history-view-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.history_view_info {
    margin-top: var(--space-20);
    font-size: var(--em-0-875);
    color: var(--color-gray-400);
    line-height: var(--em-1-5);
}

.history_view_info .raum-history-date {
    display: inline-block;
    margin-left: var(--space-10);
}


/* =========================
   히스토리 글쓰기 폼
========================= */
.raum-history-write-fields {
    margin: var(--space-20) 0;
}

.raum-history-field {
    margin-bottom: var(--space-15);
}

.raum-history-field-label {
    display: block;
    font-size: var(--em-0-95);
    font-weight: var(--fw-600);
    color: var(--color-gray-900);
    margin-bottom: var(--space-6);
}

.raum-history-field-label .required_mark {
    color: var(--color-hex-e74c3c);
    font-weight: normal;
}

.raum-history-field-desc {
    font-size: var(--em-0-85);
    color: var(--color-gray-400);
    margin: 0 0 var(--space-6);
}

.section_bg {
    background-color: var(--background-color)
}

/* =========================
   sub1_2 섹션 1 : 인트로
========================= */
.raum-history-intro {
    padding: var(--cv-history-11) 0;
    width: 100%;
}

/* raum-history-intro-content, h2 → contents.css에서 관리 (중복 선언 금지) */

.raum-history-intro_sub {
    font-size: var(--text-font-title-size);
    line-height: var(--text-font-title-size-line);
    color: var(--signature-color);
    font-weight: var(--fw-500);
    margin-bottom: var(--cv-history-3);
}

.raum-history-intro_desc p {
    font-size: var(--text-font-size);
    line-height: var(--text-font-size-line);
    color: var(--base-color-sub-black);
    word-break: keep-all;
}

/* =========================
   sub1_2 섹션 2 : 히스토리
========================= */
.raum-history-view {
    width: 100%;
}

.history_view_wrap {
    display: flex;
    height: var(--space-500);
}

.raum-history-view-text {
    width: 42%;
    flex-shrink: 0;
    padding: var(--cv-history-8) var(--cv-history-9);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.raum-history-view-year {
    font-family: var(--font-KR-base);
    font-size: var(--cv-history-10);
    font-weight: var(--fw-700);
    color: var(--base-color-darkblack);
    margin-bottom: var(--cv-history-3);
}

.raum-history-view-label {
    display: block;
    font-size: var(--text-font-size);
    color: var(--signature-color);
    font-weight: var(--fw-500);
    margin-bottom: var(--space-8);
}

.raum-history-view-title {
    font-size: var(--text-font-title-size);
    line-height: var(--text-font-title-size-line);
    font-weight: var(--fw-700);
    color: var(--base-color-darkblack);
    margin-bottom: var(--cv-history-1);
}

.raum-history-view-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.raum-history-view-list li {
    font-size: var(--text-font-size);
    line-height: var(--text-font-size-line);
    color: var(--base-color-sub-black);
    padding: var(--space-4) 0;
    padding-left: var(--space-14);
    position: relative;
}

.raum-history-view-list li::before {
    content: '·';
    position: absolute;
    left: 0;
    color: var(--base-color-sub-black);
}

.raum-history-view-img {
    flex: 1;
    overflow: hidden;
}

.raum-history-view-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.bg-wrap {
    background-color: var(--background-color);
}

@media (max-width: 768px) {
    .history_view_wrap {
        flex-direction: column;
    }

    .raum-history-view-text {
        width: 100%;
    }

    .raum-history-view-img {
        height: var(--space-300);
    }
}

/* =========================
   히스토리 글쓰기
========================= */
.raum-history-write {
    max-width: var(--space-1600);
    margin: 0 auto;
    padding: var(--history-pad-tb) var(--history-pad-side);
}

/* 히스토리 글쓰기 버튼 */
.raum-history-w-buttons {
    text-align: center;
    padding: var(--cv-history-3) 0;
    display: flex;
    justify-content: center;
    gap: var(--space-12);
}

.raum-history-btn-cancel {
    display: inline-block;
    padding: var(--space-14) var(--space-48);
    font-size: var(--cv-history-6);
    border: 1px solid var(--base-color-black);
    border-radius: 0;
    cursor: pointer;
    text-decoration: none;
    letter-spacing: var(--em-0-04);
    transition: all var(--transition-swift);
    font-weight: var(--fw-500);
    line-height: var(--lh-1);
    background: transparent;
    color: var(--base-color-black);
}

.raum-history-btn-cancel:hover {
    background: rgba(var(--color-black-rgb), 0.05);
}

.raum-history-btn-submit {
    display: inline-block;
    padding: var(--space-14) var(--space-48);
    font-size: var(--cv-history-6);
    border: 1px solid var(--base-color-black);
    border-radius: 0;
    cursor: pointer;
    text-decoration: none;
    letter-spacing: var(--em-0-04);
    transition: all var(--transition-swift);
    font-weight: var(--fw-500);
    line-height: var(--lh-1);
    background: var(--base-color-black);
    color: var(--base-color-white);
}

.raum-history-btn-submit:hover {
    opacity: var(--op-085);
}

/* =========================
   반응형
========================= */
@media (max-width: 768px) {

    #bo_history .history_view_wrap,
    .raum-history-view-wrap .history_view_wrap {
        flex-direction: column;
    }

    #bo_history .raum-history-view-text,
    .raum-history-view-wrap .raum-history-view-text {
        width: 100%;
        padding-left: var(--history-pad-side);
    }

    #bo_history .raum-history-view-img,
    .raum-history-view-wrap .raum-history-view-img {
        height: var(--space-300);
    }
}

/* =========================
   관리자 하단 바 (글래스)
========================= */
.raum-hist-admin_bar {
    position: fixed;
    bottom: var(--cv-history-12);
    left: 50%;
    transform: translateX(-50%);
    z-index: var(--z-999);
    display: flex;
    align-items: center;
    gap: var(--cv-history-13);
    padding: var(--cv-history-14) var(--cv-history-15);
    background: linear-gradient(
        135deg,
        rgba(var(--color-white-rgb), 0.12) 0%,
        rgba(var(--color-white-rgb), 0.06) 50%,
        rgba(var(--color-white-rgb), 0.1) 100%
    );
    backdrop-filter: blur(var(--px-20)) saturate(1.4);
    -webkit-backdrop-filter: blur(var(--px-20)) saturate(1.4);
    border: 1px solid rgba(var(--color-white-rgb), 0.18);
    border-radius: var(--space-50);
    box-shadow:
        0 0.5rem 2rem rgba(var(--color-black-rgb), 0.15),
        inset 0 1px 0 rgba(var(--color-white-rgb), 0.15),
        inset 0 -1px 0 rgba(var(--color-black-rgb), 0.05);
}

.raum-hist-admin_bar_divider {
    width: var(--px-1);
    margin: 0 var(--cv-history-16);
    height: var(--space-20);
    background: rgba(var(--color-white-rgb), 0.2);
    flex-shrink: 0;
}

.raum-hist-admin_bar_chk {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    color: var(--base-color-black);
    font-size: var(--space-14);
    font-weight: var(--fw-600);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.raum-hist-admin_bar_chk input[type="checkbox"] {
    position: absolute;
    opacity: var(--op-0);
    width: 0;
    height: 0;
}

.raum-hist-admin_bar_chk_box {
    position: relative;
    width: var(--space-18);
    height: var(--space-18);
    border: none;
    border-radius: 50%;
    background: var(--color-gray-150);
    transition: background var(--transition-snappy);
    flex-shrink: 0;
}

.raum-hist-admin_bar_chk_box::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--space-7);
    height: var(--space-7);
    border-radius: 50%;
    background: var(--signature-color);
    transform: translate(-50%, -50%) scale(0);
    opacity: var(--op-0);
    transition: transform var(--transition-snappy), opacity var(--transition-quick);
}

.raum-hist-admin_bar_chk input[type="checkbox"]:checked + .raum-hist-admin_bar_chk_box {
    background: rgba(var(--color-white-rgb), 0.35);
}

.raum-hist-admin_bar_chk input[type="checkbox"]:checked + .raum-hist-admin_bar_chk_box::after {
    transform: translate(-50%, -50%) scale(1);
    opacity: var(--op-1);
}

@media (hover: hover) {
    .raum-hist-admin_bar_chk:hover .raum-hist-admin_bar_chk_box {
        background: rgba(var(--color-white-rgb), 0.3);
    }
}

.raum-hist-admin_bar_btn,
a.raum-hist-admin_bar_btn,
a.raum-hist-admin_bar_btn:link,
a.raum-hist-admin_bar_btn:visited {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--cv-history-17);
    font-size: 0;
    line-height: var(--lh-0);
    color: var(--color-gray-500);
    background: var(--color-gray-100);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

@media (hover: hover) {
    .raum-hist-admin_bar_btn:hover,
    a.raum-hist-admin_bar_btn:hover,
    a.raum-hist-admin_bar_btn:active {
        background: rgba(var(--color-white-rgb), 0.18);
        border-color: rgba(var(--color-white-rgb), 0.3);
        color: var(--signature-color);
    }
}

.raum-hist-admin_bar_btn[disabled],
.raum-hist-admin_bar_btn:disabled {
    opacity: var(--op-035);
    cursor: not-allowed;
    pointer-events: none;
}

/* 하단바 탭 (게시판 전환) */
.raum-hist-admin_bar_tabs {
    display: flex;
    align-items: center;
    gap: var(--cv-history-18);
    flex-shrink: 0;
}

.raum-hist-admin_bar_tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-6);
    padding: var(--cv-history-14) var(--space-20);
    font-size: var(--cv-history-19);
    font-weight: var(--fw-500);
    line-height: var(--lh-1);
    color: var(--base-color-black);
    background: var(--color-gray-200);
    border: none;
    border-radius: var(--space-24);
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--transition-snappy), color var(--transition-snappy);
}

.raum-hist-admin_bar_tab.active {
    color: var(--base-color-white);
    background: var(--signature-color);
}

@media (hover: hover) {
    .raum-hist-admin_bar_tab:not(.active):hover {
        background: var(--color-gray-150);
    }
}

.raum-hist-admin_bar_btn--settings svg {
    animation: raum-gear-spin var(--anim-spin-slow);
}

@keyframes raum-gear-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.raum-hist-admin_bar_btn--danger {
    color: rgba(255, 120, 120, 0.9);
    border-color: rgba(255, 120, 120, 0.2);
}

@media (hover: hover) {
    .raum-hist-admin_bar_btn--danger:hover {
        background: rgba(255, 80, 80, 0.15);
        border-color: rgba(255, 120, 120, 0.35);
        color: rgba(255, 120, 120, 0.9);
    }
}

/* ===== [독립화] portfolio write-page 전용 규칙 이식 ===== */

.raum-hist-w_slider_hint {
    text-align: center;
    font-size: var(--em-0-85);
    color: var(--color-gray-400);
    margin: 0 0 var(--space-12);
}

.raum-hist-w_section {
    position: relative;
    padding: var(--cv-history-20) 0;
}

.raum-hist-w_title_input {
    display: block;
    width: 100%;
    border: none;
    border-bottom: var(--px-2) dashed rgba(var(--color-black-rgb), 0.15);
    background: transparent;
    text-align: center;
    font-size: var(--space-26);
    font-weight: var(--fw-700);
    color: var(--base-color-black);
    padding: var(--space-10) 0;
    margin-bottom: var(--space-12);
    outline: none;
    box-sizing: border-box;
    resize: none;
    overflow: hidden;
    line-height: var(--lh-14);
}

.raum-hist-w_title_input::placeholder {
    color: var(--color-gray-400);
}

.raum-hist-w_title_input:focus {
    border-bottom-color: var(--base-color-black);
}

.raum-hist-w_cate_select {
    display: block;
    max-width: var(--space-300);
    margin: 0 auto var(--space-20);
    border: 1px solid rgba(var(--color-black-rgb), 0.15);
    height: var(--space-38);
    line-height: var(--space-38);
    padding: 0 var(--space-12);
    border-radius: 0;
    text-align: center;
    box-sizing: border-box;
    background: transparent;
    font-size: var(--space-14);
    color: var(--color-gray-600);
    outline: none;
}

.raum-hist-w_field_row {
    max-width: var(--space-400);
    margin: 0 auto var(--space-15);
}

.raum-hist-w_input {
    width: 100%;
    border: 1px solid var(--color-ui-input-bg);
    padding: var(--space-8) var(--space-12);
    border-radius: var(--px-3);
    box-sizing: border-box;
}

.raum-hist-w_buttons {
    text-align: center;
    padding: var(--cv-history-3) 0;
    display: flex;
    justify-content: center;
    gap: var(--space-12);
}

.raum-hist-btn_cancel,
.raum-hist-btn_submit {
    display: inline-block;
    padding: var(--space-12) var(--space-40);
    font-size: var(--cv-history-6);
    border: none;
    background: var(--background-color-gray);
    color: var(--base-color-black);
    cursor: pointer;
    transition: all var(--transition-snappy);
    text-decoration: none;
}

.raum-hist-btn_cancel:hover,
.raum-hist-btn_submit:hover {
    background: rgba(var(--color-black-rgb), 0.15);
}

.raum-hist-write_page .raum-hist-w_buttons {
    display: none;
}

.raum-hist-w_info_fields {
    display: flex; flex-wrap: wrap;
    gap: var(--cv-history-21) var(--cv-history-22);
}

.raum-hist-w_info_field_row {
    display: flex;
    align-items: stretch;
    gap: var(--cv-history-23);
    padding: 0;
}

.raum-hist-w_info_field_label {
    display: flex;
    align-items: center;
    font-size: var(--cv-history-24);
    font-weight: var(--fw-600);
    color: var(--color-gray-600);
    white-space: nowrap;
    min-width: var(--space-88);
    flex-shrink: 0;
    padding: var(--cv-history-25) 0;
}

.raum-hist-w_info_field_input {
    flex: 1;
    border: none;
    border-bottom: 1px solid rgba(var(--color-black-rgb), 0.08);
    background: transparent;
    font-size: var(--cv-history-24);
    color: var(--color-gray-380);
    padding: var(--cv-history-25) 0;
    outline: none;
    transition: border-color var(--transition-snappy), color var(--transition-snappy);
}

.raum-hist-w_info_field_input::placeholder {
    color: var(--color-gray-400);
}

.raum-hist-w_info_field_input:focus {
    color: var(--base-color-black);
    border-bottom-color: var(--signature-color);
}

.raum-hist-w_content_textarea {
    display: block;
    width: 100%;
    height: var(--space-400);
    border: 1px dashed rgba(var(--color-black-rgb), 0.15);
    background: transparent;
    font-size: var(--cv-history-26);
    line-height: var(--lh-19);
    font-family: var(--font-KR-base);
    color: var(--color-gray-600);
    padding: var(--cv-history-27);
    outline: none;
    box-sizing: border-box;
    resize: vertical;
}

.raum-hist-w_content_textarea::placeholder {
    color: var(--color-gray-400);
}

.raum-hist-w_content_textarea:focus {
    border-color: var(--base-color-black);
}

.raum-hist-w_title_input--inline {
    flex: 1;
    text-align: left;
    font-size: var(--cv-history-28);
    margin-bottom: 0;
}

.raum-hist-w_meta_content_row {
    display: flex;
    gap: var(--cv-history-29);
    align-items: flex-start;
    margin-top: var(--cv-history-30);
}

.raum-hist-w_meta_left {
    flex-shrink: 0;
    width: var(--cv-history-31);
    display: flex;
    flex-direction: column;
    gap: var(--cv-history-32);
}

.raum-hist-w_meta_right {
    flex: 1;
}

.raum-hist-w_cate_select--left {
    margin: 0;
    max-width: none;
    text-align: left;
}

.raum-hist-w_content_textarea.raum-hist-w_content_textarea--auto {
    height: var(--cv-history-33);
    resize: none;
    overflow: hidden;
    background: rgba(var(--color-black-rgb), 0.03);
    border: none;
    border-radius: var(--px-3);
    padding-top: var(--space-12);
    padding-bottom: var(--space-12);
}

.raum-hist-w_content_textarea.raum-hist-w_content_textarea--auto:focus {
    border: none;
}
/* 게시판 list 페이지 — sub1_2 contents.css의 timeline-year::before 도트 숨김 */
#bo_history .raum-history-timeline-year::before {
    display: none;
}

/* =========================
   글쓰기 페이지 (Design Works 워크프레임)
========================= */
body:has(.raum-hist-write_page) header,
body:has(.raum-hist-write_page) footer,
body:has(.raum-hist-write_page) .raum-gnb-all,
body:has(.raum-hist-write_page) #hd_login_msg {
    display: none;
}

body:has(.raum-hist-write_page) #wrapper,
body:has(.raum-hist-write_page) #container {
    padding: 0;
}

.raum-hist-write_page {
    display: flex;
    min-height: var(--svh-100);
}

.raum-hist-write_sidebar {
    position: sticky;
    top: 0;
    width: var(--sidebar-width);
    height: var(--svh-100);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: var(--cv-history-34);
    background: var(--base-color-white);
}

.raum-hist-write_logo {
    display: flex;
    text-decoration: none;
}

.raum-hist-write_logo img {
    width: var(--cv-history-35);
    height: auto;
}

.raum-hist-write_sidebar_text {
    margin-top: var(--cv-history-36);
}

.raum-hist-write_sidebar_board {
    display: block;
    font-family: var(--font-KR-base);
    font-size: var(--cv-history-37);
    font-weight: var(--fw-600);
    color: var(--base-color-black);
    letter-spacing: var(--em-0-02);
}

.raum-hist-write_sidebar_reg {
    display: block;
    font-size: var(--cv-history-38);
    font-weight: var(--fw-400);
    color: var(--color-gray-400);
    letter-spacing: var(--em-0-08);
    margin-top: var(--space-4);
}

.raum-hist-write_sidebar_date {
    display: block;
    margin-top: var(--cv-history-36);
    font-size: var(--cv-history-39);
    font-weight: var(--fw-400);
    color: var(--color-gray-300);
    letter-spacing: var(--em-0-1);
}

.raum-hist-write_sidebar_line {
    display: block;
    width: var(--space-32);
    height: var(--px-1);
    background: rgba(var(--color-black-rgb), 0.12);
    margin: var(--cv-history-32) 0;
}

.raum-hist-write_sidebar_slogan {
    display: block;
    font-family: var(--font-KR-base);
    font-size: var(--cv-history-6);
    font-weight: var(--fw-400);
    color: var(--base-color-black);
    letter-spacing: var(--em-0-05);
}

.raum-hist-write_sidebar_actions {
    display: flex;
    gap: var(--cv-history-21);
    margin-top: var(--cv-history-36);
}

.raum-hist-write_sidebar_actions a,
.raum-hist-write_sidebar_actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--space-48);
    height: var(--space-48);
    border-radius: 50%;
    border: 1px solid rgba(var(--color-black-rgb), 0.15);
    background: transparent;
    color: var(--base-color-black);
    cursor: pointer;
    text-decoration: none;
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

@media (hover: hover) {
    .raum-hist-write_sidebar_actions a:hover,
    .raum-hist-write_sidebar_actions button:hover {
        background: var(--signature-color);
        color: var(--base-color-white);
        border-color: var(--signature-color);
    }
}

#raum-hist-write {
    flex: 1;
    width: auto;
    margin: 0;
    background-color: var(--background-color);
    padding: var(--card-padding-lg) var(--card-padding) var(--spacing-section-xl);
    font-family: var(--font-KR-base);
}