/* 학습종합클리닉센터 - 운영개요 페이지 전용 CSS (운영개요.html / operation_overview.css) */
.lc-overview * { box-sizing: border-box; letter-spacing: -0.5%; line-height: 150%;}
.lc-overview { display: flex; flex-direction: column; gap: 32px; }
.lc-purpose { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.lc-purpose__card { display: flex; flex-direction: column; gap: 20px; border: 1px solid #d8d8d8; border-radius: 20px; padding: 24px 24px 32px; }
.lc-purpose__label { display: flex; align-items: center; gap: 8px; }
.lc-purpose__num { display: flex; align-items: center; justify-content: center; width: 26px; height: 27px; background: #00937f; border-radius: 6px; color: #fff; font-size: 18px; font-weight: 700; }
.lc-purpose__label strong { color: #212121; font-size: 18px; font-weight: 700; }
.lc-purpose__img { width: 100%; height: 180px; overflow: hidden; }
.lc-purpose__img img { display: block; width: 100%; height: 100%; object-fit: contain; }
.lc-purpose__desc { margin: 0; color: #616161; font-size: 14px; font-weight: 500; line-height: 1.5; }
.lc-sys { position: relative; overflow: hidden; background: #f8f8f8; border: 1px solid #d8d8d8; border-radius: 20px; padding: 32px 42px 36px; }
.lc-sys__symbols { position: absolute; width: 0; height: 0; overflow: hidden; }
.lc-sys__loop { position: absolute; z-index: 0; pointer-events: none; top: 13%; width: 50%; height: 75%; }
.lc-sys__loop--l { left: 45px; }
.lc-sys__loop--r { right: 45px; }
.lc-sys__loop-rail { position: absolute; top: 0; bottom: 0; width: 20px; box-sizing: border-box; border: 2px solid #8a8a8a; }
.lc-sys__loop--l .lc-sys__loop-rail { left: 0; border-right: 0; border-radius: 12px 0 0 12px; }
.lc-sys__loop--r .lc-sys__loop-rail { right: 0; border-left: 0; border-radius: 0 12px 12px 0; }
.lc-sys__loop-arm { position: absolute; height: 0; border-top: 2px solid #8a8a8a; width: 100%; }
.lc-sys__loop--l .lc-sys__loop-arm--top { top: 0; left: 18px; width: calc(100% - 310px); }
.lc-sys__loop--l .lc-sys__loop-arm--bot { bottom: 0; left: 18px; }
.lc-sys__loop--r .lc-sys__loop-arm--top { top: 0; right: 18px; }
.lc-sys__loop--r .lc-sys__loop-arm--bot { bottom: 0; right: 18px; width: calc(100% - 208px); }
.lc-sys__loop-head { position: absolute; top: -8px; width: 10px; height: 14px; overflow: visible; }
.lc-sys__loop--l .lc-sys__loop-head { right: -3px; }
.lc-sys__loop--r .lc-sys__loop-head { left: -3px; transform: scaleX(-1); }
.lc-sys__note { position: absolute; z-index: 2; margin: 0; padding: 10px; background: #f8f8f8; color: #212121; font-size: 13px; line-height: 1.29; text-align: center; }
.lc-sys__note b { display: block; color: #2e8cd7; font-weight: 700; }
.lc-sys__note--l { left: 17.5%; bottom: 22px; }
.lc-sys__note--r { right: 17.5%; bottom: 22px; }
.lc-sys__inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 32px; }
.lc-sys__project { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; background: #fff; border: 1px solid #d8d8d8; border-radius: 5px; box-shadow: 0 4px 2px rgba(0,0,0,.12); padding: 16px 20px 17px; color: #212121; font-size: 24px; font-weight: 700; }
.lc-sys__project .c1 { color: #e81d1c; }
.lc-sys__project .c2 { color: #2ca15d; }
.lc-sys__project .c3 { color: #0065b4; }
.lc-sys__project .c4 { color: #8200a3; }
.lc-sys__chev { display: flex; align-items: center; justify-content: center; width: 24px; height: 30px; }
.lc-sys__chev svg { display: block; width: 24px; height: 30px; }
.lc-sys__chev--up { position: absolute; top: -24px; left: 50%; transform: translateX(-50%) rotate(180deg); }
.lc-sys__offices { padding-top: 14px; position: relative; display: flex; justify-content: center; gap: 16px; width: 100%; max-width: 625px; }
.lc-sys__office { flex: 1; display: flex; align-items: center; justify-content: center; background: #f3faff; border: 1px solid #2e8cd7; border-top-width: 8px; border-radius: 8px; padding: 8px 8px 10px; color: #212121; font-size: 16px; font-weight: 700; text-align: center; }
.lc-sys__lower { position: relative; display: flex; flex-direction: column; align-items: center; gap: 18px; width: 100%; }
.lc-sys__flow { position: absolute; width: 100%; height: calc(100% - 28px); bottom: 48px; }
.lc-sys__flow-line { position: absolute; top: 0; bottom: 8px; left: 50%; width: 10px; transform: translateX(-50%); background: linear-gradient(to bottom, #f8f8f8, #2b6bc0); z-index: 0; }
.lc-sys__flow-head { position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 0); z-index: 0; }
.lc-sys__center,
.lc-sys__school { position: relative; z-index: 1; width: 100%; max-width: 286px; border-radius: 8px; padding: 10px 16px; color: #fff; font-size: 20px; font-weight: 800; text-align: center; }
.lc-sys__center { background: #003985; }
.lc-sys__school { background: #4d4d4d; }
.lc-sys__mid { position: relative; z-index: 1; display: flex; justify-content: center; align-items: center; gap: 16px; width: 100%; }
.lc-sys__box { width: 278px; max-width: 278px; display: flex; flex-direction: column; align-items: center; gap: 10px; border-radius: 8px; padding: 12px 20px; text-align: center; background: #f8f8f8; }
.lc-sys__box--green { border: 1px solid #00937f; }
.lc-sys__box--orange { border: 1px solid #ff8a00; }
.lc-sys__box strong { color: #212121; font-size: 16px; font-weight: 700; }
.lc-sys__pill { display: flex; align-items: center; justify-content: center; width: 100%; border-radius: 24px; padding: 8px 16px; color: #212121; font-size: 16px; font-weight: 500; }
.lc-sys__box--green .lc-sys__pill { background: #b3dfd9; }
.lc-sys__pills { display: flex; gap: 10px; width: 100%; }
.lc-sys__pills .lc-sys__pill { flex: 1; background: #ffdcb3; }
.lc-sys__visit { display: flex; align-items: center; justify-items: center; min-width: 0; padding: 10px 0; color: #212121; font-size: 16px; font-weight: 500; text-align: center; line-height: 1.3;  }
.ic-sys_visit-label { display: flex; align-items: center; justify-content: center; width: 100%; border-radius: 24px; padding: 8px 16px; color: #212121; font-size: 16px; font-weight: 500; background: radial-gradient(closest-side, #f8f8f8 75%, rgba(248,248,248,0)); }
.lc-sys__harrow { display: block; width: 30px; height: 24px; }
.lc-sys__harrow svg { display: block; width: 30px; height: 24px; }
.lc-sys__harrow--r { transform: scaleX(-1); }
.lc-steps { display: flex; align-items: stretch; gap: 8px; padding: 20px 0 0; }
.lc-steps__item { position: relative; flex: 1 1 0; min-width: 0; padding-top: 28px; }
.lc-steps__card { height: 100%; background: #fff; border-style: solid; border-width: 6px; border-radius: 16px; padding: 30px 20px 24px; }
.lc-steps__item--1 .lc-steps__card { border-color: rgba(0,57,133,.3); }
.lc-steps__item--2 .lc-steps__card { border-color: rgba(0,147,127,.3); }
.lc-steps__item--3 .lc-steps__card { border-color: rgba(255,138,0,.3); }
.lc-steps__item--4 .lc-steps__card { border-color: rgba(255,53,53,.3); }
.lc-steps__num { position: absolute; top: 0; left: 50%; z-index: 1; display: flex; align-items: center; justify-content: center; width: 49px; height: 49px; margin-left: -24.5px; border-radius: 50%; color: #fff; font-size: 30px; font-weight: 700; box-shadow: 0 4px 2px rgba(0,0,0,.12); }
.lc-steps__item--1 .lc-steps__num { background: #003985; }
.lc-steps__item--2 .lc-steps__num { background: #00937f; }
.lc-steps__item--3 .lc-steps__num { background: #ff8a00; }
.lc-steps__item--4 .lc-steps__num { background: #ff3535; }
.lc-steps__name { margin: 0 0 16px; padding-bottom: 16px; border-bottom: 1px dashed #c6c6c6; font-size: 18px; font-weight: 700; text-align: center; line-height: 1.5; }
.lc-steps__item--1 .lc-steps__name { color: #003985; }
.lc-steps__item--2 .lc-steps__name { color: #00937f; }
.lc-steps__item--3 .lc-steps__name { color: #e37b00; }
.lc-steps__item--4 .lc-steps__name { color: #d01414; }
.lc-steps__list { margin: 0; padding-left: 16px; color: #616161; font-size: 13px; font-weight: 500; line-height: 1.5; }
.lc-steps__list li { position: relative; color: #616161; font-size: 13px; line-height: 150%; letter-spacing: -5%;}
.lc-steps__list li::before { content: ""; position: absolute; left: -11px; top: 0.55em; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.lc-steps__list li + li { margin-top: 2px; }
.lc-steps__next { display: flex; align-items: center; justify-content: center; flex-shrink: 0; padding-top: 30px; }
.lc-steps__next svg { display: block; width: 20px; height: 19px; }

@media screen and (max-width: 900px) {
    .lc-purpose { grid-template-columns: 1fr; }
    .lc-sys__loop {top: 8%; height: 86%;}
    .lc-sys__loop--l {left: 16px;}
    .lc-sys__loop--l .lc-sys__loop-arm--top {width: calc(100% - 278px);}
    .lc-sys__loop--r {right: 16px;}
    .lc-sys__loop--r .lc-sys__loop-arm--bot {width: calc(100% - 177px);}
    .lc-sys__offices { flex-direction: column;}
    .lc-sys__mid { flex-direction: column; justify-items: center; background: #f8f8f8; }
    .lc-sys__lower { gap: 32px; }
    .lc-sys__box { max-width: 278px; width: 100%; }
    .lc-sys__visit { flex-direction: column; gap: 8px; min-width: 0; width: auto; padding: 0; }
    .lc-sys__harrow--l { transform: rotate(90deg); }
    .lc-sys__harrow--r { transform: rotate(-90deg); }
    .lc-sys__note--l {left: 12%;}
    .lc-sys__note--r {right: 12%;}
    .lc-steps { flex-direction: column; align-items: stretch; }
    .lc-steps__next { padding: 8px 0; }
    .lc-steps__next svg { transform: rotate(90deg); }
}
@media screen and (max-width: 650px) {
    .lc-sys { padding: 24px 46px 28px; }
    .lc-sys__loop {top: 6%; height: 89%;}
    .lc-sys__loop--l .lc-sys__loop-arm--top {width: calc(100% - 202px);}
    .lc-sys__note { bottom: initial; top: 66%; padding: 4px;}
    .lc-sys__note--l {left: 12px; text-align: left;}
    .lc-sys__note--r {right: 12px; text-align: right;}
    .lc-sys__project { font-size: 16px; padding: 12px 12px; }
    .lc-sys__project *:nth-child(3) {width: 100%; text-align: center;}
    .lc-purpose__img { height: 150px; }
}