.hide {
        display: none;
    }

    :root {
        --accent: #1588ff;
        /* 타이틀/포인트 색상 */
        --muted: #7a7a7a;
        /* 값 텍스트 색상 */
        --key: #222;
        /* 키(라벨) 색상 */
        --phone: #e04444;
        /* 전화번호 강조 색상 (빨강 계열) */
        --bg: #f6f7f8;
        /* 페이지 배경 */
        --card-bg: #ffffff;
        /* 카드 배경 */
        --border: #eeeeee;
        --radius: 10px;
        --maxw: 780px;
        --gap-x: 48px;
        --gap-y: 16px;

        --card-pad: 14px;
        --card-shadow: 0 10px 30px rgba(18,35,62,0.08);
        --divider: #eef1f3;
        --title-color: #111827;
        --head-bg: linear-gradient(180deg,#ffffff,#fbfdff);

        --btn-bg-1: #1588ff;      /* 버튼 */
        --btn-bg-2: #0066d6;      /* 버튼 호버 시 */
        --btn-color: #ffffff;     /* 글자 색 */
        --btn-padding: 10px 18px; /* 내부 여백 */
        --btn-font-size: 15px;    /* 글자 크기 */
        --btn-shadow: 0 6px 18px rgba(10, 80, 160, 0.18);
        --btn-shadow-hover: 0 10px 30px rgba(10, 80, 160, 0.22);
        --focus-ring: rgba(3, 169, 244, 0.18);
    }

    .boardBox {
        display: flex;
        align-items: center;    /* 수직 중앙 */
        justify-content: center;/* 수평 중앙 */ 
    }
    
    .two-col {
        max-width: 1200px;
        display: flex;
        margin: 0 auto;
        gap: 28px;                 /* 좌우 간격 */
        align-items: flex-start;
        align-content: flex-start;
        width: 100%;
        box-sizing: border-box;
        /* 필요 시 max-width / margin: 0 auto 추가 가능 */
    }

    .two-col .left-side {
        flex: 1 1 0%;
        width: 780px;
        min-width: 0;             /* 텍스트 오버플로우 방지 */
        align-items: center;
        justify-content: center;
        flex-direction: column;
        box-sizing: border-box;
    }

    .two-col .right-side {
        flex-direction: column;
        padding-bottom: 100px;
        flex: 0 0 360px;          /* 고정 320px 폭 (원하면 값 변경) */
        max-width: 360px;
        box-sizing: border-box;
    }

    .two-col .left-side,
    .two-col .right-side {
        padding: 18px;
    }

    /* 아주 작은 화면용 마무리 */
    @media (max-width: 1000px) {
         .two-col {
            display: block;          /* 블록으로 바꿔 세로로 쌓음 */
            gap: 0;
        }

        .two-col .left-side,
        .two-col .right-side {
            width: 100%;
            max-width: none;
            padding: 14px 12px;      /* 모바일에 맞게 패딩 축소 */
            border-left: none;       /* 사이드바 경계 제거 */
        }

        /* 오른쪽(사이드바)을 아래로 내리기 위한 마진 */
        .two-col .right-side {
            margin-top: 18px;
            border-top: 1px solid #eee; /* 시각적 구분을 위해 상단 경계 */
        }

        /* 글자/타이포 크기 조정(선택) */
        .two-col .left-side { font-size: 15px; }
        .two-col .right-side { font-size: 14px; }
    }

    /* 컨테이너 카드 */
    .comp_data {
        max-width: var(--maxw);
        margin: 24px auto;
        background: var(--card-bg);
        border-radius: var(--radius);
        box-shadow: 0 8px 20px rgba(24, 24, 24, 0.06);
        padding: 36px 44px;
        border: 1px solid var(--border);
        box-sizing: border-box;
    }

    /* 상단 업체명(큰 제목) */
    .comp_data>div h2 {
        margin: 0 0 18px 0;
        padding: 0 25px;
        font-size: 36px;
        font-weight: 800;
        color: var(--accent);
        letter-spacing: -0.5px;
    }

    /* 섹션 제목 (업체정보) */
    .comp_data section {
        margin-top: 8px;
        padding: 28px 25px 0 25px;
        border-top: 1px solid var(--border);
    }

    .comp_data section>div {
        font-size: 18px;
        font-weight: 700;
        color: #222;
        margin-bottom: 20px;
    }

    /* 리스트 그리드: 두 열 레이아웃 */
    .comp_data_detail {
        list-style: none;
        padding: 0 5px;
        margin: 0;
        display: grid;
        grid-template-columns: 0.7fr 1.3fr;
        column-gap: var(--gap-x);
        row-gap: var(--gap-y);
        align-items: start;
    }

    /* 각 항목 */
    .comp_data_detail .item {
        align-items: flex-start;
        gap: 18px;
        padding: 6px 0;
    }

    /* 키(라벨) 영역 */
    .comp_data_detail .item .key {
        width: 130px;
        /* 고정 너비로 정렬 */
        min-width: 110px;
        font-size: 15px;
        font-weight: 700;
        color: var(--key);
        line-height: 1.2;
        flex-shrink: 0;
    }

    /* 값 영역 */
    .comp_data_detail .item .val {
        font-size: 15px;
        color: var(--muted);
        word-break: keep-all;
    }

    /* 주소 항목 - 여러 줄(지번/도로명) */
    .comp_data_detail .item.adr {
        /* 주소는 세로로 길기 때문에 한 칸을 더 차지하게 할 수 있음 */
    }

    .comp_data_detail .item.adr .val {
        display: block;
        margin-bottom: 6px;
    }

    /* 전화번호 강조 */
    .comp_data_detail .item.phone .val,
    .comp_data_detail .item.ad_phone .val {
        font-weight: 700;
        color: var(--phone);
    }

    /* 광고용 전화번호 부분 */
    .comp_data_detail .item.ad_phone .link {
        font-size: 12px;
        color: #5a7566;
        margin-top: 8px;
        display: block;
    }

    .comp_data_detail .item.ad_phone .link a {
        color: var(--accent);
        text-decoration: none;
        font-weight: 700;
        display: block;
    }

    .comp_data_detail .item.ad_phone .link a:hover {
        text-decoration: underline;
    }

    /* 작은 보조 태그(예: 변환 버튼 등) */
    .badge {
        display: inline-block;
        background: #f2f5f4;
        color: #46655a;
        padding: 4px 8px;
        border-radius: 999px;
        font-size: 12px;
        vertical-align: middle;
        margin-left: 8px;
        border: 1px solid #e6efec;
    }

    /* 토글 섹션 기초 스타일 */
.caution_info { 
  background: #fff;
  overflow: visible;
}

/* 헤더(클릭 가능한 영역) 스타일 */
.caution_info .section_header {
  padding: 14px 18px;
  cursor: pointer;
  user-select: none;
}
.caution_info .sectionTitle {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  color: #222;
  font-size: 16px;
  outline: none;
}

/* 화살표 */
.caution_info .downArrow {
  width: 14px;
  height: 14px;
  display: inline-block;
  transition: transform .25s ease;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23222' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}

/* 바디(내용) - 애니메이션을 위해 max-height 사용 */
.caution_info .section_body {
  max-height: 0;
  overflow: hidden;
  transition: max-height .32s ease, opacity .28s ease;
  opacity: 0;
  padding: 0 18px;
}

/* 내부 리스트 스타일 */
.caution_info .section_body .item {
  color: #333;
  line-height: 1.6;
  font-size: 14px;
}

/* 강조 텍스트 색상 */
.caution_info .color_g { color: #2a9d8f; }

/* 열린 상태: .on 클래스 사용 */
.caution_info.on .section_body {
  /* 충분히 큰 max-height를 주어 자연스럽게 열리게 함 */
  max-height: 1200px;
  opacity: 1;
}
.caution_info.on .downArrow {
  transform: rotate(180deg);
}

/* 포커스 스타일 (키보드용) */
.sectionTitle:focus {
  box-shadow: 0 0 0 6px rgba(3, 169, 244, 0.12);
  border-radius: 6px;
}

/* 반응형: 모바일에서 패딩/폰트 조정 가능 */
@media (max-width: 720px) {
  .caution_info .section_header { padding: 12px 14px; }
  .caution_info .sectionTitle { font-size: 15px; }
  .caution_info .section_body .item { font-size: 13.5px; }
}


    .caution_list li {
        font-size: 13px;
        margin: 5px 0;
    }

    .color_g {
        color: var(--phone);
    }

    /* 반응형: 모바일에서는 한 열로 정렬, 키/값은 위아래 배치 */
    @media (max-width: 820px) {
        .comp_data {
            padding: 22px;
        }

        .comp_data_detail {
            grid-template-columns: 1fr;
            column-gap: 0;
        }

        .comp_data_detail .item {
            flex-direction: column;
            gap: 6px;
            padding: 10px 0;
        }

        .comp_data_detail .item .key {
            width: auto;
            min-width: 0;
            color: #555;
            font-weight: 700;
        }

        .comp_data>div h2 {
            font-size: 28px;
        }
    }

    /* 아주 작은 화면용 마무리 */
    @media (max-width: 420px) {
        .comp_data {
            padding: 16px;
        }

        .comp_data>div h2 {
            font-size: 24px;
        }

        .comp_data_detail .item .key {
            font-size: 13px;
        }

        .comp_data_detail .item .val {
            font-size: 13px;
        }
    }
    
    .hot_comp, .best_comp {
        max-width: 780px;
        margin: 24px auto;
        background: var(--card-bg);
        border-radius: var(--radius);
        box-shadow: 0 8px 20px rgba(24, 24, 24, 0.06);
        padding: 36px 44px;
        overflow: hidden;
        border: 1px solid var(--border);
        box-sizing: border-box;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans KR", "Helvetica Neue", Arial;
    }

    .live-rank__head {
        display: flex;
        padding-bottom: 20px;
        background: var(--head-bg);
        border-bottom: 1px solid var(--divider);
    }

    .live-rank__head h3 {
        margin: 0;
        font-size: 18px;
        color: var(--title-color);
        font-weight: 800;
        letter-spacing: -0.2px;
    }

    .live-rank__item {
        height: 65px;
        width: 100%;
        flex-direction: column;
        display: flex;
        gap: 10px;
        justify-content: center;
        position: relative;
        align-items: flex-start;
        background: transparent;
        transition: background .18s ease, transform .12s ease;
    }

    /* 아이템 구분선 (각 행 상단에 라인) */
    .live-rank__item + .live-rank__item {
        border-top: 1px solid var(--divider);
    }

    /* 내부 콘텐츠: 제목+설명 블록 */
    .live-rank__title {
        flex: 1 1 auto;
        min-width: 0;
    }

    /* a 전체를 블록으로 만들어 클릭 영역 확대 */
    .live-rank__title a {
        display: block;
        text-decoration: none;
        color: inherit;
        padding: 0;
        outline: none;
    }

    /* 업체명 (제목) 스타일 */
    .live-rank__title h3 {
        margin: 0 0 6px 0;
        font-size: 15.5px;
        color: var(--accent);
        font-weight: 800;
        line-height: 1.2;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* 설명(서브텍스트) */
    .live-rank__title p {
        width: 70%;
        margin: 0;
        font-size: 13px;
        color: var(--muted);
        line-height: 1.4;
        display: -webkit-box;
        -webkit-line-clamp: 2;       /* 2줄 자르기 */
        -webkit-box-orient: vertical;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* hover / focus 상태 (카드처럼 들리는 이펙트) */
    .live-rank__item:hover,
    .live-rank__item:focus-within {
        background: #fbfeff;
        color: var(--key);
        transform: translateY(-2px);
    }

    /* 링크 포커스 가시성(키보드 접근성) */
    .live-rank__title a:focus {
        box-shadow: 0 0 0 4px rgba(42,166,143,0.12);
        border-radius: 8px;
    }

    /* 모바일: 전체 너비, 패딩 약간 축소 */
    @media (max-width: 520px) {
        .live-rank__head { padding: 12px; }
        .live-rank__item { padding: 10px 12px; }
        .live-rank__title h3 { font-size: 15px; }
        .live-rank__title p { font-size: 13px; -webkit-line-clamp: 2; }
    }

    /* 컨테이너: 필요시 가운데 정렬 등 지정 */
    .btn_box {
        display: flex;
        align-items: center;    /* 수직 중앙 */
        justify-content: center;/* 수평 중앙 */ 
        margin-bottom: 20px;
    }

    /* 앵커를 버튼처럼 렌더링 */
    .btn_box .optionBtn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: var(--btn-padding);
    font-size: var(--btn-font-size);
    font-weight: 600;
    color: var(--btn-color);
    text-decoration: none;
    border-radius: var(--radius);
    background: var(--btn-bg-1);
    box-shadow: var(--btn-shadow);
    transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    border: 0;
    }

    /* 내부 텍스트 스타일 (원하면 아이콘/텍스트 분리 가능) */
    .btn_box .optionBtn .text {
    line-height: 1;
    display: inline-block;
    }

    /* hover / focus / active 상태 */
    .btn_box .optionBtn:hover {
    background: var(--btn-bg-2);
    box-shadow: var(--btn-shadow-hover);
    opacity: 0.99;
    }

    .btn_box .optionBtn:active {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(10,80,160,0.16);
    }

    .btn_box .optionBtn:focus {
    outline: none;
    box-shadow: 0 0 0 6px var(--focus-ring);
    }

    /* 키보드 접근성 향상: 포커스 시 가시성 */
    .btn_box .optionBtn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 6px var(--focus-ring);
    }

    /* 모바일에서 전체너비 버튼으로 보이게 하고 싶다면 (선택) */
    @media (max-width: 720px) {
    .btn_box .optionBtn {
        display: flex;
        width: 100%;
        justify-content: center;
        padding: 12px 16px;
    }
}