html, body {
    margin: 0;
    height: 100%;
}

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 400px;
    height: 100%;
    overflow-x: hidden;
}

/* wrapper: svg + 툴팁을 감싸는 컨테이너 */
.pie-wrapper {
    position: relative;
    display: flex;
    width: 820px;
    height: 100%;

    /* 필요하면 여기서만 폰트/배경 지정 가능
       font-family: Arial, sans-serif;
       background: #ffffff;
    */
}
#pie {
    transform: translateY(-20px);
}
@media screen and (max-width: 640px) {
    .container {
        align-items: initial;
    }

    .pie-wrapper {
        width: 100%
    }
}

/* svg (viewBox 기반) */
svg {
    display: block;
    width: 100%;
    height: auto;
}

.sector {
    cursor: pointer;
    transition:
            fill 0.2s ease-out,
            filter 0.2s ease-out;
}

/* 중앙 도넛 안 HTML 스타일 */
.center-container {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.center-container .logo {
    margin-top: 30px;
}
.center-container .logo-base {
    margin: 30px 0;
}
.center-container .slogan {
    font-size: 27px;
    color: #898989;
    text-align: center;
    margin: 0;
    line-height: 1.3;
}

/* ---------- 섹터 툴팁 (6개) ---------- */
.tooltip-wrapper {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    pointer-events: none;
}
@media screen and (max-width: 640px) {
    .tooltip-wrapper {
        display: none;
    }
}
.sector-tooltip {
    --tooltip-color: #4382DD;

    position: absolute;
    opacity: 0;
    pointer-events: none;
    font-size: 16px;
    color: #4d4d4d;
    transition: opacity 0.2s ease-out, transform 0.2s ease-out;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.sector-tooltip.is-visible {
    opacity: 1;
}

/* 라인 (점 + 막대) */
.sector-tooltip__line {
    display: flex;
    align-items: center;
    margin-top: 6px;
}

.sector-tooltip__dot {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--tooltip-color);
    flex-shrink: 0;
}

/* ---------- 모바일 툴팁 (아이콘 위) ---------- */
.mobile-tooltip {
    --tooltip-color: #4382DD;

    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -100%);

    max-width: 260px;
    padding: 10px 14px;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 10px 30px rgba(0,0,0,0.12), 0 2px 5px rgba(0,0,0,0.2);

    font-size: 14px;
    color: #2d2d2d;
    line-height: 1.25;
    white-space: nowrap;

    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease-out, transform 0.18s ease-out;

    z-index: 60;
}
.mobile-tooltip:after {
    content: "";
    position: absolute;
    bottom: -3px;
    left: 50%;
    width: 14px;
    height: 7px;
    box-shadow: 4px 4px 2px rgba(0,0,0,0.1);
    transform: translateX(-43%) rotate(72deg) skewX(55deg);
    background:  linear-gradient(150deg, transparent 46%, #fff 46%, #fff 100%);
}

.mobile-tooltip em {
    color: var(--tooltip-color);
    font-style: normal;
    font-weight: 700;
}

.mobile-tooltip.is-visible {
    opacity: 1;
    pointer-events: auto;
}

.sector-tooltip__bar {
    height: 3px;
    width: 70px;
    border-radius: 4px;
    background: var(--tooltip-color);
    margin-left: -3px;
    flex-shrink: 0;
}

/* 텍스트 영역 */
.sector-tooltip__text {
    font-size: 16px;
    line-height: 1.7;
    white-space: nowrap;
}

.sector-tooltip__desc {
    margin: 0;
}

/* desc 안의 <em> 만 색상 강조 */
.sector-tooltip__text em {
    color: var(--tooltip-color);
    font-style: normal;
    font-weight: 600;
}

/* ----- 위치 지정 (데스크탑 전용: JS가 left/top을 inline으로 넣음) ----- */

/*
  JS가 지정한 (left, top)은 "점(dot)이 놓일 앵커 지점"으로 사용한다.
  - 오른쪽 배치: 툴팁의 왼쪽 끝이 앵커에 붙음
  - 왼쪽 배치: 툴팁 전체를 X축으로 100% 당겨서 툴팁의 오른쪽 끝(점)이 앵커에 오도록
*/
.sector-tooltip{
    transform: translate(0, -8px);
}
.sector-tooltip.is-left{
    transform: translate(-100%, -8px);
    flex-direction: row-reverse;
}
.sector-tooltip.is-left .sector-tooltip__line{
    flex-direction: row-reverse;
}
.sector-tooltip.is-left .sector-tooltip__bar{
    margin-left: 0;
    margin-right: -6px;
}

/* ---------- 6시 방향 로그인 UI ---------- */
.login-wrapper {
    position: absolute;
    left: 50%;
    top: 79%;
    transform: translate(-50%, -50%);
    text-align: center;
    pointer-events: auto;
    font-family: inherit;
}
/*@media screen and (max-width: 640px) {
    .login-wrapper {
        top: 75%
    }
}*/
/*@media screen and (max-height: 420px) {
    .container {
        overflow-x: initial;
        margin-top: 0;
    }
    .login-wrapper {
        position: relative;
        !*left: 50%;*!
        !*top: 86%;*!
        !*transform: translate(-50%, -50%);*!
        text-align: center;
        pointer-events: auto;
        display: flex;
    }
}*/
.login-button {
    background: #196BE1;
    color: #ffffff;
    border: none;
    padding: 10px 28px;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
}

.login-links {
    margin-top: 10px;
    font-size: 14px;
    color: #9e9e9e;
    display: flex;
    gap: 12px;
    justify-content: center;
    align-items: center;
    white-space: nowrap;
}

.login-links .divider {
    color: #cfcfcf;
}

.login-links div {
    cursor: pointer;
}