/* 증상별 안내(2026-11-13). 색은 안내 쪽과 같은 파랑·회색·흰색, 아픈 자리만 붉은색. 강조는 움직임으로: 첫 화면 아픈 자리 맥박, 제목 줄 올라옴, 증상 문장 순환, 힘이 흘러가는 선. */
.sx{--ink:#12202b;--ink2:#3d4852;--mute:#66717c;--soft:#f3f5f8;--blue:#2456d6;--red:#e5484d;color:var(--ink);font-family:"Pretendard",sans-serif;word-break:keep-all;overflow-wrap:anywhere;background:#fff}
.sx *{box-sizing:border-box}
.sx-wrap{max-width:1120px;margin:0 auto;padding:0 28px}
.sx-narrow{max-width:800px}
.sx h2{margin:0 0 28px;font-size:38px;line-height:1.3;font-weight:800;letter-spacing:-.015em}
.sx a:focus-visible,.sx summary:focus-visible{outline:3px solid #2864d7;outline-offset:3px}
.sx-sec{padding:104px 0}
.sx-soft{background:var(--soft)}
.sx-note{margin:22px 0 0;font-size:15px;line-height:1.7;color:var(--mute)}
.sx-note a{color:var(--blue);text-decoration:underline}

/* 첫 화면 */
.sx-hero{padding:150px 0 72px}
.sx-hero-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:56px;align-items:center}
.sx-crumb{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px;font-size:14px;color:var(--mute)}
.sx-crumb a{color:var(--mute)}
.sx-live{display:inline-flex;align-items:center;gap:8px;margin:0 0 20px;padding:7px 14px 7px 12px;border-radius:999px;background:#eef1f5;color:var(--ink2);font-size:14px;font-weight:600;line-height:1.4}
.sx-live::before{content:"";width:8px;height:8px;border-radius:50%;background:#9aa6b1;flex:none}
.sx-live.is-on{background:#e8eefc;color:#1b3f9e}
.sx-live.is-on::before{background:var(--blue);animation:sx-dot 1.6s ease-out infinite}
@keyframes sx-dot{0%{box-shadow:0 0 0 0 rgba(36,86,214,.5)}100%{box-shadow:0 0 0 9px rgba(36,86,214,0)}}
.sx-h1{margin:0 0 34px;font-size:56px;line-height:1.22;font-weight:800;letter-spacing:-.02em}
.sx-line{display:block;opacity:0;transform:translateY(22px);animation:sx-up .7s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:calc(.12s + var(--i)*.16s)}
@keyframes sx-up{to{opacity:1;transform:none}}
.sx-cta{display:flex;flex-wrap:wrap;gap:10px}
.sx-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:58px;padding:0 26px;border-radius:16px;background:#eef1f5;color:var(--ink);font-size:17px;font-weight:700;line-height:1.2;transition:filter .15s}
.sx-btn:hover{filter:brightness(.96)}
.sx-btn-main{background:var(--blue);color:#fff;font-size:18px}
.sx-btn-main i{font-size:15px;animation:sx-nudge 1.8s ease-in-out infinite}
@keyframes sx-nudge{0%,60%,100%{transform:translateX(0)}30%{transform:translateX(6px)}}
.sx-hero-photo{position:relative;border-radius:28px;overflow:hidden;background:#e9edf2;aspect-ratio:3/2}
.sx-hero-photo img{display:block;width:100%;height:100%;object-fit:cover;animation:sx-zoom 1.4s cubic-bezier(.2,.7,.2,1) both}
@keyframes sx-zoom{from{transform:scale(1.06);opacity:.4}to{transform:none;opacity:1}}
.sx-spot{position:absolute;width:0;height:0}
.sx-spot b,.sx-spot i{position:absolute;left:0;top:0;border-radius:50%;transform:translate(-50%,-50%)}
.sx-spot b{width:16px;height:16px;background:var(--red);box-shadow:0 0 0 4px rgba(255,255,255,.85)}
.sx-spot i{width:26px;height:26px;border:2px solid var(--red);animation:sx-pulse 2.2s ease-out infinite;animation-delay:1s;opacity:0}
.sx-spot i+i{animation-delay:2.1s}
@keyframes sx-pulse{0%{transform:translate(-50%,-50%) scale(.6);opacity:.95}100%{transform:translate(-50%,-50%) scale(3.4);opacity:0}}

/* 화면에 들어올 때 */
[data-sx-in] h2,[data-sx-in] .sx-case-list,[data-sx-in] .sx-why-text p,[data-sx-in] .sx-check-grid figure,[data-sx-in] .sx-care-grid a,[data-sx-in] .sx-chips li,[data-sx-in] details,[data-sx-in] .sx-tile,[data-sx-in] .sx-end-cta{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
[data-sx-in].is-in h2,[data-sx-in].is-in .sx-case-list,[data-sx-in].is-in .sx-why-text p,[data-sx-in].is-in .sx-check-grid figure,[data-sx-in].is-in .sx-care-grid a,[data-sx-in].is-in .sx-chips li,[data-sx-in].is-in details,[data-sx-in].is-in .sx-tile,[data-sx-in].is-in .sx-end-cta{opacity:1;transform:none}
[data-sx-in].is-in :is(.sx-why-text p,.sx-check-grid figure,.sx-care-grid a,.sx-tile):nth-child(2){transition-delay:.12s}
[data-sx-in].is-in :is(.sx-why-text p,.sx-check-grid figure,.sx-care-grid a,.sx-tile):nth-child(3){transition-delay:.24s}
[data-sx-in].is-in :is(.sx-why-text p,.sx-tile):nth-child(4){transition-delay:.36s}
[data-sx-in].is-in .sx-tile:nth-child(n+5){transition-delay:.44s}

/* 이럴 때 아프세요 — 한 줄씩 차례로 짙어진다 */
.sx-case-list{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.sx-case-list li{font-size:34px;line-height:1.4;font-weight:800;letter-spacing:-.015em;color:#c3cad2;transition:color .5s ease}
.sx-case-list li span{display:inline;background:linear-gradient(transparent 62%,rgba(229,72,77,.22) 62%) no-repeat 0 0/0 100%;transition:background-size .7s cubic-bezier(.2,.7,.2,1)}
.sx-case-list li.is-now{color:var(--ink)}
.sx-case-list li.is-now span{background-size:100% 100%}

/* 아픈 곳이 원인이 아닐 수 있다 — 몸 그림 */
.sx-why-in{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:56px;align-items:center}
.sx-why-text p{margin:0 0 14px;font-size:20px;line-height:1.7;color:var(--ink2)}
.sx-why-fig{margin:0;padding:36px 28px 28px;border-radius:28px;background:#fff;text-align:center}
.sx-why-fig figcaption{margin-top:18px;font-size:18px;line-height:1.5;font-weight:600}
.sx-why-fig figcaption small{display:block;margin-top:8px;font-size:13.5px;font-weight:400;color:var(--mute)}
.sx-red{color:var(--red)}
.sx-fig{display:block;width:100%;max-width:330px;margin:0 auto;overflow:hidden}
.sx-fig-level path{stroke:#7b8794;stroke-width:4;stroke-dasharray:12 14;fill:none}
.sx-fig-tilt path{stroke:var(--ink);stroke-width:10;stroke-linecap:round;fill:none;transform-box:fill-box;transform-origin:center;transform:rotate(10deg);transition:transform 1.1s cubic-bezier(.3,1.4,.5,1) .3s}
.sx-fig-tilt path+path{transform:rotate(6deg)}
.is-in .sx-fig-tilt path{transform:none}
.sx-fig-flow{fill:none;stroke:var(--red);stroke-width:13;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100}
.is-in .sx-fig-flow{animation:sx-flow 3.2s cubic-bezier(.5,0,.3,1) 1.2s infinite}
@keyframes sx-flow{0%{stroke-dashoffset:100;opacity:1}55%{stroke-dashoffset:0;opacity:1}80%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
.sx-fig-dot{fill:var(--red);stroke:#fff;stroke-width:6}
.sx-fig-ring{fill:none;stroke:var(--red);stroke-width:6;transform-box:fill-box;transform-origin:center;opacity:0}
.sx-fig-pain{opacity:0;transition:opacity .4s ease 1.6s}
.is-in .sx-fig-pain{opacity:1}
.is-in .sx-fig-pain .sx-fig-ring{animation:sx-ring 2.2s ease-out 2s infinite}
.is-in .sx-fig-pain .sx-fig-ring2{animation-delay:3.1s}
@keyframes sx-ring{0%{transform:scale(.5);opacity:.9}100%{transform:scale(2.1);opacity:0}}

/* 지양하는 치료 — 낱말에 줄이 그어지고 대신할 말이 올라온다 */
.sx-avoid-list{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.sx-avoid-list li{padding:32px 28px 30px;border-radius:22px;background:var(--soft)}
.sx-avoid-list s{display:block;margin-bottom:14px;text-decoration:none;font-size:30px;font-weight:800;line-height:1.3;color:#9aa6b1}
.sx-avoid-list s span{position:relative;display:inline-block}
.sx-avoid-list s span::after{content:"";position:absolute;left:-4px;right:-4px;top:52%;height:4px;border-radius:2px;background:var(--red);transform:scaleX(0);transform-origin:left center;transition:transform .7s cubic-bezier(.6,0,.2,1)}
.sx-avoid-list b{display:block;font-size:21px;line-height:1.4;font-weight:800;opacity:0;transform:translateY(12px);transition:opacity .5s ease,transform .5s ease}
.sx-avoid-list p{margin:10px 0 0;font-size:16.5px;line-height:1.7;color:var(--ink2);opacity:0;transition:opacity .5s ease}
.is-in .sx-avoid-list s span::after{transform:scaleX(1)}
.is-in .sx-avoid-list b,.is-in .sx-avoid-list p{opacity:1;transform:none}
.is-in .sx-avoid-list li:nth-child(1) s span::after{transition-delay:.3s}.is-in .sx-avoid-list li:nth-child(1) :is(b,p){transition-delay:.8s}
.is-in .sx-avoid-list li:nth-child(2) s span::after{transition-delay:.9s}.is-in .sx-avoid-list li:nth-child(2) :is(b,p){transition-delay:1.4s}
.is-in .sx-avoid-list li:nth-child(3) s span::after{transition-delay:1.5s}.is-in .sx-avoid-list li:nth-child(3) :is(b,p){transition-delay:2s}

/* 확인 방법 */
.sx-check-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.sx-check-grid figure{margin:0}
.sx-check-grid img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:20px;background:#e9edf2}
.sx-check-grid figcaption{margin-top:16px;font-size:16.5px;line-height:1.65;color:var(--ink2)}
.sx-check-grid figcaption b{display:block;margin-bottom:4px;font-size:20px;color:var(--ink)}

/* 치료 */
.sx-care-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.sx-care-grid a{display:flex;flex-direction:column;padding:30px 28px 26px;border-radius:22px;background:#fff;color:var(--ink)}
.sx-care-grid b{font-size:22px;line-height:1.35;margin-bottom:10px}
.sx-care-grid span{font-size:16.5px;line-height:1.7;color:var(--ink2);flex:1}
.sx-care-grid em{margin-top:18px;font-style:normal;font-size:15px;font-weight:700;color:var(--blue)}
.sx-care-grid a:hover{box-shadow:0 14px 34px rgba(16,32,43,.08)}

/* 질환 */
.sx-chips{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:10px}
.sx-chips li{padding:13px 20px;border-radius:999px;background:var(--soft);font-size:18px;font-weight:600}
[data-sx-in].is-in .sx-chips li:nth-child(n){transition-delay:calc(.05s*var(--n,0))}
.sx-alert{margin-top:40px;padding:26px 28px;border-radius:20px;background:#fff3f2}
.sx-alert h3{margin:0 0 12px;font-size:19px;font-weight:800;color:#b3261e}
.sx-alert ul{margin:0;padding:0 0 0 20px;font-size:16.5px;line-height:1.8;color:#5c1f1a}

/* 질문 */
.sx-faq details{border-radius:16px;background:#fff;margin-bottom:10px}
.sx-sec:not(.sx-soft).sx-faq details{background:var(--soft)}
.sx-faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:66px;padding:16px 24px;font-size:19px;font-weight:700;line-height:1.45;cursor:pointer;list-style:none}
.sx-faq summary::-webkit-details-marker{display:none}
.sx-faq summary::after{content:"";flex:none;width:10px;height:10px;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(45deg) translate(-2px,-2px);transition:transform .2s}
.sx-faq details[open] summary::after{transform:rotate(225deg) translate(-2px,-2px)}
.sx-faq details p{margin:0;padding:0 24px 22px;font-size:17px;line-height:1.8;color:var(--ink2)}

/* 끝 */
.sx-end-in{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:56px;align-items:center}
.sx-hours{margin:0;padding:4px 22px;list-style:none;border-radius:18px;background:var(--soft)}
.sx-soft .sx-hours{background:#fff}
.sx-hours li{display:flex;justify-content:space-between;gap:16px;padding:13px 0;font-size:17px}
.sx-hours li+li{border-top:1px solid #e6eaee}
.sx-hours b{font-weight:700}.sx-hours span{color:var(--ink2)}
.sx-end-cta{display:grid;gap:10px}
.sx-end-cta .sx-btn{width:100%;min-height:62px}
.sx-more{margin-top:88px}
.sx-more h2{font-size:26px;margin-bottom:18px}
.sx-more div{display:flex;flex-wrap:wrap;gap:10px}
.sx-more a{display:inline-flex;align-items:center;min-height:48px;padding:10px 20px;border-radius:999px;background:var(--soft);color:var(--ink);font-size:16.5px;font-weight:600}

/* 모아보기 */
.sx-hub-in{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:48px;align-items:center}
.sx-hub-list{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.sx-hub-list a{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:6px 18px;min-height:66px;padding:14px 22px;border-radius:16px;background:var(--soft);color:var(--ink);transition:background .25s,color .25s,transform .25s}
.sx-hub-list b{font-size:20px;font-weight:800}
.sx-hub-list span{font-size:15.5px;color:var(--mute);transition:color .25s}
.sx-hub-list i{font-size:14px;color:#9aa6b1;transition:color .25s,transform .25s}
.sx-hub-list a.is-on,.sx-hub-list a:hover{background:var(--ink);color:#fff;transform:translateX(6px)}
.sx-hub-list a.is-on span,.sx-hub-list a:hover span{color:#c5ced6}
.sx-hub-list a.is-on i,.sx-hub-list a:hover i{color:#fff;transform:translateX(4px)}
.sx-hub-fig{padding:28px 24px 24px;border-radius:28px;background:#fff;box-shadow:0 20px 60px rgba(16,32,43,.08);text-align:center}
.sx-fig-hub{max-width:300px}
.sx-hot{cursor:pointer}
.sx-hot-hit{fill:transparent}
.sx-hot .sx-fig-dot{fill:#5d6b7a;transition:fill .25s;transform-box:fill-box;transform-origin:center}
.sx-hot .sx-fig-ring{stroke:#5d6b7a;opacity:.45;transition:stroke .25s}
.sx-hot.is-on .sx-fig-dot,.sx-hot:hover .sx-fig-dot{fill:var(--red)}
.sx-hot.is-on .sx-fig-ring,.sx-hot:hover .sx-fig-ring{stroke:var(--red);animation:sx-ring 1.4s ease-out infinite}
.sx-hub-tip{margin:14px 0 0;font-size:18px;font-weight:700;min-height:27px}
.sx-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.sx-tile{display:block;border-radius:20px;overflow:hidden;background:#fff;color:var(--ink);padding-bottom:20px}
.sx-tile img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.sx-tile:hover img{transform:scale(1.05)}
.sx-tile b{display:block;margin:16px 20px 4px;font-size:19px;font-weight:800}
.sx-tile span{display:block;margin:0 20px;font-size:15px;line-height:1.5;color:var(--mute)}

@media(max-width:900px){
  .sx-wrap{padding:0 20px}
  .sx h2{font-size:27px;margin-bottom:20px}
  .sx-sec{padding:64px 0}
  .sx-hero{padding:112px 0 48px}
  .sx-hero-in{grid-template-columns:1fr;gap:26px}
  .sx-hero-photo{order:-1;border-radius:22px}
  .sx-crumb{display:none}
  .sx-h1{font-size:36px;margin-bottom:24px}
  .sx-cta{display:grid;grid-template-columns:1fr}
  .sx-btn{min-height:56px}
  .sx-case-list li{font-size:23px}
  .sx-why-in,.sx-end-in{grid-template-columns:1fr;gap:30px}
  .sx-why-text p{font-size:17px}
  .sx-why-fig{padding:28px 18px 22px;border-radius:22px}
  .sx-fig{max-width:250px}
  .sx-why-fig figcaption{font-size:16.5px}
  .sx-avoid-list{grid-template-columns:1fr;gap:10px}
  .sx-avoid-list li{padding:24px 22px}
  .sx-avoid-list s{font-size:25px;margin-bottom:10px}
  .sx-avoid-list b{font-size:19px}
  .sx-check-grid{grid-template-columns:1fr;gap:26px}
  .sx-check-grid img{aspect-ratio:16/10}
  .sx-check-grid figcaption b{font-size:18px}
  .sx-care-grid{grid-template-columns:1fr;gap:10px}
  .sx-care-grid a{padding:24px 22px 22px}
  .sx-care-grid b{font-size:20px}
  .sx-chips li{font-size:16px;padding:11px 16px}
  .sx-alert{padding:22px 20px}
  .sx-faq summary{font-size:17px;padding:14px 18px;min-height:60px}
  .sx-faq details p{padding:0 18px 18px;font-size:16px}
  .sx-more{margin-top:56px}.sx-more h2{font-size:22px}
  .sx-hub-in{grid-template-columns:1fr;gap:26px}
  .sx-hub-fig{order:-1;padding:22px 16px 18px;border-radius:22px}
  .sx-fig-hub{max-width:220px}
  .sx-hub-list a{grid-template-columns:1fr auto;padding:13px 18px}
  .sx-hub-list span{grid-column:1;grid-row:2;font-size:14.5px}
  .sx-hub-list i{grid-row:1/3}
  .sx-hub-list b{font-size:18px}
  .sx-tiles{grid-template-columns:1fr 1fr;gap:10px}
  .sx-tile b{margin:12px 14px 3px;font-size:16.5px}.sx-tile span{margin:0 14px;font-size:13.5px}
}
@media(prefers-reduced-motion:reduce){
  .sx *,.sx *::before,.sx *::after{animation:none!important;transition:none!important}
  .sx-line,[data-sx-in] *{opacity:1!important;transform:none!important}
  .sx-avoid-list s span::after{transform:scaleX(1)}
  .sx-fig-flow{stroke-dashoffset:0}.sx-fig-pain{opacity:1}.sx-case-list li{color:var(--ink)}
}