@charset "utf-8";

:root {}

html {font-size:62.5%; height:100%;}
body {margin:0; font-family:'Pretendard Variable','Pretendard','Noto Sans KR',sans-serif; font-size:var(--fs-16); line-height:150%; background:#EEF0F6;}
h1, h2, h3, h4, h5, h6, p, dl, dd {margin:0;}
ul {margin:0; padding:0; list-style:none;}
a {color:#000; text-decoration:none;}
button{font-family:inherit !important;}

br.mo {display:none;}

#container {width:100%; max-width:980px; min-height:100vh; margin:0 auto; padding:80px 40px 40px; box-sizing:border-box; background:#fff;}
#container > section > h4 {display:flex; align-items:center; gap:8px; font-size:var(--fs-32); font-weight:700; line-height:150%;}

.accordion {}
.accordion-header {position:relative; display:flex; align-items:center; flex-wrap:wrap; width:100%; margin-top:40px; padding:0 0 20px 14px; border:none; border-bottom:1px solid #EA0A2A; background:#fff; font-size:var(--fs-24); font-weight:700; cursor:pointer;}
.accordion-header:before {content:''; position:absolute; top:0; left:0; display:block; width:6px; height:6px; border-radius:50%; box-sizing:border-box; background:#EA0A2A;}
.accordion-header .accordion-header-tit {}
.accordion-header .accordion-header-result {display:flex; align-items:center; justify-content:center; gap:8px; min-width:41px; max-width:84px; height:32px; margin-left:12px; padding:8px; box-sizing:border-box; border:1px solid #EA0A2A; border-radius:8px; color:#EA0A2A; font-size:var(--fs-14); font-weight:500; line-height:150%;}
.accordion-header p {width:100%; margin-top:4px; text-align:left; color:#505861; font-size:var(--fs-14); font-weight:400; line-height:150%;}
.accordion-icon {position:absolute; top:calc(50% - 10px); right:0; display:flex; align-items:center; transform:translateY(-50%); transform-origin:center; transition:transform .3s;}
#container > section:first-child .accordion-icon {top:50% !important;}
.accordion-header.active .accordion-icon {transform:translateY(-50%) rotate(180deg);}

.accordion-body {display:none; padding:32px; border-top:1px solid #eee; background:#F8F8FC;}
.accordion-body.active {display:block;}

.chartA {display:flex; align-items:stretch; gap:60px;}
.chartA__panel {flex:1; box-sizing:border-box;}
.chartA__panel--left {}
.chartA__panel--right {width:100%; max-width:290px; padding:24px; box-sizing:border-box; border:1px solid #ececf1; border-radius:20px; background:#fff; box-shadow:0 0 10px 0 rgba(0, 0, 0, 0.07);}

.chartA__head {display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:12px;}
.chartA__title {display:flex; align-items:center; gap:8px; margin:0; color:#3f4754; font-size:var(--fs-14); font-weight:700; line-height:1.3;}
.chartA__big {margin:0; font-size:var(--fs-24); font-weight:800; line-height:1; background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent;}
/*.chartA__big {margin:0; font-size:var(--fs-24); font-weight:800; line-height:1; background:linear-gradient(180deg, #EA0A2A 0%, #840618 100%); background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent;}
.chartA__big {margin:0; font-size:var(--fs-24); font-weight:800; line-height:1; background:linear-gradient(180deg, #0A1BEA 0%, #050D84 100%); background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent;}*/

.chartA__radarBox {}
.chartA__radarWrap {position:relative; width:100%; height:300px; margin:0 auto; --radar-label-gap:32px; --radar-padding-x:120; --radar-padding-y:0;}
.chartA__radarWrap canvas {display:block; width:100% !important; height:100% !important;}

.chartA__barWrap {position:relative; width:100%; --bar-chart-padding-right:100;}
.chartA__barWrap canvas {position:relative; z-index:1; display:block; width:100% !important; height:100% !important; aspect-ratio:1/1.03;}

.chartA__label {position:absolute; top:0; left:0; z-index:2; width:max-content;}
.chartA__label.is-left {transform:translate(-100%, -50%); text-align:right;}
.chartA__label.is-right {transform:translate(0, -50%); text-align:left;}

.chartA__labelTitle {display:flex; align-items:center; gap:8px; margin:0 0 10px; color:#5b6473; font-size:var(--fs-14); font-weight:500; line-height:1.3; white-space:nowrap;}
.chartA__scoreRow {display:flex; align-items:center; gap:10px;}
.chartA__score {display:block; color:#000; font-size:var(--fs-20); font-weight:800; line-height:1;}

.chartA__label.is-left .chartA__labelTitle {justify-content:flex-end;}
.chartA__label.is-left .chartA__scoreRow {justify-content:flex-end;}
.chartA__label.is-right .chartA__labelTitle {justify-content:flex-start;}
.chartA__label.is-right .chartA__scoreRow {justify-content:flex-start;}

.chartA__badge {display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:20px; padding:0 12px; box-sizing:border-box; border:1px solid #D6DBE5; border-radius:4px; background:#fff; color:#8691A0; font-size:var(--fs-12); font-weight:700; line-height:1;}
.chartA__badge.is-strong {color:#ff2846;}
.chartA__badge.is-normal {color:#5f6876;}
.chartA__badge.is-weak {color:#0a1bea; white-space:pre;}

.chartA__desc {margin:20px 0 0; text-align:center; color:#8f98a8; font-size:var(--fs-13); line-height:1.5;}

.chartA__tooltipWrap {position:relative; z-index:0; display:inline-flex; align-items:center;}
.chartA__info {display:inline-flex; align-items:center; justify-content:center; width:14px; height:14px; margin:0; padding:0; box-sizing:border-box; border:1px solid #8691A0; border-radius:50%; background:#fff; color:#8691A0; font-size:var(--fs-08); font-weight:700; line-height:1; cursor:pointer;}
.chartA__tooltip {position:absolute; bottom:calc(100% + 10px); left:50%; z-index:10; width:220px; min-width:360px; padding:16px; box-sizing:border-box; border-radius:8px; background:#000; color:#fff; font-size:var(--fs-16); line-height:1.5; white-space:normal; opacity:0; visibility:hidden; transform:translateX(-50%); transition:opacity .2s ease, visibility .2s ease; text-align:left;}
.chartA__tooltip h5 {color:#fff; font-size:var(--fs-16); font-weight:700;}
.chartA__tooltip h6 {margin:12px 0 8px; color:#fff; font-size:var(--fs-14); font-weight:700;}
.chartA__tooltip p {color:#fff; font-size:var(--fs-13); font-weight:300;}
.chartA__tooltip::after {content:""; position:absolute; top:100%; left:50%; transform:translateX(-50%); border-top:6px solid #000; border-right:6px solid transparent; border-bottom:0; border-left:6px solid transparent;}
.chartA__tooltip.is-open {opacity:1; visibility:visible;}

.chartA__barGuide {position:absolute; left:0; right:0; z-index:2; pointer-events:none;}
.chartA__barGuideLine {position:absolute; top:50%; left:40px; right:120px; border-top:1px dashed #bfc7d5; transform:translateY(-50%);}
.chartA__barGuideLabel {position:absolute; top:50%; right:6px; display:inline-flex; align-items:center; justify-content:center; min-width:70px; height:20px; padding:0 6px; box-sizing:border-box; border:1px solid #C2C9D6; border-radius:4px; background:#fff; color:#8a94a6; font-size:var(--fs-12); font-weight:500; line-height:1; white-space:nowrap; transform:translateY(-50%);}

.chartA__barCompare {position:absolute; top:0; right:0; left:auto; z-index:3; display:inline-flex; align-items:center; justify-content:center; min-width:95px; height:20px; padding:0 6px; box-sizing:border-box; border-radius:4px; background:#EA0A2A; color:#fff; font-size:var(--fs-12); font-weight:500; line-height:1; white-space:nowrap; pointer-events:none; transform:translate(0, -50%);}
.chartA__barCompare{/* background:#0a1bea */}
.chartA__barCompare::before {content:""; position:absolute; top:50%; left:-5px; transform:translateY(-50%); border-top:4px solid transparent; border-right:5px solid #0a1bea; border-bottom:4px solid transparent; border-left:0;}



.dataA {margin-top:60px;}
.dataA .lv {display:inline-flex; align-items:center; justify-content:center; gap:10px; height:52px; margin:44px 0 12px; padding:0 16px; box-sizing:border-box; border:1px solid #505861; border-radius:8px; background:#FFF; color:#000; font-size:var(--fs-20); font-weight:700; line-height:1;}
.dataA .content {}
.dataA .content p {color:#505861; font-size:var(--fs-14); font-weight:400; line-height:170%;}
.dataA .content h6 {color:#000; font-size:var(--fs-16); font-weight:400; line-height:170%;}
.dataA .content span {color:#000; font-size:var(--fs-20); font-weight:700; line-height:170%;}
.dataA .content .detail {position:relative; display:flex; align-items:stretch; gap:24px; border-radius:4px; background:#fff; box-shadow:0 0 10px 0 rgba(0, 0, 0, 0.07);}
.dataA .content .detail > div {width:100%; padding:16px 20px; box-sizing:border-box;}
.dataA .content .detail > div + div:before {content:""; position:absolute; top:50%; left:50%; display:inline-block; width:24px; height:24px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cg clip-path='url(%23clip0)'%3E%3Cpath d='M7 7L12 12L7 17' stroke='%23C2C9D6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M13 7L18 12L13 17' stroke='%23C2C9D6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0'%3E%3Crect width='24' height='24' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E") no-repeat center; background-size:24px 24px; transform:translate(-50%, -50%);}
.dataA .content .detail ul {margin-top:20px;}
.dataA .content .detail li {position:relative; padding-left:8px; box-sizing:border-box;}
.dataA .content .detail li:before {content:''; position:absolute; top:12px; left:0; width:4px; height:4px; border-radius:50%; background:#000;}
.dataA .content .detail li + li {margin-top:8px;}
.dataA .content .total {display:flex; gap:12px; margin-top:12px;}
.dataA .content .total > div {display:flex; align-items:center; justify-content:space-between; width:100%; padding:12px 20px; box-sizing:border-box; border-radius:4px; background:#fff; box-shadow:0 0 10px 0 rgba(0, 0, 0, 0.07);}

.nearby-list {}
.nearby-list li {padding-bottom:12px;}
.nearby-list li + li {padding-top:20px; border-top:1px solid #E4E8F0;}
.nearby-tit {display:flex; align-items:center; gap:8px;}
.nearby-tit > span:nth-of-type(1) {color:#000; font-size:var(--fs-16); font-weight:500; line-height:150%;}
.nearby-tit > span:nth-of-type(2) {display:flex; align-items:center; justify-content:center; gap:10px; height:20px; padding:0 6px; border:1px solid #E4E8F0; border-radius:4px; background:#FFF;}
.nearby-tit p {margin-top:4px; color:#505861; font-family:Pretendard; font-size:var(--fs-14); font-weight:400; line-height:150%;}

.static-summary-wrap {display:flex; align-items:stretch; gap:24px; margin-top:40px;}
.static-summary {display:flex; flex:1; flex-direction:column; width:100%;}
.static-summary__head {position:relative; width:100%; padding:0 0 20px 14px; box-sizing:border-box; border-bottom:1px solid #EA0A2A;}
.static-summary__head::before {content:""; position:absolute; top:0; left:0; display:block; width:6px; height:6px; border-radius:50%; background:#EA0A2A;}
.static-summary__head h5 {color:#000; font-size:var(--fs-24); font-weight:700; line-height:150%;}
.static-summary__body {flex:1; margin-top:16px; padding:32px; box-sizing:border-box; border-radius:8px; background:#F8F8FC;}
.static-summary__list li {display:flex; flex-direction:column; gap:9px; padding:12px 0; border-bottom:1px solid #E4E8F0;}
.static-summary__list li:last-child {border-bottom:none;}
.static-summary__label {position:relative; display:block; color:#505861; font-family:Pretendard; font-size:var(--fs-14); font-weight:400; line-height:150%;}
.static-summary__label[data-q] {padding-left:calc(var(--q-width) + 4px);}
.static-summary__label[data-q]::before {content:attr(data-q); position:absolute; top:0; left:0; display:flex; align-items:center; min-width:28px; height:20px; padding:0 6px; box-sizing:border-box; border:1px solid #E4E8F0; border-radius:4px; background:#FFF; font-size:var(--fs-12); line-height:1;}
.static-summary__value {display:block; color:#000; font-family:Pretendard; font-size:var(--fs-16); font-weight:500; line-height:150%;}

.static-summary__label[data-q^="Q1"],
.static-summary__label[data-q^="Q2"],
.static-summary__label[data-q^="Q3"],
.static-summary__label[data-q^="Q4"],
.static-summary__label[data-q^="Q5"],
.static-summary__label[data-q^="Q6"],
.static-summary__label[data-q^="Q7"],
.static-summary__label[data-q^="Q8"],
.static-summary__label[data-q^="Q9"] {--q-width:30px;}

.static-summary__label[data-q^="Q10"],
.static-summary__label[data-q^="Q11"],
.static-summary__label[data-q^="Q12"],
.static-summary__label[data-q^="Q13"],
.static-summary__label[data-q^="Q14"],
.static-summary__label[data-q^="Q15"],
.static-summary__label[data-q^="Q16"],
.static-summary__label[data-q^="Q17"],
.static-summary__label[data-q^="Q18"],
.static-summary__label[data-q^="Q19"] {--q-width:36px;}

a.sendBtn {display:flex; align-items:center; justify-content:center; gap:4px; width:240px; height:52px; margin:40px auto 0; padding:0 16px 0 24px; border-radius:12px; background:#000; color:#FFF; font-size:1.8rem; font-weight:500; line-height:1;}

.chartA__tooltipDim {display:none;}
@media screen and (hover:hover) and (pointer:fine) {
  .chartA__tooltipWrap:hover .chartA__tooltip {opacity:1; visibility:visible;}
}



@media screen and (max-width:1024px) {
  html,
  body {overflow-x:hidden;}

  html,
  body,
  form,
  #container {width:100%; max-width:none;}

  #container {padding:40px 20px;}
  #container > section > h4 {font-size:var(--fs-38);}

	
  .chartA__tooltip {position:fixed; top:50%; left:50%; bottom:auto; z-index:999; width:calc(100vw - 40px); max-width:360px; max-height:80vh; min-width:0; padding:20px 16px; box-sizing:border-box; transform:translate(-50%, -50%); overflow-y:auto; opacity:0; visibility:hidden;}
  .chartA__tooltip.is-open {opacity:1; visibility:visible;}
}

@media screen and (max-width:768px) {
  #container {padding:20px;}
  #container > section:first-child .accordion-header {margin-top:20px;}

  .accordion-header {padding:14px 16px; font-size:var(--fs-24);}
  .accordion-body {padding:40px 20px;}

  .chartA {flex-direction:column; gap:40px;}
  .chartA__panel--left,
  .chartA__panel--right {flex:auto;}
  .chartA__panel--right {max-width:none;}

  .chartA__head {margin-bottom:24px;}
  .chartA__title {font-size:var(--fs-24);}
  .chartA__big {font-size:var(--fs-48);}

  .chartA__radarWrap {--radar-label-gap:0;}
  .chartA__labelTitle {margin:0 0 8px; font-size:var(--fs-16);}
  .chartA__scoreRow {gap:8px;}
  .chartA__score {font-size:var(--fs-22);}
  .chartA__badge {height:28px; padding:0 8px; font-size:var(--fs-14);}
  .chartA__desc {margin-top:40px; font-size:var(--fs-15);}

  .chartA__barWrap {height:400px; --bar-chart-padding-right:300;}
  .chartA__barGuideLine {left:24px; right:108px;}
  .chartA__barGuideLabel {right:30px; min-width:120px; height:40px; padding:0 10px; font-size:var(--fs-20);}
  .chartA__barCompare {min-width:180px; height:40px; padding:0 12px; border-radius:5px; font-size:var(--fs-18);}
  .chartA__barCompare::before {left:auto; right:100%; border-top:8px solid transparent; border-right:12px solid #ff1840; border-bottom:8px solid transparent; border-left:0;}

  .chartA__tooltip {min-width:200px; padding:10px 12px; font-size:var(--fs-12);}
  .chartA__info {width:20px; height:20px; font-size:var(--fs-12);}

  .dataA .lv {font-size:var(--fs-24);}
  .dataA .content p {font-size:var(--fs-16);}
  .dataA .content h6 {font-size:var(--fs-18);}
  .dataA .content h6 br {display:none;}
  .dataA .content .detail {flex-direction:column;}
  .dataA .content .detail > div + div {position:relative;}
  .dataA .content .detail > div + div:before {top:auto; bottom:97.5%; transform:rotate(90deg) translate(-50%, 0);}

  .static-summary-wrap {flex-direction:column; gap:20px; margin-top:24px;}
  .static-summary__head {padding:0 0 16px 14px;}
  .static-summary__head h5 {font-size:var(--fs-24);}
  .static-summary__body {padding:20px 14px;}
  .static-summary__list li {padding:10px 0;}
  .static-summary__label[data-q]::before {min-width:24px; font-size:var(--fs-13);}
  .static-summary__value {font-size:var(--fs-14);}
}

@media screen and (max-width:425px) {
  br.mo {display:block;}
  #container > section > h4 {font-size:var(--fs-32);}
  .accordion-body {padding:40px 20px 20px;}

  .chartA__head {margin-bottom:12px;}
  .chartA__title {font-size:var(--fs-14);}
  .chartA__big {font-size:var(--fs-24);}

  .chartA__radarWrap {height:220px; --radar-padding-x:80; --radar-padding-y:50;}
  .chartA__score {font-size:var(--fs-20);}
  .chartA__badge {height:20px; padding:0 12px; font-size:var(--fs-12);}
  .chartA__info {width:14px; height:14px; font-size:var(--fs-08);}

  .chartA__barWrap {height:240px; --bar-chart-padding-right:100;}
  .chartA__barGuideLine {left:40px; right:120px;}
  .chartA__barGuideLabel {right:6px; min-width:70px; height:20px; padding:0 6px; font-size:var(--fs-12);}
  .chartA__barCompare {min-width:95px; height:20px; padding:0 6px; border-radius:4px; font-size:var(--fs-12);}
  .chartA__barCompare::before {left:-5px; right:auto; border-top:4px solid transparent; border-right:5px solid #ff1840; border-bottom:4px solid transparent; border-left:0;}

  .dataA .lv {font-size:var(--fs-20);}
  .dataA .content p {font-size:var(--fs-14);}
  .dataA .content h6 {font-size:var(--fs-16);}
  .dataA .content .total > div {flex-direction:column; align-items:flex-start;}
}

@media screen and (max-width:375px) {
  #container > section > h4 {font-size:var(--fs-24);}

  .accordion-header {font-size:var(--fs-20);}

  .chartA {gap:20px;}

  .chartA__radarWrap {height:100px; margin:20px 0; --radar-padding-x:20; --radar-padding-y:0;}
  .chartA__desc {margin-top:60px;}

  .dataA .content p {font-size:var(--fs-11);}
  .dataA .content h6 {font-size:var(--fs-14);}
}

@media screen and (max-width:325px) {
/*  .chartA__radarWrap {height:200px; margin:20px 0; --radar-padding-x:10; --radar-padding-y:0;}*/
}

body.tooltip-open {overflow:hidden;}

.chartA__tooltipModal {display:none;}

@media screen and (max-width:1024px) {
  body::before {content:''; position:fixed; top:0; left:0; z-index:9998; width:100%; height:100%; background:rgba(0, 0, 0, 0.70); opacity:0; visibility:hidden; transition:opacity .2s ease, visibility .2s ease; pointer-events:none;}
  body.tooltip-open::before {opacity:1; visibility:visible; pointer-events:auto;}

  .chartA__tooltipModal {position:fixed; top:50%; left:50%; z-index:9999; display:block; width:calc(100% - 40px); max-width:360px; max-height:80vh; opacity:0; visibility:hidden; transform:translate(-50%, -50%); transition:opacity .2s ease, visibility .2s ease; pointer-events:none;}
  .chartA__tooltipModal.is-open {opacity:1; visibility:visible; pointer-events:auto;}

  .chartA__tooltipModal-inner {position:relative; max-height:80vh; padding:20px; box-sizing:border-box; border-radius:12px; background:#fff; overflow-y:auto;}
  .chartA__tooltipModal-close {display:flex; align-items:center; justify-content:center; width:32px; height:32px; margin-left:auto; margin-bottom:12px; padding:0; border:none; background:transparent; color:#000; font-size:0; cursor:pointer; position:absolute; top:10px; right:20px;}
  .chartA__tooltipModal-close::before {content:'✕'; display:block; color:#000; font-size:var(--fs-18); line-height:1;}

  .chartA__tooltipModal-content .chartA__tooltip {position:static; width:auto; min-width:0; max-width:none; max-height:none; padding:0; border-radius:0; background:transparent; opacity:1; visibility:visible; transform:none; transition:none;}
  .chartA__tooltipModal-content .chartA__tooltip::after {display:none;}

  .chartA__tooltipModal-content .chartA__tooltip h5 {color:#000; font-size:var(--fs-18); font-weight:700;}
  .chartA__tooltipModal-content .chartA__tooltip h6 {margin:12px 0 8px; color:#000; font-size:var(--fs-14); font-weight:700;}
  .chartA__tooltipModal-content .chartA__tooltip p {color:#000; font-size:var(--fs-13); font-weight:300; line-height:1.5;}
}


/* ===== responsive ===== */
@media screen and (max-width:1024px) {
    html, body {overflow-x:hidden;}
    html, body, form, #container {width:100%; max-width:none;}
    #container {padding:40px 20px; max-width:none;}

    .accordion-body {padding:40px 20px;}

    .chartA {gap:40px;}
    .chartA__radarWrap {padding-top:0;}
    .chartA__panel--right {max-width:none;}

    .dataA .content .detail,
    .dataA .content .total {flex-direction:column;}

    .chartA__desc {font-size:1.8rem;}

    .dataA .content h6 br {display:none;}
}

/* ===== 아코디언 헤더 배지 ===== */
.accordion-header-badge {display:inline-flex; align-items:center; gap:8px; position:relative; height:36px; margin-left:12px; padding:10px 12px; box-sizing:border-box; border:1px solid #EA0A2A; border-radius:6px; color:var(--black, #000); font-family:Pretendard; font-size:16px; font-style:normal; font-weight:500; line-height:150%;}

.accordion-header-badge .chartA__tooltipWrap {display:inline-flex; align-items:center; position:relative;}

.accordion-header-badge .chartA__info {display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; border-radius:50%; font-size:1.1rem; line-height:1; cursor:pointer; flex-shrink:0;}

#badge_total {color:var(--primary, #EA0A2A); font-family:Pretendard; font-size:18px; font-style:normal; font-weight:700; line-height:150%;}

/* ===== 마케팅 성숙도 ===== */
.maturity {margin-bottom:32px;}

.maturity__top {display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:20px; flex-wrap:wrap;}

.maturity__head {display:flex; align-items:center; gap:12px;}

.maturity__label {color:var(--black, #000); font-family:Pretendard; font-size:20px; font-style:normal; font-weight:700; line-height:100%;}

.maturity__lv {display:flex; justify-content:center; align-items:center; gap:8px; height:36px; padding:10px 12px; box-sizing:border-box; border:1px solid #FFA3B0; border-radius:8px; color:var(--primary, #EA0A2A); font-family:Pretendard; font-size:18px; font-style:normal; font-weight:700; line-height:150%;}

.maturity__lv strong {margin-left:4px; font-weight:700;}

.maturity__desc {display:flex; align-items:center; gap:6px; color:#505861; font-size:var(--fs-13); font-weight:400; line-height:1.4;}

.maturity__desc::before {content:'ⓘ'; flex-shrink:0; color:#505861; font-size:var(--fs-13);}

.maturity__body {padding:20px; box-sizing:border-box; border-radius:4px; background:#FFF; box-shadow:0 0 10px 0 rgba(0, 0, 0, 0.07);}

.maturity__body .total {display:flex; gap:12px; margin-top:32px;}

.maturity__body .total > div {display:flex; justify-content:space-between; align-items:center; flex:1 0 0; padding:12px 20px; border-radius:4px; background:var(--bg10, #F8F8FC);}

.maturity__body .total > div p {color:var(--gray60, #505861); font-family:Pretendard; font-size:14px; font-style:normal; font-weight:400; line-height:170%;}

.maturity__body .total > div span {color:var(--black, #000); font-family:Pretendard; font-size:20px; font-style:normal; font-weight:700; line-height:170%;}

.maturity__body .bot {background:#f8f8fc; padding:20px; box-sizing:border-box; margin-top:12px;}

.maturity__body .bot ul {display:flex; flex-direction:column; align-items:flex-start; gap:4px; align-self:stretch;}

.maturity__body .bot ul li {position:relative; padding-left:10px; box-sizing:border-box; color:var(--black, #000); font-family:Pretendard; font-size:14px; font-style:normal; font-weight:400; line-height:170%;}

.maturity__body .bot ul li::before {content:''; display:block; position:absolute; top:10px; left:0; width:4px; height:4px; border-radius:50%; background:#8691A0;}

.maturity__edge {position:absolute; top:0; color:var(--gray50, #8691A0); font-family:Pretendard; font-size:12px; font-style:normal; font-weight:400; line-height:170%;}

.maturity__edge--min {left:0;}

.maturity__edge--max {right:0;}

/* ===== 가로 바 그래프 공통 UI ===== */
.barUI__wrap {position:relative; padding-top:18px; padding-bottom:36px;}

.barUI__chartBox {position:relative; height:32px; margin-top:8px; overflow:visible;}

.barUI__chartBox canvas {display:block; width:100% !important; height:32px !important;}

.barUI__guide {position:absolute; top:0; z-index:2; width:1px; height:32px; pointer-events:none;}

.barUI__guideLine {position:absolute; top:0; bottom:0; left:0; border-left:1px dashed #D7DCE5;}

.barUI__guideLabel {position:absolute; top:100%; left:50%; display:inline-flex; justify-content:center; align-items:center; min-width:auto; height:20px; padding:0 6px; margin-top:4px; white-space:nowrap; transform:translateX(-50%); border-radius:4px; border:1px solid #C2C9D6; background:#FFF; color:#505861; font-family:Pretendard; font-size:12px; font-style:normal; font-weight:500; line-height:100%;}

.barUI__compare {position:absolute; top:100%; left:50%; display:inline-flex; justify-content:center; align-items:center; gap:4px; min-width:auto; height:20px; padding:0 6px; margin-top:4px; white-space:nowrap; transform:translateX(-50%); border-radius:4px; border:1px solid #EA0A2A; background:#FFF; font-family:Pretendard; font-size:12px; font-style:normal; font-weight:500; line-height:100%;}

.barUI__compare .label {color:#505861;}

.barUI__compare .text {font-weight:700;}

.barUI__compare.is-up .text {color:#EA0A2A;}

.barUI__compare.is-down .text {color:#2B6EF2;}

.barUI__compare.is-same .text {color:#8A94A6;}

/* ===== 마케팅 성숙도 barUI 연결 ===== */
.maturity__barWrap {position:relative;}

.maturity__chartBox {position:relative;}

.maturity__guide {position:absolute;}

.maturity__guideLine {position:absolute;}

.maturity__guideLabel {position:absolute;}

.maturity__compare {position:absolute; z-index:2;}

.maturity__compare .label {color:#505861;}

.maturity__compare .text {font-weight:700;}

.maturity__compare.is-up .text {color:#EA0A2A;}

.maturity__compare.is-down .text {color:#2B6EF2;}

.maturity__compare.is-same .text {color:#8A94A6;}

/* ===== chartH ===== */
.chartH__info {display:flex; align-items:center; gap:10px; margin-bottom:16px;}

.chartH__score {font-size:var(--fs-32); font-weight:800; line-height:1; color:#000;}

.chartH__badge {display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:20px; padding:0 12px; box-sizing:border-box; border:1px solid #D6DBE5; border-radius:4px; background:#fff; font-size:var(--fs-12); font-weight:700; line-height:1;}

.chartH__badge.is-strong {color:#ff2846;}

.chartH__badge.is-normal {color:#5f6876;}

.chartH__badge.is-weak {color:#0a1bea; white-space:pre;}

.chartH__edge {position:absolute; top:0; color:#888e99; font-size:var(--fs-10); font-weight:500; line-height:1;}

.chartH__edge--min {left:0;}

.chartH__edge--max {right:0;}

.chartH__desc {color:#8f98a8; font-size:var(--fs-13); line-height:1.6;}

.chartH__desc1 {color:var(--black, #000); font-family:Pretendard; font-size:18px; font-style:normal; font-weight:700; line-height:170%; margin-top:30px;}

.chartH__desc2 {color:var(--black, #000); font-family:Pretendard; font-size:14px; font-style:normal; font-weight:400; line-height:170%;}

.chartH__desc__hr {margin:6px auto; border:none; background:#C2C9D6; height:1px;}

/* ===== 계수 분석 ===== */
.chartDual {display:flex; align-items:stretch; gap:40px;}

.chartDual__item {flex:1; box-sizing:border-box; background:#fff; padding:20px 24px; border-radius:8px; box-shadow:0 0 10px 0 rgba(0, 0, 0, 0.07);}

.chartDual__item .chartA__title {color:var(--gray60, #505861); font-family:Pretendard; font-size:16px; font-style:normal; font-weight:400; line-height:150%;}

.chartDual__item .chartA__barWrap {box-sizing:border-box; padding:0 55px;}

.chartDual__item .chartA__desc1 {text-align:left; color:var(--black, #000); font-family:Pretendard; font-size:18px; font-style:normal; font-weight:700; line-height:170%; margin-top:30px;}

.chartDual__item .chartA__desc2 {text-align:left; color:var(--black, #000); font-family:Pretendard; font-size:14px; font-style:normal; font-weight:400; line-height:170%; margin-top:0;}

.chartDual__item .chartA__desc3 {text-align:left; display:flex; padding:12px; justify-content:center; align-items:center; gap:10px; align-self:stretch; background:var(--bg10, #F8F8FC); color:var(--gray60, #505861); font-family:Pretendard; font-size:13px; font-style:normal; font-weight:400; line-height:150%; box-sizing:border-box; margin-top:6px;}

.chartDual__item .chartA__desc__hr {margin:6px auto; border:none; background:#C2C9D6; height:1px;}

/* ===== static-summary ===== */
.accordion-body .static-summary {width:100%;}

.accordion-body .static-summary__body {margin-top:0; padding:0; background:transparent; border-radius:0;}

/* ===== detail title ===== */
.dataA .content .detail > div > p {display:inline-flex; justify-content:center; align-items:center; gap:10px; padding:4px 12px; box-sizing:border-box; border-radius:999px; background:#000; color:var(--white, #FFF); font-family:Pretendard; font-size:14px; font-style:normal; font-weight:600; line-height:170%;}

/* ===== responsive 768 ===== */
@media screen and (max-width:768px) {
    .maturity {margin-bottom:24px;}

    .maturity__top {gap:10px; margin-bottom:16px;}

    .maturity__head {width:100%; justify-content:space-between;}

    .maturity__lv {height:44px; padding:0 16px; font-size:var(--fs-18);}

    .maturity__desc {font-size:var(--fs-12); align-items:flex-start;}

    .maturity__desc::before {font-size:var(--fs-12);}

    .maturity__body .total {flex-direction:column;}

    .barUI__wrap {padding-top:16px; padding-bottom:32px;}

    .barUI__chartBox {height:32px;}

    .barUI__chartBox canvas {height:32px !important;}

    .barUI__guide {height:32px;}

    .barUI__guideLine {height:60px;}

    .barUI__guideLabel {min-width:auto; height:20px; padding:0 6px; margin-top:32px; font-size:var(--fs-10); line-height:100%;}

    .barUI__compare {min-width:auto; height:20px; padding:0 6px; margin-top:4px; font-size:var(--fs-10); line-height:100%;}

    .chartH__score {font-size:var(--fs-24);}

    .chartDual {flex-direction:column; gap:32px;}

    .chartDual__item .chartA__barWrap {padding:0;}

    .chartDual__item .chartA__desc br {display:none;}
}

/* ===== responsive 425 ===== */
@media screen and (max-width:425px) {
    .maturity__top {flex-direction:column; align-items:flex-start;}

    .maturity__lv {height:40px; padding:0 14px; font-size:var(--fs-16);}

    .maturity__desc {font-size:var(--fs-11);}

    .maturity__edge {font-size:0.9rem;}

    .barUI__guideLabel {min-width:auto; padding:0 4px;}

    .barUI__compare {min-width:auto; padding:0 4px;}

    .chartH__edge {font-size:0.9rem;}

    .accordion-header-badge {height:24px; padding:0 8px; font-size:var(--fs-12);}
}



/*데이터 값에 다른 라벨과 텍스트 컬러 변경*/
.chartA.is-over .chartA__barCompare {background:#EA0A2A;}
.chartA.is-over .chartA__barCompare::before {border-right-color:#EA0A2A;}

.chartA.is-under .chartA__barCompare {background:#2B6EF2;}
.chartA.is-under .chartA__barCompare::before {border-right-color:#2B6EF2;}

.chartA.is-over .chartA__big {background:linear-gradient(180deg, #EA0A2A 0%, #840618 100%); background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent;}

.chartA.is-under .chartA__big {background:linear-gradient(180deg, #2B6EF2 0%, #1A3FA8 100%); background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent;}

.factorChart.is-over .chartA__barCompare { background:#EA0A2A; }
.factorChart.is-over .chartA__barCompare::before { border-right-color:#EA0A2A; }

.factorChart.is-under .chartA__barCompare { background:#2B6EF2; }
.factorChart.is-under .chartA__barCompare::before { border-right-color:#2B6EF2; }

.factorChart.is-over .chartA__big { background:linear-gradient(180deg, #EA0A2A 0%, #840618 100%); background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent; }

.factorChart.is-under .chartA__big { background:linear-gradient(180deg, #2B6EF2 0%, #1A3FA8 100%); background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent; }



/* br */
br.m_show{display:none;}
@media screen and (max-width:768px) {

br.m_show{display:block;}
br.pc_show{display:none;}
}







/* ===== floating aside ===== */
	.floating-aside {position:fixed; right:38px; bottom:30px; z-index:900; display:flex; flex-direction:column; align-items:center; gap:12px;}

	.floating-btn {display:flex; align-items:center; justify-content:center; width:58px; height:58px; padding:0; border:0; border-radius:50%; cursor:pointer;}

	.floating-btn--kakao {background:#000;}
	.floating-btn--top {background:#fff; box-shadow:0 0 10px 0 rgba(0,0,0,0.08);}
	.floating-btn--svy{position:relative;}
	.floating-btn--svy:before{content:''; position:absolute; bottom:calc(100% + 4px); left:50%; width:84px; height:52px; background:url(/home/skin/gaga_basic_skin/img/clu.svg) center center / cover no-repeat; display:block; transform:translateX(-50%) translateY(0); animation:floatUpDown 1.5s ease-in-out infinite;}
	
	@keyframes floatUpDown{

0%{transform:translateX(-50%) translateY(0);}
50%{transform:translateX(-50%) translateY(-5px);}
100%{transform:translateX(-50%) translateY(0);}

}

	/* ===== 카카오 팝업 dim ===== */
	.kakao-modal-dim {display:none; position:fixed; top:0; left:0; z-index:9000; width:100%; height:100%; background:rgba(0,0,0,0.5);}
	.kakao-modal-dim.is-open {display:block;}

	/* ===== 카카오 레이어 팝업 ===== */
	.kakao-modal {display:none; position:fixed; top:50%; left:50%; z-index:9001; width:calc(100% - 40px); max-width:680px; box-sizing:border-box; border-radius:20px; background:#fff; transform:translate(-50%, -50%);}
	.kakao-modal.is-open {display:block;}

	.kakao-modal__inner {padding:32px; box-sizing:border-box;}
	.kakao-modal__head {display:flex; align-items:center; justify-content:space-between; margin-bottom:20px;}

	.kakao-modal__title {color:#000; font-family:Pretendard; font-size:20px; font-style:normal; font-weight:700; line-height:170%;}

	.kakao-modal__close {display:flex; align-items:center; justify-content:center; width:24px; height:24px; padding:0; border:0; background:transparent; color:#000; cursor:pointer;}

	.kakao-modal__body {margin-bottom:20px;}

	.kakao-modal__label {display:block; margin-bottom:13px; color:#333; font-family:Pretendard; font-size:16px; font-style:normal; font-weight:400; line-height:100%;}

	.kakao-modal__input {display:flex; justify-content:flex-start; align-items:flex-start; width:100%; height:47px; padding:10px 10px 10px 14px; gap:10px; align-self:stretch; border:2px solid #E0E0E0; border-radius:10px; box-sizing:border-box; text-align:left;}

	.kakao-modal__input::placeholder {color:#8691A0; text-align:left; font-family:Pretendard; font-size:16px; font-style:normal; font-weight:400; line-height:100%;}

	.kakao-modal__input:focus {outline:none;}

	.kakao-modal__foot {text-align:center;}

	.kakao-modal__submit {display:flex; justify-content:center; align-items:center; width:100%; height:60px; margin:0 auto; padding:18px 20px; gap:8px; align-self:stretch; border:0; border-radius:12px; box-sizing:border-box; background:var(--black, #000); color:var(--white, #FFF); text-align:center; font-family:Pretendard; font-size:18px; font-style:normal; font-weight:700; line-height:100%;}

		@media screen and (max-width:768px) {
			.floating-aside {right:24px; bottom:20px;}
			.floating-btn {width:58px; height:58px;}
			.kakao-modal__inner {padding:32px;}
			.kakao-modal__title {font-size:20px;}
		}