/*
Theme Name: OROT PLANET
Description: 오롯플래닛 홈페이지 테마 (로컬 시안). 따뜻한 우주 궤도 홈 + 매거진 톤 본문.
Version: 0.1.1
Author: 오롯플래닛
Text Domain: orot
*/

:root{
  --ivory:#F7F5F0; --paper:#F7F5F0; --brown:#3A3633; --ink:#3A3633; --charcoal:#3A3633;
  --yellow:#EE7B2F; --orange:#EE7B2F; --green:#77716A; --line:rgba(58,54,51,.15);
  --night:#3A3633; --night2:#3A3633; --star:#FFF3E6;
  --sub:#77716A;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ivory);color:var(--ink);font-family:'Pretendard Variable',Pretendard,system-ui,sans-serif;font-size:16px;line-height:1.7;word-break:keep-all}
a{color:var(--brown)}a:hover{color:var(--ink)}
img{max-width:100%;height:auto}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
h1,h2,h3{font-weight:600;line-height:1.3;letter-spacing:-.01em;color:var(--ink)}
.skip{position:absolute;left:-9999px}.skip:focus{left:16px;top:12px;background:#FFFFFF;padding:8px 12px;z-index:99}

/* 머리 */
.site-head{position:sticky;top:0;z-index:20;background:rgba(247,245,240,.96);border-bottom:1px solid var(--line)}
.site-head .wrap{display:flex;align-items:center;gap:36px;min-height:80px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:8px;text-decoration:none;font-weight:700;color:var(--ink)}
.brand img{height:36px;width:auto}
.nav{display:flex;gap:34px;flex-wrap:wrap;margin:0;padding:0;list-style:none;flex:1}
.nav a{text-decoration:none;color:var(--ink);font-size:18px;font-weight:500;padding:8px 0}
.nav a:hover,.nav .current-menu-item>a,.nav .current-menu-ancestor>a{color:var(--brown);text-decoration:underline;text-underline-offset:6px}
.nav .sub-menu{display:none}
.head-cta{display:flex;gap:10px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:0 18px;border-radius:999px;border:1px solid var(--brown);background:transparent;color:var(--ink);text-decoration:none;font-weight:600;font-size:15px}
.btn:hover{background:rgba(58,54,51,.06);color:var(--ink)}
.btn.green{background:var(--green);border-color:var(--green);color:#FFFFFF}.btn.green:hover{background:#77716A;color:#FFFFFF}
.btn.orange{background:var(--orange);border-color:var(--orange);color:var(--charcoal)}.btn.orange:hover{background:#EE7B2F;color:var(--charcoal)}
.btn.sm{min-height:42px;padding:0 18px;font-size:15.5px}

/* 디자인 규칙 (10/11 디자이너): 행동색은 #EE7B2F 하나, 버튼 글자는 어두운 색(#3A3633). 금색은 장식 선에만 */
:root{--act:#EE7B2F;--act-ink:#3A3633;--gold-line:#77716A}
.btn.act{background:var(--act);border-color:var(--act);color:var(--act-ink)}.btn.act:hover{background:#EE7B2F;color:var(--act-ink)}
.btn.orange{color:var(--act-ink)}
/* 홈: 첫 화면만 검정, 헤더는 첫 화면 위에서 투명 → 스크롤하면 아이보리 + 1px 선 */
.logo-light{display:none}
.home .site-head{position:fixed;left:0;right:0;top:var(--wp-admin--admin-bar--height,0px);background:transparent;border-bottom-color:transparent;transition:background .3s,border-color .3s}
.home .site-head:not(.scrolled) .logo-dark{display:none}
.home .site-head:not(.scrolled) .logo-light{display:block}
.home .site-head:not(.scrolled) .nav a{color:rgba(255,255,255,.9)}
.home .site-head:not(.scrolled) .head-cta .btn:not(.act){border-color:rgba(255,255,255,.4);color:#FFFFFF}
.home .site-head.scrolled{background:rgba(247,245,240,.96);border-bottom-color:var(--line)}

/* 우주 궤도 */
.space{position:relative;min-height:100vh;display:flex;flex-direction:column;justify-content:center;background:#3A3633;color:var(--star);overflow:hidden}
.space .wrap{position:relative;z-index:1;width:100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:40px;align-items:center;padding-top:120px;padding-bottom:120px;max-width:1280px}
.space h1{color:#FFFFFF;font-size:clamp(36px,5vw,64px);font-weight:700;letter-spacing:-.035em;line-height:1.18;margin:0 0 24px}
.space .eyebrow{font-size:12px;letter-spacing:.38em;color:var(--gold-line);margin:0 0 22px}
.space .lead{color:rgba(255,255,255,.7);font-size:17px;line-height:1.85;margin:0 0 40px;max-width:29em}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin:0}
.btn.ghost{border-color:rgba(255,255,255,.35);color:#FFFFFF;border-radius:4px;min-height:52px;padding:0 26px;font-size:16px}
.btn.ghost:hover{background:rgba(255,255,255,.08);color:#FFFFFF}

.orbit{position:relative;width:100%;max-width:600px;justify-self:center}
.orbit2d{width:100%;height:auto;overflow:visible;display:block}
.rings circle{stroke:var(--gold-line);stroke-width:1;stroke-opacity:.22;vector-effect:non-scaling-stroke}
.rings circle.main{stroke-opacity:.55}
#deco circle{fill:var(--gold-line);opacity:.7}
.core circle{fill:#F7F5F0}
.core text{font-family:inherit;fill:#3A3633}
.core .ko{font-size:17px;font-weight:700}
.core .en{font-size:9px;letter-spacing:.24em;fill:#77716A}
.station{cursor:pointer}
.station .dot{fill:#F7F5F0}
.station text{font-family:inherit}
.station .en{fill:var(--gold-line);font-size:10px;letter-spacing:.26em}
.station .lb{fill:#FFFFFF;font-size:19px;font-weight:600}
.station .num{fill:rgba(255,255,255,.5);font-size:12.5px}
.station:hover .lb,.station:focus .lb{fill:#EE7B2F}
.station:hover .dot,.station:focus .dot{fill:var(--act)}
.station:focus{outline:none}.station:focus .hit{stroke:var(--gold-line);stroke-width:1}
@media (max-width:860px){.space{min-height:0}.space .wrap{padding-top:110px}.space .wrap{padding-bottom:24px}}
@media (prefers-reduced-motion:reduce){.space *{animation:none}}
/* 문 3개 */

.door-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr);gap:16px}
.door{display:flex;flex-direction:column;gap:10px;padding:26px;border:1px solid var(--line);border-radius:18px;background:var(--paper);text-decoration:none;color:var(--ink)}
.door:hover{border-color:var(--brown);color:var(--ink)}
.door .who{font-size:13px;color:var(--sub)}
.door b{font-size:20px;font-weight:600}
.door .go{margin-top:auto;font-weight:600}
.door.csr{border-top:4px solid var(--green)}.door.csr b{font-size:26px}.door.csr .go{color:var(--green)}
.door.uni{border-top:4px solid var(--orange)}.door.uni .go{color:var(--brown)}

/* 4축 텍스트 목록 */
.axes{padding:56px 0;border-bottom:1px solid var(--line)}
.axes ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-top:1px solid var(--line)}
.axes li{padding:20px 18px 20px 0;border-right:1px solid var(--line)}
.axes li:last-child{border-right:0}
.axes .no{font-size:13px;color:var(--sub)}
.axes h3{margin:4px 0 6px;font-size:18px}
.axes p{margin:0 0 8px;font-size:14.5px;color:var(--sub)}
.axes .dot{display:inline-block;width:10px;height:10px;border-radius:10px;margin-right:6px;vertical-align:1px}

/* 저널 카드 */

.card{display:flex;flex-direction:column;gap:8px;text-decoration:none;color:var(--ink);border-top:1px solid var(--line);padding-top:14px}
.card .cat{font-size:13px;color:var(--sub)}
.card b{font-size:17px;font-weight:600;line-height:1.45}
.section{padding:56px 0}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:12px;margin-bottom:18px}
.section-head h2{margin:0;font-size:24px}

/* 본문 */

.content{padding:32px 0 64px;max-width:760px}
.content h2{font-size:22px;margin:36px 0 10px}
.note{border:1px dashed var(--line);border-radius:10px;padding:14px 16px;color:var(--sub);font-size:14px;background:var(--paper)}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin:20px 0}
.tabs a{padding:6px 14px;border:1px solid var(--line);border-radius:999px;text-decoration:none;font-size:14px}
.tabs a.on{background:var(--ink);color:var(--ivory);border-color:var(--ink)}

/* 꼬리 */
.site-foot{background:#3A3633;padding:40px 0 56px;font-size:14px;color:rgba(255,255,255,.62)}
.site-foot a{color:rgba(255,255,255,.85)}.site-foot a:hover{color:#FFFFFF}.site-foot b{color:#FFFFFF}
.site-foot .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}

@media (max-width:860px){
  .space .wrap{grid-template-columns:1fr;padding-top:40px}
  .door-grid{grid-template-columns:1fr}
  .axes ol{grid-template-columns:1fr 1fr}
  .axes li:nth-child(2){border-right:0}
  .head-cta{display:none}
}

/* 본문 요소 */
.lead-quote{font-size:22px;line-height:1.5;margin:0 0 24px;padding:0 0 20px;border-bottom:1px solid var(--line)}
.lead-quote span{font-size:15px;color:var(--sub)}
.content table.facts{width:100%;border-collapse:collapse;margin:12px 0 8px;font-size:15px}
.content table.facts th{text-align:left;font-weight:600;color:var(--sub);border-bottom:1px solid var(--brown);padding:8px 10px 8px 0}
.content table.facts td{border-bottom:1px solid var(--line);padding:10px 10px 10px 0;vertical-align:top}
.content ol.steps{padding-left:20px}.content ol.steps li{margin:8px 0}
.people{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.person{display:flex;flex-direction:column;gap:4px;padding:20px;border:1px solid var(--line);border-radius:18px;background:var(--paper);text-decoration:none;color:var(--ink)}
.person b{font-size:20px}.person span{font-size:13px;color:var(--sub)}.person em{font-style:normal;margin-top:8px}
details.faq{border-bottom:1px solid var(--line);padding:4px 0}
details.faq summary{cursor:pointer;padding:12px 0;font-weight:600;list-style:none}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::before{content:"+";display:inline-block;width:22px;color:var(--brown)}
details.faq[open] summary::before{content:"−"}
details.faq p{margin:0 0 10px 22px;color:var(--ink)}
@media (max-width:860px){.people{grid-template-columns:1fr}}

/* 저널 글 본문 */
.content figure{margin:28px 0}
.content figure img{display:block;width:100%;border-radius:10px}
.content figcaption{font-size:13px;color:var(--sub);margin-top:6px}
.content blockquote{margin:24px 0;padding:4px 0 4px 18px;border-left:2px solid var(--green);color:var(--ink)}
.content blockquote p{margin:0}
.content hr{border:0;border-top:1px solid var(--line);margin:32px 0}
.content h3{font-size:19px;margin:32px 0 8px}
.content h4{font-size:17px;margin:24px 0 6px}
.btn.big{border-radius:4px;min-height:52px;padding:0 26px;font-size:16px}
.station text{paint-order:stroke;stroke:#3A3633;stroke-width:5px;stroke-linejoin:round}

/* ===== 전체 적용 (10/11): 홈 선 도식 디자인을 모든 페이지에 =====
   규칙: 아이보리 본문 + 1px 선, 섹션 제목 그린, 행동은 오렌지 버튼(어두운 글자) 하나, 금색은 장식 선만, 모서리 4~6px, 그림자 없음 */
.btn{border-radius:4px}
.axes h2,.section-head h2,.content h2{color:var(--green)}

.door{border-radius:10px;background:#FFFFFF}
.door.csr,.door.uni{border-top:1px solid var(--line)}
.door:hover{border-color:var(--ink)}
.door .go{color:var(--ink)!important;text-decoration:underline;text-decoration-color:var(--act);text-decoration-thickness:3px;text-underline-offset:6px}
.door.csr{background:#3A3633;border-color:#3A3633;color:#FFFFFF}
.door.csr .who{color:var(--gold-line)}.door.csr span{color:rgba(255,255,255,.75)}.door.csr .go{color:#FFFFFF!important}
.axes .dot{width:12px;height:12px;border-radius:50%;background:transparent!important;border:1px solid var(--gold-line);position:relative}
.axes .dot::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--ink)}
.person{border-radius:10px;background:#FFFFFF}
.note{border-radius:10px}
.content figure img{border-radius:4px}
.tabs a{border-radius:4px}

/* ===== 10/11 포인트 컬러: 무거운 검정 카드 대신 연한 그린(#F7F5F0) + 그린 선 ===== */
:root{--tint:#F7F5F0;--tint-line:#E4E0D9}
.door.csr{background:var(--tint)!important;border-color:var(--tint-line)!important;color:var(--ink)!important}
.door.csr .who{color:var(--green)!important}.door.csr span{color:var(--sub)!important}.door.csr .go{color:var(--ink)!important}
.band{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:28px 32px;border-radius:10px;background:var(--tint);border:1px solid var(--tint-line);position:relative;overflow:hidden}
.band>div{display:flex;flex-direction:column;gap:4px;position:relative;z-index:1}.band b{font-size:20px}.band span{color:var(--sub)}
.band .btn{position:relative;z-index:1;margin-right:110px}
.band::after{content:"";position:absolute;right:-30px;top:50%;width:190px;height:190px;transform:translateY(-50%);opacity:.8;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='none' stroke='%235C715B'%3E%3Ccircle cx='100' cy='100' r='40' stroke-opacity='.5'/%3E%3Ccircle cx='100' cy='100' r='70' stroke-opacity='.35'/%3E%3Ccircle cx='100' cy='100' r='98' stroke-opacity='.2'/%3E%3Ccircle cx='100' cy='30' r='4' fill='%23E56B20' stroke='none'/%3E%3C/svg%3E") no-repeat center/contain}
.endcta{padding:16px 0 64px}

/* 가치 한 문장 + 아이콘 카드 3 */
.value{padding:88px 0 56px;text-align:center}
.value h2{font-size:clamp(26px,3.4vw,42px);line-height:1.35;margin:0 0 18px;color:var(--ink)!important}
.value em{font-style:normal}.value em.g{color:var(--green)}.value em.o{box-shadow:inset 0 -.35em 0 rgba(238,123,47,.28)}
.value .sub{max-width:40em;margin:0 auto 40px;color:var(--sub);font-size:17px}

/* 롤링 띠 (포스터·로고) */
.roll{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000000 6%,#000000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000000 6%,#000000 94%,transparent)}
.roll-track{display:flex;width:max-content;animation:roll 80s linear infinite}
.roll .dup{display:flex}
.roll.rev .roll-track{animation-direction:reverse;animation-duration:90s}
@keyframes roll{to{transform:translateX(-50%)}}
.roll.posters{margin:0 0 14px}
.roll.posters img{height:230px;width:auto;margin-right:14px;border-radius:4px;border:1px solid var(--line);background:#FFFFFF}
.roll.logos{padding:10px 0}
.roll.logos img{height:34px;width:auto;margin-right:64px;opacity:.85}
.roll.logos .roll-track{animation-duration:60s}
@media (prefers-reduced-motion:reduce){.roll-track{animation:none}.roll{overflow-x:auto}}
.works{padding:48px 0 56px;border-top:1px solid var(--line)}
.partners{padding:48px 0;border-top:1px solid var(--line)}
.facts{color:var(--sub);font-size:14.5px}
.note-s{margin-top:8px;font-size:12.5px;color:var(--sub)}

/* 두 사업 소개 블록 (칩 + 제목 + 설명 + 이미지) */
.feature{padding:56px 0;border-top:1px solid var(--line)}
.fgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:48px;align-items:center;margin-bottom:56px}
.fgrid:last-child{margin-bottom:0}
.fgrid.rev .ftext{order:2}
.chip{display:inline-block;font-size:13px;font-weight:700;border-radius:4px;padding:3px 10px;margin-bottom:12px}
.chip.g{background:var(--tint);color:var(--green)}.chip.o{background:#FFF3E6;color:#C85A12}
.ftext h2{font-size:clamp(24px,2.6vw,32px);margin:0 0 12px;color:var(--ink)!important}
.ftext p{color:var(--sub);margin:0 0 16px}

.fimg{margin:0;position:relative;isolation:isolate}
.fimg img{display:block;width:100%;border-radius:10px;border:1px solid var(--line)}
.fimg::before{content:"";position:absolute;right:-22px;top:-22px;width:130px;height:130px;border:1px solid var(--gold-line);border-radius:50%;opacity:.7;z-index:-1}
.fimg::after{content:"";position:absolute;left:-14px;bottom:-14px;width:12px;height:12px;border-radius:50%;background:var(--act)}

/* 저널 카드 썸네일 */

.card{border-top:0;padding-top:0}

@media (max-width:860px){.fgrid{grid-template-columns:1fr}.fgrid.rev .ftext{order:0}.band{flex-direction:column;align-items:flex-start}.band .btn{margin-right:0}.band::after{display:none}.roll.posters img{height:160px}}

/* ===== /unistep (10/11): 어두운 첫 화면 + 아이보리 본문, 포인트는 연한 오렌지(#FFF3E6) ===== */
:root{--utint:#FFF3E6;--utint-line:#FFF3E6}
.uni-hero{background:#3A3633;color:#FFFFFF;padding:80px 0 80px;position:relative;overflow:hidden}
.uni-hero::before{content:"";position:absolute;right:-120px;top:-120px;width:620px;height:620px;opacity:.5;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600' fill='none' stroke='%23C9A45D'%3E%3Ccircle cx='300' cy='300' r='110' stroke-opacity='.35'/%3E%3Ccircle cx='300' cy='300' r='190' stroke-opacity='.25'/%3E%3Ccircle cx='300' cy='300' r='270' stroke-opacity='.18'/%3E%3Ccircle cx='300' cy='110' r='5' fill='%23E56B20' stroke='none'/%3E%3Ccircle cx='490' cy='300' r='3' fill='%23C9A45D' stroke='none'/%3E%3C/svg%3E") no-repeat center/contain}
.uni-hero .wrap{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center;max-width:1280px}
.uni-hero h1{color:#FFFFFF;font-size:clamp(32px,4.2vw,54px);font-weight:700;letter-spacing:-.03em;line-height:1.22;margin:0 0 20px}
.uni-hero .eyebrow{font-size:12px;letter-spacing:.3em;color:var(--gold-line);margin:0 0 18px}
.uni-hero .lead{color:rgba(255,255,255,.72);font-size:17px;line-height:1.8;margin:0 0 32px}
.uni-hero .hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:20px}

.uni-stats{padding:48px 0;border-bottom:1px solid var(--line)}
.us-nums{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:28px}
.us-nums div{display:flex;flex-direction:column;gap:10px;padding:8px 0}
.us-nums b{font-size:40px;line-height:1;font-variant-numeric:tabular-nums;text-decoration:underline;text-decoration-color:var(--act);text-decoration-thickness:4px;text-underline-offset:10px}
.us-nums b small{font-size:18px;margin-left:2px}
.us-nums span{color:var(--sub);font-size:14.5px;margin-top:6px}

.howto h2,.ufaq h2{color:var(--green)}

.chip{background:#F7F5F0;color:var(--sub)}

.howto{padding:56px 0;border-top:1px solid var(--line)}
.orbit-steps{list-style:none;margin:28px 0 12px;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;position:relative}
.orbit-steps::before{content:"";position:absolute;left:28px;right:28px;top:22px;border-top:1px dashed var(--gold-line)}
.orbit-steps li{position:relative;display:flex;flex-direction:column;gap:4px}
.orbit-steps .n{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:#F7F5F0;border:1px solid var(--gold-line);font-weight:700;margin-bottom:10px;position:relative}
.orbit-steps li:first-child .n{background:var(--act);border-color:var(--act);color:var(--act-ink)}
.orbit-steps b{font-size:17px}.orbit-steps span:not(.n){color:var(--sub);font-size:14.5px}

.ufaq{padding:56px 0;border-top:1px solid var(--line)}

.chip.g{background:var(--tint);color:var(--green)}.chip.o{background:var(--utint);color:#C85A12}
.band.uni{background:var(--utint);border-color:var(--utint-line)}
.band.uni::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='none' stroke='%23E56B20'%3E%3Ccircle cx='100' cy='100' r='40' stroke-opacity='.4'/%3E%3Ccircle cx='100' cy='100' r='70' stroke-opacity='.28'/%3E%3Ccircle cx='100' cy='100' r='98' stroke-opacity='.16'/%3E%3Ccircle cx='100' cy='30' r='4' fill='%23E56B20' stroke='none'/%3E%3C/svg%3E")}

@media (max-width:860px){.uni-hero .wrap{grid-template-columns:1fr}.us-nums,.orbit-steps{grid-template-columns:repeat(2,minmax(0,1fr))}.orbit-steps::before{display:none}}

/* ===== 저널 목록 (10/11): 사진 카드 격자 + 사업별 탭 ===== */

.jtabs{margin:28px 0 0;gap:8px}
.jtabs a{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;font-size:15px;background:#FFFFFF;color:var(--ink)}
.jtabs a em{font-style:normal;font-size:12px;color:var(--sub)}
.jtabs a.on{background:var(--ink);border-color:var(--ink);color:#FFFFFF}.jtabs a.on em{color:rgba(255,255,255,.7)}

.jgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 24px}
.jcard{display:flex;flex-direction:column;gap:8px;text-decoration:none;color:var(--ink)}
.jimg{display:block;aspect-ratio:4/3;border-radius:10px;overflow:hidden;border:1px solid var(--line);margin-bottom:6px;
  background:var(--tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%235C715B' stroke-opacity='.5'%3E%3Ccircle cx='50' cy='50' r='12'/%3E%3Ccircle cx='50' cy='50' r='26'/%3E%3Ccircle cx='50' cy='24' r='3' fill='%23E56B20' stroke='none'/%3E%3C/svg%3E") no-repeat center/90px}
.jimg img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s}
.jcard:hover .jimg img{transform:scale(1.04)}
.jcard:hover b{text-decoration:underline;text-decoration-color:var(--act);text-decoration-thickness:2px;text-underline-offset:4px}
.jmeta{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--sub)}
.jcat{font-weight:700;font-size:12px;border-radius:4px;padding:2px 8px;background:#F7F5F0;color:var(--brown)}
.jcat.c-csr{background:var(--tint);color:var(--green)}
.jcat.c-unistep{background:var(--utint);color:#C85A12}
.jcat.c-community{background:#E4E0D9;color:#C85A12}
.jcard b{font-size:18px;line-height:1.45;font-weight:600}

.jpage{margin-top:44px}
.jpage .nav-links{display:flex;gap:8px;flex-wrap:wrap}
.jpage .page-numbers{display:inline-flex;min-width:40px;height:40px;align-items:center;justify-content:center;padding:0 12px;border:1px solid var(--line);border-radius:4px;text-decoration:none;color:var(--ink);background:#FFFFFF}
.jpage .page-numbers.current{background:var(--ink);color:#FFFFFF;border-color:var(--ink)}
@media (max-width:860px){.jgrid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.jgrid{grid-template-columns:1fr}}

/* ===== OROT Blog (10/11): 대표 글 · 작성자 · 읽는 시간 · 검색 ===== */

.jbody{display:flex;flex-direction:column;gap:8px}

.jcard.big{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:36px;align-items:center}
.jcard.big .jimg{aspect-ratio:16/10;margin:0}
.jcard.big b{font-size:clamp(22px,2.4vw,30px);line-height:1.35}

/* 글 상세 */

.author-card{display:flex;gap:14px;align-items:center;margin-top:48px;padding:20px;border:1px solid var(--line);border-radius:10px;background:#FFFFFF}
.author-card i{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-weight:700;font-size:18px;background:var(--tint);color:var(--green);border:1px solid var(--tint-line);flex:none}
.author-card div{display:flex;flex-direction:column}.author-card span{color:var(--sub);font-size:14px}
.post-cta{margin-top:24px}

@media (max-width:860px){.jcard.big{grid-template-columns:1fr;gap:16px}}

/* ===== 글 블록 · 미션 궤도 3단계 (10/11) ===== */
.ablock{padding:56px 0;border-top:1px solid var(--line)}
.ablock .section-head{align-items:end}
.ab-k{margin:0 0 6px;font-size:12px;letter-spacing:.24em;color:var(--sub)}
.ablock h2{margin:0;font-size:clamp(22px,2.4vw,28px);color:var(--green)}
.content + .ablock,.orot-themed + .ablock{margin-top:16px}

.orbit3{padding:72px 0;border-top:1px solid var(--line)}
.o3-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:56px;align-items:start}
.o3-fig{position:sticky;top:110px}
.o3-fig svg{width:100%;max-width:420px;display:block;margin:0 auto;overflow:visible}
.o3-fig .ring{fill:none;stroke:var(--gold-line);stroke-opacity:.55}.o3-fig .ring.in{stroke-opacity:.25;stroke-dasharray:2 6}
.o3-fig .arrow{fill:none;stroke:var(--ink);stroke-opacity:.18;stroke-width:1.2}
.o3-fig .node circle{fill:#F7F5F0;stroke:var(--line);stroke-width:1.5;transition:all .3s}
.o3-fig .node text{font-family:inherit;font-size:11px;font-weight:700;text-anchor:middle;fill:var(--sub)}
.o3-fig .node.u.on circle{fill:var(--act);stroke:var(--act)}.o3-fig .node.s.on circle{fill:var(--gold-line);stroke:var(--gold-line)}.o3-fig .node.c.on circle{fill:var(--green);stroke:var(--green)}
.o3-fig .node.on circle{r:22}.o3-fig .node.on text{fill:#FFFFFF}
.o3-fig .mid{font-family:inherit;font-size:15px;font-weight:600;text-anchor:middle;fill:var(--ink)}
.o3-list h2{margin:0 0 20px;font-size:clamp(24px,2.8vw,34px);color:var(--ink)}
.o3-list ol{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.o3-step{display:grid;grid-template-columns:56px 1fr;gap:12px;padding:22px 8px;border-bottom:1px solid var(--line);cursor:default;transition:background .3s}
.o3-step.on{background:#FFFFFF}
.o3-step:focus{outline:2px solid var(--green);outline-offset:-2px}
.o3-no{font-size:22px;font-weight:600;color:var(--sub)}
.o3-step.on .o3-no{color:var(--ink)}
.o3-tag{display:inline-block;font-size:12px;font-weight:700;border-radius:4px;padding:2px 8px;margin-bottom:6px}
.o3-step.u .o3-tag{background:var(--utint);color:#C85A12}.o3-step.s .o3-tag{background:#E4E0D9;color:#C85A12}.o3-step.c .o3-tag{background:var(--tint);color:var(--green)}
.o3-step h3{margin:0 0 6px;font-size:20px;font-weight:600}
.o3-step p{margin:0 0 6px;color:var(--ink)}
.o3-step .o3-ev{font-size:13.5px;color:var(--sub)}
.o3-step a{font-weight:600;color:var(--ink);text-decoration:underline;text-decoration-color:var(--act);text-decoration-thickness:2px;text-underline-offset:5px}
.o3-mob{display:none}
@media (prefers-reduced-motion:reduce){.o3-fig .node circle,.o3-step{transition:none}}
@media (max-width:860px){.o3-grid{grid-template-columns:1fr;gap:16px}.o3-fig{position:static}.o3-fig .mid{display:none}.o3-mob{display:block;text-align:center;font-weight:600;margin:12px 0 0}}

/* ===== 포스터 크레딧 (10/11): 작은 포스터 여러 장이 위로 천천히 흐름, 멈춤·클릭 없음 ===== */

.pcredits{border:1px solid var(--line);border-radius:10px;background:#FFFFFF;padding:18px 18px 0}
.pcredits.stage{background:var(--utint,#FFF3E6);border-color:var(--utint-line,#FFF3E6)}
.pcredits.screen{background:var(--tint,#F7F5F0);border-color:var(--tint-line,#E4E0D9)}
.pc-k{margin:0 0 12px;font-size:14px;font-weight:700;color:var(--ink)}
.pc-k em{font-style:normal;font-weight:400;color:var(--sub);margin-left:4px}
.pc-view{height:340px;overflow:hidden;-webkit-mask-image:linear-gradient(transparent,#000000 12%,#000000 88%,transparent);mask-image:linear-gradient(transparent,#000000 12%,#000000 88%,transparent)}
.pc-roll{animation:pcroll 70s linear infinite}
.pc-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;padding-bottom:10px}
.pc-grid img{display:block;width:100%;height:auto;aspect-ratio:2/3;object-fit:cover;border-radius:3px;border:1px solid rgba(0,0,0,.06);pointer-events:none}
@keyframes pcroll{to{transform:translateY(-50%)}}
@media (prefers-reduced-motion:reduce){.pc-roll{animation:none}.pc-view{height:auto;max-height:520px;overflow:auto}.pc-grid[aria-hidden]{display:none}}
@media (max-width:860px){.pc-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.wrap:not(.pc-two) > .pcredits .pc-grid{grid-template-columns:repeat(10,minmax(0,1fr))}

/* ===== 공통 틀 (10/11): 모든 페이지 머리를 홈 첫 화면처럼 — 검정 띠 + 금색 궤도 선 + 큰 흰 제목, 본문은 아이보리 ===== */
.phero{background:#3A3633;color:#FFFFFF;position:relative;overflow:hidden;padding:76px 0 60px;border-bottom:0}
.phero::after{content:"";position:absolute;right:-140px;top:50%;width:560px;height:560px;margin-top:-280px;pointer-events:none;opacity:1;animation:pspin 140s linear infinite;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600' fill='none' stroke='%23C9A45D'%3E%3Ccircle cx='300' cy='300' r='62' fill='%23F5F4F0' stroke='none'/%3E%3Ccircle cx='300' cy='300' r='130' stroke-opacity='.22'/%3E%3Ccircle cx='300' cy='300' r='190' stroke-opacity='.5'/%3E%3Ccircle cx='300' cy='300' r='250' stroke-opacity='.2'/%3E%3Ccircle cx='300' cy='110' r='6' fill='%23F5F4F0' stroke='none'/%3E%3Ccircle cx='490' cy='300' r='6' fill='%23E56B20' stroke='none'/%3E%3Ccircle cx='166' cy='434' r='3' fill='%23C9A45D' stroke='none'/%3E%3C/svg%3E") no-repeat center/contain}
@keyframes pspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.phero::after{animation:none}}
.phero .wrap{position:relative;z-index:1}
.phero h1{color:#FFFFFF;margin:0;font-size:clamp(32px,4.4vw,54px);font-weight:700;letter-spacing:-.03em;line-height:1.2;max-width:15em}
.phero .eyebrow{font-size:12px;letter-spacing:.32em;color:var(--gold-line)!important;margin:0 0 16px}
.phero .psub{color:rgba(255,255,255,.7);font-size:17px;margin:14px 0 0;max-width:34em}
.phero .crumbs{margin:0 0 14px;font-size:14px}.phero .crumbs a{color:rgba(255,255,255,.7)}.phero .crumbs a:hover{color:#FFFFFF}
/* 블로그 머리(탭·검색)를 검정 위에 */

/* 글 상세 머리 */
.phero.post{padding:56px 0 44px}
.phero.post::after{opacity:.6}

.phero + .wrap .content{padding-top:40px}
/* /csr 첫 화면도 같은 틀 */
.orot-themed .intro{background:#3A3633;color:#FFFFFF;position:relative;overflow:hidden}
.orot-themed .intro::after{content:"";position:absolute;left:-200px;bottom:-260px;width:620px;height:620px;pointer-events:none;opacity:.55;animation:pspin 160s linear infinite;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600' fill='none' stroke='%23C9A45D'%3E%3Ccircle cx='300' cy='300' r='130' stroke-opacity='.25'/%3E%3Ccircle cx='300' cy='300' r='190' stroke-opacity='.5'/%3E%3Ccircle cx='300' cy='300' r='250' stroke-opacity='.2'/%3E%3Ccircle cx='300' cy='110' r='6' fill='%23E56B20' stroke='none'/%3E%3C/svg%3E") no-repeat center/contain}
.orot-themed .intro .intro-in{position:relative;z-index:1}
.orot-themed .intro h1,.orot-themed .intro .big{color:#FFFFFF!important}
.orot-themed .intro .eyebrow{color:var(--gold-line)!important;letter-spacing:.2em}
.orot-themed .intro .back{color:rgba(255,255,255,.75)!important}
.orot-themed .scroll-cue{background:#3A3633;color:rgba(255,255,255,.6);margin:0;padding:10px 0 18px}

/* ===== 사업군 포인트 컬러 (10/11): 머리 띠 색으로 구분 — 오롯플래닛 검정 / 사회공헌 그린 / 유니스텝 오렌지 ===== */
:root{--csr-deep:#3A3633;--uni-deep:#EE7B2F}
.phero.csr{background:var(--csr-deep)}
.phero.uni{background:linear-gradient(120deg,#EE7B2F 0%,var(--uni-deep) 55%,#C85A12 100%)}
.phero.csr::after,.phero.uni::after{filter:brightness(1.6) saturate(.4)}
.phero.csr .eyebrow,.phero.uni .eyebrow{color:rgba(255,255,255,.75)!important}

/* /csr 첫 화면: 그린 */
.orot-themed .intro,.orot-themed .scroll-cue{background:var(--csr-deep)}
.orot-themed .intro .eyebrow{color:rgba(255,255,255,.75)!important}
/* /unistep 첫 화면: 오렌지 */
.uni-hero{background:linear-gradient(120deg,#EE7B2F 0%,var(--uni-deep) 55%,#C85A12 100%)!important}
.uni-hero .eyebrow{color:rgba(255,255,255,.75)!important}
.uni-hero::before{filter:brightness(1.8) saturate(.3)}

/* 페이지 상단 목차: 머리 아래에 붙어 따라옴 */
.pindex{position:sticky;top:80px;z-index:15;background:rgba(247,245,240,.96);border-bottom:1px solid var(--line);backdrop-filter:blur(6px)}
.pindex .wrap{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;max-width:1280px}
.pindex a{flex:none;padding:14px 12px;font-size:14.5px;color:var(--sub);text-decoration:none;border-bottom:2px solid transparent}
.pindex a:hover{color:var(--ink)}
.pindex a.on{color:var(--ink);border-bottom-color:var(--act);font-weight:600}
section[id],[id$="-title"]{scroll-margin-top:140px}

/* 유니스텝 비전·역할·기술 */
.utech{padding:72px 0;border-top:1px solid var(--line)}
.utech h2{font-size:clamp(26px,3vw,38px);line-height:1.3;margin:0 0 16px;color:var(--ink)}
.ut-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
.utech p{color:var(--sub);font-size:16.5px}

.ut-fig{width:100%}
.ut-fig rect{fill:#FFFFFF;stroke:var(--line)}
.ut-fig text{font-family:inherit;font-size:14px;font-weight:600;text-anchor:middle;fill:var(--ink)}
.ut-fig text.s{font-size:11px;font-weight:400;fill:var(--sub)}
.ut-fig .eng circle{fill:var(--utint);stroke:var(--uni-deep)}.ut-fig .eng .in2{fill:none;stroke-opacity:.4;stroke-dasharray:3 5}
.ut-fig .ln{fill:none;stroke:var(--uni-deep);stroke-opacity:.6;stroke-width:1.2}
.ut-fig .pt{fill:var(--act)}
@media (max-width:860px){.ut-grid{grid-template-columns:1fr}.pindex{top:64px}}

/* ===== 10/11 유니스텝 스킨 (리플렛 + 토글이). 샘플보다 덜 둔탁하게: 선 1.5px, 그림자 3px·옅게, 제목 굵기 한 단계 낮춤 ===== */
@font-face{font-family:'Paperlogy';font-weight:700;font-display:swap;src:url(https://fastly.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-7Bold.woff2) format('woff2')}
@font-face{font-family:'Paperlogy';font-weight:600;font-display:swap;src:url(https://fastly.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-6SemiBold.woff2) format('woff2')}
.uni-skin{--u-o:#EE7B2F;--u-o2:#F7A65A;--u-y:#FFD36E;--u-cream:#FFF3E6;--u-ink:#3A3633;--u-line:rgba(58,54,51,.55);--u-sh:rgba(58,54,51,.22);background:#F7F5F0}
.uni-skin h1,.uni-skin h2,.uni-skin .us-nums b,.uni-skin .btn.pop,.uni-skin .band b{font-family:'Paperlogy','Pretendard Variable',Pretendard,sans-serif;letter-spacing:-.015em}
.uni-skin h2{font-weight:500!important;color:var(--u-ink)!important;line-height:1.35}
.uni-skin h2 em.o,.uni-skin h2 em{font-style:normal;color:var(--u-o)}

/* 첫 화면 */
.uni-skin .uni-hero{background:var(--u-o)!important;color:var(--u-ink);padding:64px 0 0;border-bottom:10px solid var(--u-ink)}
.uni-skin .uni-hero::before{display:none}
.uni-skin .uni-hero .wrap{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);align-items:end;gap:24px}
.uni-skin .uh-copy{padding-bottom:64px}

.pill{border:1px solid var(--u-line);border-radius:99px;padding:4px 13px;font-size:12.5px;font-weight:600;background:rgba(255,255,255,.85);color:var(--u-ink)}
.pill.k{background:var(--u-ink);border-color:var(--u-ink);color:#F7F5F0;letter-spacing:.06em}
.uni-skin .uni-hero h1{color:var(--u-ink);font-weight:700;font-size:clamp(32px,4.1vw,52px);line-height:1.24}
.uni-skin .uni-hero h1 em{font-style:normal;background:var(--u-y);padding:0 .14em;border-radius:10px}

.uni-skin .uni-hero .lead{color:rgba(58,54,51,.85);font-size:16.5px;max-width:520px;margin:0 0 26px}
.btn.pop{font-weight:700;font-size:15.5px;padding:14px 22px;border:1px solid var(--u-ink);border-radius:18px;background:#F7F5F0;color:var(--u-ink);box-shadow:none;transition:transform .15s,box-shadow .15s;text-decoration:none}
.btn.pop:hover{transform:translate(-1px,-1px);box-shadow:none}
.btn.pop.k{background:var(--u-ink);color:#F7F5F0}
.uh-tog{position:relative;margin:0;align-self:end;max-width:420px;justify-self:center}
.uh-tog img{display:block;width:100%;height:auto}

@keyframes bubIn{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}

/* 실적 = 계단 블록 */
.uni-skin .uni-stats{padding:64px 0 48px;border-bottom:0}

.uni-skin .us-nums b{text-decoration:none;font-size:clamp(34px,3.6vw,48px);font-weight:700;color:var(--u-ink)}
.uni-skin .us-nums b small{font-size:.5em}
.uni-skin .us-nums span{color:var(--u-ink);font-weight:600;margin:0}

/* 카드·버튼 부드럽게 */

.uni-skin .chip.o{background:var(--u-cream);color:var(--u-ink);border:1px solid var(--u-line);border-radius:99px}
.uni-skin .orbit-steps .n{background:var(--u-y);color:var(--u-ink);border:1px solid var(--u-line);font-family:'Paperlogy',sans-serif}

.uni-skin .band.uni{border-radius:18px;border:1px solid var(--u-line);box-shadow:none}

/* 후기 = 말풍선 */

@media (max-width:860px){.uni-skin .uni-hero .wrap{grid-template-columns:1fr}.uh-tog{max-width:260px}.uni-skin .uh-copy{padding-bottom:8px}}
/* 토글이 동작 (192×208 webp) */
.uni-skin .tgl{display:block;width:96px;height:auto;pointer-events:none}

.howto h2{display:flex;align-items:flex-end;gap:10px}

.uni-skin .band.uni{position:relative;padding-left:120px}

@media (max-width:860px){.uni-skin .band.uni{padding-left:24px}}
.uni-skin .uni-stats{padding-top:120px}
.uni-skin .uni-hero .wrap{max-width:1120px}

/* =====================================================================
   10/11 공통 디자인 시스템 (메인·유니스텝·사회공헌 한 벌)
   - 서체: 본문 Pretendard / 제목·숫자·버튼 Paperlogy
   - 도형: 1.5px 반투명 선 · 라운드 18 · 옅은 3px 그림자 (유니스텝 아래 섹션 기준)
   - 하이라이트: 제목 em = 노란 형광펜(들어올 때 그어짐)
   - 색: 메인 오렌지 / 유니스텝 오렌지 / 사회공헌 그린, 노랑은 공통 강조
   ===================================================================== */
:root{--f-pt:'Paperlogy','Pretendard Variable',Pretendard,sans-serif;--ds-line:rgba(58,54,51,.42);--ds-sh:rgba(58,54,51,.13);--ds-r:18px;--ds-hl:#FFD36E;--ds-cream:#FFF3E6}
h1,h2,.us-nums b,.stat b,.btn,.door b,.band b,.o3-no{font-family:var(--f-pt)}
h1,h2{font-weight:700;letter-spacing:-.02em}
h2{font-weight:600}

/* 하이라이트 */
h1 em,h2 em{font-style:normal;color:inherit!important;background:linear-gradient(transparent 60%,var(--ds-hl) 60%,var(--ds-hl) 92%,transparent 92%) no-repeat 0 0/100% 100%;padding:0 .06em;animation:hlDraw 1.1s .3s cubic-bezier(.6,.1,.2,1) both}
.space h1 em,.phero h1 em,.uni-hero h1 em{background-image:linear-gradient(transparent 62%,rgba(255,211,110,.55) 62%,rgba(255,211,110,.55) 90%,transparent 90%)}
.uni-skin .uni-hero h1 em{background-image:linear-gradient(transparent 58%,#FFF3E6 58%,#FFF3E6 92%,transparent 92%);border-radius:0;padding:0 .06em}
@keyframes hlDraw{from{background-size:0 100%}to{background-size:100% 100%}}
@media (prefers-reduced-motion:reduce){h1 em,h2 em{animation:none}}

/* 도형: 카드·문·밴드·이미지 */
.door,.card,.jcard,.ablock .jcard,.o3-step,
.orot-themed .icard,.orot-themed .case,.orot-themed .cap-card,.orot-themed .pcard,.orot-themed .duo-opt{border:1px solid var(--ds-line)!important;border-radius:var(--ds-r)!important;box-shadow:none!important}
.band{border:1px solid var(--ds-line)!important;border-radius:18px!important;box-shadow:none!important}
.fimg img,.orot-themed .dphoto,.orot-themed .cphoto{border-radius:var(--ds-r)!important}
.door:hover,.card:hover,.jcard:hover,.orot-themed .icard:hover,.orot-themed .case:hover{transform:translate(-1px,-1px);box-shadow:none!important}
.chip,.jcat,.orot-themed .chip,.pill,.o3-tag{border-radius:99px!important}
.pcredits{border-radius:var(--ds-r)}

/* 버튼: 라운드 14 · 1.5px · 옅은 그림자 */
.btn,.orot-themed .btn{border-radius:18px!important;border-width:1.5px!important;font-weight:700;box-shadow:none;transition:transform .15s,box-shadow .15s}
.btn:hover,.orot-themed .btn:hover{transform:translate(-1px,-1px);box-shadow:none}
.btn.sm{border-radius:10px!important;box-shadow:none}
.space .btn,.phero .btn{box-shadow:none}

/* 숫자 블록 */

/* ---------- 유니스텝 첫 화면: 덜 둔탁하게 ---------- */
.uni-skin .uni-hero{background:radial-gradient(120% 90% at 85% 10%,#EE7B2F 0%,#EE7B2F 45%,#EE7B2F 100%)!important;border-bottom:0!important;padding:72px 0 0}
.uni-skin .uni-hero .eyebrow{color:rgba(58,54,51,.62)!important;letter-spacing:.28em;font-size:12px;margin:0 0 18px}
.uni-skin .uni-hero h1{font-family:var(--f-pt);font-weight:700;font-size:clamp(30px,3.8vw,48px);line-height:1.28;color:#3A3633}
.hero-rings{position:absolute;right:-180px;top:50%;width:760px;height:760px;margin-top:-380px;pointer-events:none;border-radius:50%;
  background:radial-gradient(circle,transparent 0 149px,rgba(255,255,255,.35) 150px 151px,transparent 152px 239px,rgba(255,255,255,.25) 240px 241px,transparent 242px 329px,rgba(255,255,255,.16) 330px 331px,transparent 332px);animation:pspin 160s linear infinite}

.uni-skin .uh-tog{max-width:330px;margin-bottom:-4px}

/* ---------- 토글이 (유니스텝 언급 자리마다) ---------- */
.tgl{display:inline-block;width:auto;pointer-events:none;flex:none}
.tgl-i{height:1.7em;margin:-.5em .2em -.45em -.1em;vertical-align:middle}
.chip .tgl-i,.o3-tag .tgl-i{height:22px;margin:-6px 3px -6px -6px}
.btn .tgl-i{height:30px;margin:-10px 2px -8px -8px}

.door.uni{position:relative;overflow:visible!important}

/* CSS로만 붙이는 자리: 메뉴·푸터 링크, 블로그 분류 칩, 유니스텝 머리 띠 */
.nav a[href$="/unistep/"]::before,.site-foot a[href$="/unistep/"]::before,footer a[href$="/unistep/"]::before{content:"";display:inline-block;width:20px;height:22px;margin:-6px 3px -5px 0;vertical-align:middle;background:url(img/toggle/idle.png) center/contain no-repeat}
.jcat.c-unistep::before{content:"";display:inline-block;width:15px;height:16px;margin:-4px 3px -3px -3px;vertical-align:middle;background:url(img/toggle/idle.png) center/contain no-repeat}
.phero.uni .wrap::after{content:"";position:absolute;right:20px;bottom:-62px;width:132px;height:143px;background:url(img/toggle/waving.png) center bottom/contain no-repeat;pointer-events:none}
.phero.post.uni .wrap::after{background-image:url(img/toggle/review.png);bottom:-46px;width:110px;height:120px}
@media (max-width:860px){.phero.uni .wrap::after{width:84px;height:92px;bottom:-44px}}
.uni-skin .uni-hero h1 em{background-color:transparent!important}
.fimg img.tgl{width:auto!important;height:110px!important;aspect-ratio:auto!important;object-fit:contain!important;border-radius:0!important;box-shadow:none!important;border:0!important}

/* ---------- 메인 배너 (한 장씩) ---------- */

/* ---------- 10/11 헤더: 공지 띠 + 로고 두 개 + 큰 메뉴(하위 펼침) + 티켓 버튼 하나 ---------- */
.notice-bar{margin:0;background:#3A3633;text-align:center;font-size:13.5px;line-height:1;padding:10px 16px}
.notice-bar a{color:#FFF3E6;text-decoration:none;font-weight:600}
.notice-bar a:hover{text-decoration:underline;text-underline-offset:4px}
.home .site-head:not(.scrolled) .notice-bar{background:rgba(255,255,255,.08)}
.site-head .wrap{gap:28px;min-height:84px;flex-wrap:nowrap}
.brands{display:flex;align-items:center;gap:14px;flex:none}
.brand img{height:34px}
.brand.uni img{height:22px}
.brand-sep{width:1px;height:26px;background:var(--ds-line)}
.home .site-head:not(.scrolled) .brand-sep{background:rgba(255,255,255,.35)}
.site-head .nav{gap:6px;flex:1;justify-content:center;flex-wrap:nowrap}
.site-head .nav>li{position:relative}
.site-head .nav>li>a{display:block;font-family:var(--f-pt);font-size:19px;font-weight:600;padding:12px 16px;border-radius:10px;text-decoration:none!important}
.site-head .nav>li>a:hover,.site-head .nav>li:focus-within>a{background:rgba(58,54,51,.06)}
.site-head .nav>.current-menu-item>a,.site-head .nav>.current-menu-ancestor>a,.site-head .nav>.current-menu-parent>a{color:var(--ink);box-shadow:inset 0 -3px 0 var(--orange);border-radius:12px 12px 0 0}
.home .site-head:not(.scrolled) .nav>li>a:hover{background:rgba(255,255,255,.1)}
.site-head .nav .sub-menu{display:block;position:absolute;left:50%;top:100%;min-width:200px;margin:6px 0 0;padding:8px;list-style:none;background:#FFFFFF;border:1px solid var(--ds-line);border-radius:18px;box-shadow:none;opacity:0;visibility:hidden;transform:translate(-50%,6px);transition:opacity .2s,transform .2s,visibility 0s .2s;z-index:30}
.site-head .nav .sub-menu::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px}
.site-head .nav>li:hover>.sub-menu,.site-head .nav>li:focus-within>.sub-menu{opacity:1;visibility:visible;transform:translate(-50%,0);transition:opacity .2s,transform .2s}
.site-head .nav .sub-menu a{display:block;padding:10px 14px;border-radius:10px;font-size:15.5px;font-weight:600;color:var(--ink)!important;text-decoration:none;white-space:nowrap}
.site-head .nav .sub-menu a:hover,.site-head .nav .sub-menu .current-menu-item>a{background:var(--ds-cream)}
.site-head .nav .sub-menu a[href$="/unistep/"]::before{display:none}
.head-cta{flex:none}
.btn.ticket{background:var(--act);border-color:var(--act-ink)!important;color:var(--act-ink);min-height:46px;padding:0 18px 0 10px;font-size:15px;gap:6px}
.btn.ticket img{height:30px;width:auto;margin:-6px 0 -4px}
.btn.ticket:hover{background:#EE7B2F;color:var(--act-ink)}
@media (max-width:1180px){.site-head .nav>li>a{font-size:17px;padding:10px 10px}.brand.uni{display:none}.brand-sep{display:none}}
@media (max-width:860px){.site-head .wrap{flex-wrap:wrap;gap:10px;padding-top:10px;padding-bottom:10px}.site-head .nav{order:3;width:100%;justify-content:space-between;overflow-x:auto}.site-head .nav .sub-menu{display:none}.btn.ticket{font-size:13.5px;min-height:40px}}

/* ---------- 10/11 유니스텝 하위 페이지 (제작사·관객) + 토글이 소개 + 갈림길 ---------- */
.uni-skin .uni-hero.sub{padding:56px 0 0}
.uni-skin .uni-hero.sub .uh-copy{padding-bottom:56px}
.uni-skin .uni-hero.sub h1{font-size:clamp(28px,3.4vw,42px)}
.uni-hero .crumbs{margin:0 0 10px;font-size:14px}.uni-hero .crumbs a{color:rgba(58,54,51,.7);text-decoration:none}.uni-hero .crumbs a:hover{text-decoration:underline}
.uh-tog.sm{max-width:220px;justify-self:end;margin-right:6%}
.uh-tog.sm img{width:100%;height:auto}
.uni-hero .hero-cta{display:flex;flex-wrap:wrap;gap:10px}
.utoggle{padding:80px 0;background:var(--ds-cream)}
.ut2{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:48px;align-items:center}
.ut2-fig{margin:0;max-width:340px;justify-self:center}.ut2-fig img{width:100%;height:auto;display:block}
.utoggle h2{font-size:clamp(26px,3vw,36px);margin:0 0 14px}

.udoors{padding:72px 0}
.udoors h2{font-size:clamp(24px,2.6vw,32px);margin:0 0 24px}
.door-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.door.uni.aud{background:linear-gradient(120deg,#F7F5F0,#FFF3E6)}
.ufaq-one{max-width:820px}
.ucontact{padding:80px 0;background:#FFFFFF;border-top:1px solid var(--line)}
.uc-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center}
.ucontact h2{font-size:clamp(26px,3vw,36px);margin:0 0 14px}

@media (max-width:860px){.ut2,.uc-grid,.door-grid.two{grid-template-columns:1fr}.uh-tog.sm{max-width:140px}}

/* ---------- 10/11 사회공헌 정리: 사례 3장, 근거 한 줄, 더 보기 링크, FAQ 전체 접기, /csr/process ---------- */
.cases-3 .case:nth-child(n+4){display:none}

.more-links{display:flex;flex-wrap:wrap;gap:18px;margin:6px 0 18px}
.more-links a{font-weight:700;color:var(--ink);text-decoration:none;border-bottom:2px solid var(--green)}
.csr-faq-all{padding:8px 0 48px}
.faq-more{border:1px solid var(--ds-line);border-radius:18px;background:#FFFFFF;padding:0 22px}
.faq-more>summary{cursor:pointer;list-style:none;padding:18px 0;font-family:var(--f-pt);font-weight:600;font-size:17px}
.faq-more>summary::after{content:"＋";float:right;color:var(--green)}
.faq-more[open]>summary::after{content:"－"}
.faq-more .content{padding-bottom:18px}
.csr-moved{padding:24px 0 40px}
.csr-moved .wrap>div{margin:0 0 48px;scroll-margin-top:110px}
.csr-moved .dblock{display:block!important;opacity:1!important;transform:none!important}
.csr-moved .tabsec,.csr-moved .reveal{opacity:1!important;transform:none!important}
.phero.csr .wrap::after{content:none}

/* ---------- 10/11 메인 작품 배너 (한 장) ---------- */
.wbanner{padding:24px 0 72px}
.wb{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:center;padding:36px 48px;border:1px solid var(--ds-line);border-radius:18px;box-shadow:none;background:linear-gradient(110deg,#3A3633 0%,#3A3633 100%);color:#FFFFFF;overflow:hidden}
.wb .chip{background:rgba(255,255,255,.12);color:#FFF3E6}
.wb h2{color:#FFFFFF!important;font-size:clamp(24px,2.6vw,34px);margin:14px 0 10px}
.wb h2 em{background-image:linear-gradient(transparent 60%,rgba(255,211,110,.45) 60%,rgba(255,211,110,.45) 92%,transparent 92%)}
.wb-copy p{color:rgba(255,255,255,.72);margin:0}
.wb-go{display:flex;flex-wrap:wrap;gap:18px;margin-top:20px!important}
.wb-go a{color:#FFFFFF;font-weight:700;text-decoration:none;border-bottom:2px solid var(--orange)}
.wb-fan{position:relative;height:240px}
.wb-fan img{position:absolute;top:50%;left:50%;width:130px;aspect-ratio:2/3;object-fit:cover;border-radius:10px;box-shadow:0 10px 24px rgba(0,0,0,.45);transform:translate(calc(-50% + (var(--i) - 2.5) * 62px),-50%) rotate(calc((var(--i) - 2.5) * 6deg));transition:transform .4s}
.wb:hover .wb-fan img{transform:translate(calc(-50% + (var(--i) - 2.5) * 74px),-54%) rotate(calc((var(--i) - 2.5) * 8deg))}
@media (max-width:860px){.wb{grid-template-columns:1fr;padding:28px 22px}.wb-fan{height:190px}.wb-fan img{width:96px;transform:translate(calc(-50% + (var(--i) - 2.5) * 40px),-50%) rotate(calc((var(--i) - 2.5) * 6deg))}}

/* ---------- 10/11 OROT Blog (트리플라잇 인사이트 구조) ---------- */
.bwrap{display:grid;grid-template-columns:200px minmax(0,1fr);gap:56px;padding-top:56px;padding-bottom:72px;max-width:1240px}
.b-side{position:sticky;top:130px;align-self:start;display:grid;gap:28px}
.b-home{text-decoration:none;color:var(--ink);display:grid;gap:6px}
.b-home b{font-family:var(--f-pt);font-size:24px}
.b-home span{font-size:13px;color:var(--sub,#77716A);line-height:1.5}
.b-cats{display:grid;gap:4px}
.b-cats a{display:flex;justify-content:space-between;padding:9px 12px;border-radius:10px;text-decoration:none;color:#77716A;font-weight:600;font-size:15.5px}
.b-cats a em{font-style:normal;font-size:12.5px;opacity:.7}
.b-cats a:hover{background:rgba(58,54,51,.05);color:var(--ink)}
.b-cats a.on{color:var(--ink);background:var(--ds-cream)}
.b-cats a.c-csr.on{background:#E4E0D9}.b-cats a.c-unistep.on{background:#FFF3E6}
.b-search{display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--ink);padding:6px 2px}
.b-search input{border:0;background:transparent;font:inherit;font-size:15px;width:100%;outline:none}
.b-feat{position:relative;margin-bottom:40px}
.bf-track{position:relative;height:340px}
.bf-slide{position:absolute;inset:0;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);border:1px solid var(--ds-line);border-radius:18px;overflow:hidden;background:#FFFFFF;text-decoration:none;color:var(--ink);opacity:0;visibility:hidden;transition:opacity .6s,visibility 0s .6s;box-shadow:none}
.bf-slide.on{opacity:1;visibility:visible;transition:opacity .6s}

.bf-slide .tthumb{border-radius:0;height:100%;aspect-ratio:auto}
.bf-ctrl{position:absolute;left:40px;bottom:30px;display:flex;gap:8px;z-index:2}
.bf-ctrl button{width:40px;height:40px;border-radius:50%;border:1px solid var(--ds-line);background:#FFFFFF;font-size:20px;cursor:pointer;color:var(--ink)}
.b-sort{display:flex;justify-content:flex-end;align-items:center;gap:16px;margin-bottom:18px}
.b-sort p{margin:0 auto 0 0;font-weight:600}
.b-sort select{border:0;background:transparent;font:inherit;font-weight:600;cursor:pointer}
.b-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px 28px}
.b-card{display:grid;gap:12px;align-content:start;text-decoration:none;color:var(--ink)}
.b-card b{font-family:var(--f-pt);font-weight:600;font-size:19px;line-height:1.45}
.b-card:hover b{text-decoration:underline;text-underline-offset:4px}
.b-card:hover .tthumb{transform:translateY(-3px)}
.bmeta{font-size:13.5px;color:#77716A;font-weight:600}
.bmeta i{font-style:normal;margin:0 8px;opacity:.5}
.bmeta a{color:inherit;text-decoration:none}
/* 썸네일 틀 */
.tthumb{position:relative;display:block;aspect-ratio:7/5;border-radius:18px;overflow:hidden;transition:transform .25s;background:#FFF3E6;color:var(--ink)}
.tthumb.c-csr{background:#E4E0D9}.tthumb.c-unistep{background:#FFF3E6}.tthumb.c-community{background:#FFF3E6}.tthumb.c-orot{background:#3A3633;color:#FFFFFF}

/* 글 보기 */
.post-v{padding:56px 0 24px}
.pv-head{text-align:center;max-width:880px}
.pv-head .crumbs{margin:0 0 14px;font-size:14px}.pv-head .crumbs a{color:#77716A;text-decoration:none}
.pv-head h1{font-size:clamp(28px,3.4vw,42px);line-height:1.35;margin:0 0 18px}
.pv-thumb{max-width:760px;margin-top:36px;margin-bottom:40px}
.pv-thumb .tthumb{aspect-ratio:16/8}
.pv-body{max-width:720px;margin:0 auto;padding:0 20px;font-size:17px;line-height:1.85}
.pv-more{max-width:880px;padding-bottom:64px;border-top:1px solid var(--line);padding-top:48px}
.pv-more h2{display:flex;flex-direction:column;gap:6px;font-size:24px;margin:0 0 20px}
.pv-more h2 span{font:500 14.5px Pretendard,sans-serif;color:#77716A}
.pv-more ul{list-style:none;margin:0;padding:0}
.pv-more li a{display:grid;gap:4px;padding:16px 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink)}
.pv-more li b{font-weight:600;font-size:17px}
.pv-more li a:hover b{text-decoration:underline;text-underline-offset:4px}
@media (max-width:980px){.bwrap{grid-template-columns:1fr;gap:24px}.b-side{position:static}.b-cats{display:flex;overflow-x:auto}.b-cats a{white-space:nowrap;gap:6px}.b-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.b-grid{grid-template-columns:1fr}.bf-track{height:auto}.bf-slide{position:relative;grid-template-columns:1fr;display:none}.bf-slide.on{display:grid}.bf-ctrl{position:static;margin-top:10px}}

/* ---------- 10/11 팀·브랜드 자료 ---------- */
.tteam{padding:48px 0 24px}
.tgroup{position:relative;margin:0 0 48px;border-radius:18px;overflow:hidden;aspect-ratio:16/7;background:repeating-linear-gradient(135deg,#E4E0D9 0 14px,#F7F5F0 14px 28px);border:1px dashed var(--ds-line)}
.tgroup img{width:100%;height:100%;object-fit:cover;display:block}
.tg-ph{position:absolute;inset:0;display:grid;place-content:center;color:#77716A;font-weight:600}
.tgroup figcaption{position:absolute;left:32px;bottom:28px;display:grid;gap:4px;background:rgba(255,255,255,.92);padding:14px 20px;border-radius:18px}
.tgroup figcaption b{font-family:var(--f-pt);font-size:20px}
.tgroup figcaption span{font-size:14px;color:#77716A}
.tteam h2,.tbrand h2{font-size:clamp(24px,2.6vw,32px);margin:0 0 20px}
.ncards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.ncard{display:grid;text-decoration:none;color:var(--ink);background:#FFFFFF;border:1px solid var(--ds-line);border-radius:18px;overflow:hidden;box-shadow:none;transition:transform .2s}
.ncard:hover{transform:translate(-1px,-2px)}
.nc-ph{aspect-ratio:4/5;display:grid;place-content:center;color:#77716A;font-size:14px;background:repeating-linear-gradient(135deg,#F7F5F0 0 12px,#F7F5F0 12px 24px)}
.nc-body{display:grid;gap:4px;padding:16px 18px 18px}
.nc-body b{font-family:var(--f-pt);font-size:20px}
.nc-body em{font-style:normal;color:#77716A;font-size:14.5px}
.nc-body .go{margin-top:8px;font-weight:700;font-size:14px}
.tbrand{padding:56px 0 72px}
.tbrand .section-head{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.bkits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:8px}
.bkit{display:grid;gap:6px;align-content:start;background:#FFFFFF;border:1px solid var(--ds-line);border-radius:18px;padding:16px;box-shadow:none}
.bk-prev{display:grid;place-content:center;aspect-ratio:16/10;border-radius:10px;background:#F7F5F0;margin-bottom:8px;padding:18px}
.bk-prev img{max-height:120px;max-width:100%;width:auto;margin:auto}
.bkit.tg .bk-prev{background:#FFF3E6}
.bkit b{font-family:var(--f-pt);font-size:18px}
.bkit>span{font-size:14px;color:#77716A}
.bk-dl{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.bk-dl a{font-size:13px;font-weight:700;color:var(--ink);text-decoration:none;border:1px solid var(--ds-line);border-radius:99px;padding:5px 12px}
.bk-dl a:hover{background:var(--ds-cream)}
.brules{margin:24px 0 0;padding-left:18px;color:#77716A;font-size:14.5px;display:grid;gap:4px}
@media (max-width:860px){.ncards,.bkits{grid-template-columns:1fr}.tgroup{aspect-ratio:4/3}}
.tbrand .section-head a.btn.pop.k{color:#F7F5F0!important;background:var(--u-ink,#3A3633);border-color:var(--u-ink,#3A3633);text-decoration:none}
.csr-moved .cases-3 .case{display:block!important}
.csr-moved .db .dot.post{left:var(--b)}.csr-moved .db .seg{opacity:1}
.orot-themed [hidden]{display:none!important}
/* 10/11 포스터 가로 롤링: 폭 꽉, 투명 배경, 이음매 없이 */
.works.wide{overflow:hidden}
.prow{width:100%;overflow:hidden;padding:8px 0 4px;-webkit-mask-image:linear-gradient(90deg,transparent,#000000 6%,#000000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000000 6%,#000000 94%,transparent)}
.prow-track{display:flex;width:max-content;animation:prowMove linear infinite}
.prow-set{display:flex;gap:16px;padding-right:16px}
.prow img{width:150px;height:225px;object-fit:cover;border-radius:10px;display:block;flex:none;box-shadow:0 6px 16px rgba(58,54,51,.16)}
@keyframes prowMove{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.prow-track{animation:none}.prow{overflow-x:auto}}

/* ---------- 10/11 유니스텝 첫 화면: 공연 관람 모드 (무대 자막 + 객석의 토글이) ---------- */
.uh-stage{position:relative;margin:0;align-self:end;justify-self:center;width:min(100%,460px);aspect-ratio:46/44}
.st-curtain{position:absolute;left:0;right:0;top:0;height:62%;border-radius:20px 20px 0 0;background:linear-gradient(90deg,#EE7B2F 0 9%,transparent 9% 91%,#EE7B2F 91%),radial-gradient(120% 90% at 50% 0,#3A3633 0,#3A3633 70%);box-shadow:inset 0 -2px 0 rgba(255,255,255,.08)}
.st-curtain::before{content:"";position:absolute;left:0;right:0;top:0;height:14%;border-radius:20px 20px 0 0;background:repeating-linear-gradient(90deg,#EE7B2F 0 16px,#EE7B2F 16px 32px)}
.st-screen{position:absolute;left:12%;right:12%;top:30%;display:flex;align-items:center;gap:10px;background:rgba(0,0,0,.72);border:1px solid rgba(255,255,255,.14);border-radius:10px;padding:10px 14px;color:#FFFFFF;font-size:14.5px;font-weight:600;line-height:1.4}
.st-line{flex:1;transition:opacity .3s}
.st-line.fade{opacity:0}
.st-line i{font-style:normal;color:#FFD36E;margin-right:4px}
.st-lang{flex:none;font:700 11px var(--f-pt);color:#3A3633;background:#FFD36E;border-radius:10px;padding:3px 6px}

.uh-tog{display:none}
@media (max-width:860px){.uh-stage{width:min(100%,340px)}}

/* ---------- 10/11 토글이 소개: 자막 ON/OFF + 3단 스토리 + 프로필 카드 ---------- */
.utoggle{padding:88px 0}
.utoggle .ut2{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:start}

.tg-switch{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:12px;align-items:center;text-align:left;border:1px solid var(--ds-line);background:#FFFFFF;border-radius:18px;padding:12px 18px;cursor:pointer;box-shadow:none;font:inherit;color:var(--ink)}
.tg-switch .knob{grid-row:1/3;width:48px;height:28px;border-radius:99px;background:#E4E0D9;position:relative;transition:background .25s}
.tg-switch .knob::after{content:"";position:absolute;left:3px;top:3px;width:22px;height:22px;border-radius:50%;background:#FFFFFF;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:left .25s}
.tg-switch[aria-pressed="true"] .knob{background:var(--u-o,#EE7B2F)}
.tg-switch[aria-pressed="true"] .knob::after{left:23px}
.tg-switch b{font-family:var(--f-pt);font-size:16px}
.tg-switch span:last-child{font-size:13px;color:#77716A}
.tg-story{list-style:none;counter-reset:s;margin:24px 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.tg-story li{counter-increment:s;display:grid;gap:4px;padding:16px;border:1px solid var(--ds-line);border-radius:18px;background:#FFFFFF}
.tg-story li::before{content:counter(s,decimal-leading-zero);font:700 12px var(--f-pt);color:var(--u-o,#EE7B2F)}
.tg-story b{font-family:var(--f-pt);font-size:16px}
.tg-story span{font-size:13.5px;color:#77716A}

.udoors .door .btn{margin-top:14px;align-self:start;pointer-events:none}
@media (max-width:860px){.tg-story{grid-template-columns:1fr}}

/* ---------- 10/11 하위 메뉴 CTA 줄 ---------- */

/* ---------- 10/11 블로그 썸네일: 실사 사진을 틀 안에 ---------- */

.st-screen{top:17%;left:10%;right:10%}

/* 10/11 메인 첫 화면: 무엇을 하는 회사인지 + 근거 한 줄 */

/* ---------- 10/11 블로그 썸네일 A안 (승인): 실사 + 아래 그라데이션 + 칩 + 로고 + 제목 2줄(왼쪽, 어절 단위) ---------- */
.tthumb.a{background:#3A3633;color:#FFFFFF}
.tthumb.a.c-csr{background:#3A3633}.tthumb.a.c-unistep{background:#EE7B2F}.tthumb.a.c-community{background:#3A3633}

.ta-ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s}
.b-card:hover .ta-ph{transform:scale(1.04)}
.tthumb.a::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(58,54,51,.9) 0%,rgba(58,54,51,.62) 30%,rgba(58,54,51,.18) 62%,rgba(58,54,51,.28) 100%)}
.ta-cat{position:absolute;left:16px;top:16px;z-index:1;font-size:12px;font-weight:700;padding:4px 10px;border-radius:99px;background:rgba(255,255,255,.92);color:#3A3633}
.ta-logo{position:absolute;right:16px;top:18px;z-index:1;height:15px;width:auto}
.ta-t{position:absolute;left:18px;right:18px;bottom:16px;z-index:1;display:grid;gap:2px;text-align:left;font-family:var(--f-pt);font-weight:700;font-size:clamp(18px,1.6vw,22px);line-height:1.32;letter-spacing:-.02em;word-break:keep-all}
.ta-t span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tthumb.big .ta-t{left:28px;right:28px;bottom:26px;font-size:clamp(22px,2.4vw,32px)}
.tthumb.big .ta-cat{left:24px;top:22px;font-size:13px}.tthumb.big .ta-logo{right:24px;top:24px;height:20px}
.bf-slide .tthumb.a .ta-t,.bf-slide .tthumb.a .ta-cat{display:none}
.bf-slide .tthumb.a::after{background:linear-gradient(to right,rgba(58,54,51,.25),transparent 40%)}
.b-card{gap:10px}
/* 10/11 첫 화면 B안 시안 */

.hero-tags{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px}
.hero-tags span{font-size:13px;font-weight:700;color:#FFD36E;border:1px solid rgba(255,211,110,.45);border-radius:99px;padding:5px 12px}

/* ---------- 10/11 헤더: 심볼만 + 마우스 올리면 이름 펼침 · 메뉴 옆 토글이 제외 · 하위 메뉴 CTA 숨김 ---------- */
.brand.mark{display:inline-flex;align-items:center;gap:0;text-decoration:none}
.brand.mark img{height:28px;width:auto}
.brand.mark.uni img{height:24px;display:block}
.brand.mark .bn{display:inline-block;max-width:0;overflow:hidden;white-space:nowrap;opacity:0;margin-left:0;font-family:var(--f-pt);font-weight:700;font-size:16px;color:var(--ink);transition:max-width .35s cubic-bezier(.3,.7,.2,1),opacity .25s,margin .35s}
.brand.mark:hover .bn,.brand.mark:focus-visible .bn{max-width:7em;opacity:1;margin-left:10px}
.home .site-head:not(.scrolled) .brand.mark .bn{color:#FFFFFF}
.nav a[href$="/unistep/"]::before{display:none!important}

/* 첫 화면 문장: 줄 단위 고정 (강한 줄바꿈 규칙) */
.lines>span{display:block;white-space:nowrap}
.space .lead.lines{max-width:none}
.hero-tags{margin-top:12px}
@media (max-width:640px){.lines>span{white-space:normal}}
/* 임직원 자막 아래 레퍼런스·후기 */

.fr-more{display:inline-block;margin-top:14px;font-weight:700;color:var(--ink);text-decoration:none;border-bottom:2px solid var(--green)}

.brand.mark img{height:32px}.brand.mark.uni img{height:26px}

/* ---------- 10/11 썸네일 제목: 강조만 굵게 ---------- */
.ta-t{font-weight:500}
.ta-t b{font-weight:800;color:#FFFFFF}
/* ---------- 메인 궤도: 클릭 없이 전시만 ---------- */
.orbit2d .station{cursor:default}
.orbit2d .station .hit{pointer-events:none}
/* ---------- 메인 레퍼런스: 사진 카드 + 후기 이모지 ---------- */

.fr-card{display:grid;gap:3px;text-decoration:none;color:var(--ink)}
.fr-card img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:10px;margin-bottom:6px;transition:transform .3s}
.fr-card:hover img{transform:translateY(-2px)}
.fr-card b{font-family:var(--f-pt);font-size:15.5px}
.fr-card span{font-size:13px;color:#77716A;line-height:1.45}

/* ---------- 토글이: 객석과 유령 분리 (켜면 유령이 앉음, 끄면 양말만) ---------- */

/* 10/11 토글이 소개: 양말 없이 빈 의자 → 켜면 토글이, 카드는 카피만 */

/* ---------- 10/11 움직임 멈춤 버튼 (접근성) ---------- */
.motion-btn{position:absolute;right:10px;bottom:10px;z-index:5;display:inline-flex;align-items:center;gap:5px;font:600 12.5px Pretendard,sans-serif;color:#3A3633;background:rgba(255,255,255,.92);border:1px solid rgba(58,54,51,.35);border-radius:99px;padding:5px 11px;cursor:pointer;opacity:.75;transition:opacity .2s}
.motion-btn:hover,.motion-btn:focus-visible{opacity:1}
.motion-btn span{font-size:10px}
.is-paused,.is-paused *{animation-play-state:paused!important}
.orbit .motion-btn{right:0;bottom:24px}
.uh-stage .motion-btn{bottom:auto;top:10px}

/* ---------- 10/11 대비 손보기: 작은 회색 글씨 키우고 진하게 ---------- */
.note-s,.facts,.bmeta,.fr-card span{color:#77716A}
.note-s{font-size:13.5px}
.uni-skin .uni-hero .eyebrow{color:rgba(58,54,51,.78)!important}

/* ---------- 10/11 블로그 대표 배너: 썸네일 A안 한 장 / 글 상세: 제목은 위에 있으니 썸네일 제목 숨김 ---------- */
.bf-slide{grid-template-columns:1fr}
.bf-slide .tthumb.a .ta-t,.bf-slide .tthumb.a .ta-cat{display:grid}
.bf-slide .tthumb.a .ta-cat{display:inline-block}
.bf-slide .tthumb.a::after{background:linear-gradient(to top,rgba(58,54,51,.88) 0%,rgba(58,54,51,.5) 34%,rgba(58,54,51,.12) 64%,rgba(58,54,51,.25) 100%)}
.bf-slide .tthumb.big .ta-t{font-size:clamp(24px,2.6vw,34px);left:40px;bottom:84px}
.bf-ctrl{left:40px;bottom:26px}
.pv-thumb .tthumb.a .ta-t{display:none}
.pv-thumb .tthumb.a::after{background:linear-gradient(to bottom,rgba(58,54,51,.35),transparent 30%)}

/* ---------- 10/11 Action (뮤지컬 모닝클럽 · 취향원정대) ---------- */
.phero.act{background:linear-gradient(120deg,#3A3633 0%,#3A3633 60%,#3A3633 100%)}

.act-posts{padding:24px 0 72px}
.act-posts .section-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:18px}

/* 10/11: 버튼 색 변수를 전역으로 (Action 등 유니스텝 밖에서도) · 비전 목록 제목 칸 넓힘 */
:root{--u-ink:#3A3633;--u-o:#EE7B2F;--u-sh:rgba(58,54,51,.22);--u-line:rgba(58,54,51,.55)}

/* ---------- 10/11 브랜드 스토리 구조 (Action): 사진 머리 → WHY·HOW·WHAT 큰 문장 + 사진 + 짧은 글 → 다음 걸음 ---------- */
.st-hero{position:relative;color:#FFFFFF;padding:120px 0 84px;background:linear-gradient(to top,rgba(58,54,51,.86),rgba(58,54,51,.45) 60%,rgba(58,54,51,.55)),var(--bg,none) center/cover no-repeat,#3A3633}
.st-hero.dark{background:radial-gradient(120% 120% at 80% 0,#3A3633 0,#3A3633 70%)}
.st-hero h1{color:#FFFFFF;font-size:clamp(32px,4.4vw,56px);line-height:1.22;margin:0 0 18px}
.st-hero h1 em{background-image:linear-gradient(transparent 62%,rgba(255,211,110,.55) 62%,rgba(255,211,110,.55) 90%,transparent 90%)}
.st-hero .eyebrow{color:#FFD36E!important;letter-spacing:.24em;font-size:12px}
.st-hero .psub{color:rgba(255,255,255,.82);font-size:17px;max-width:36em}
.st-hero .crumbs a{color:rgba(255,255,255,.75);text-decoration:none}

.mmc-tpl{margin:0;border:1px solid var(--ds-line);border-radius:18px;background:#FFFFFF;overflow:hidden}
.mmc-tpl figcaption{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line);font-family:var(--f-pt)}
.mmc-tpl pre{margin:0;padding:16px 18px;white-space:pre-wrap;word-break:keep-all;font:500 14px/1.7 Pretendard,sans-serif;color:#3A3633;background:#F7F5F0;max-height:300px;overflow:auto}

/* ---------- 10/11 유니스텝 첫 화면 자막 ON/OFF (토글이 소개에서 옮김) ---------- */
.uh-stage-wrap{display:grid;justify-items:center;gap:14px;align-self:end;padding-bottom:22px}
.uh-stage .st-seat,.uh-stage .st-ghost{position:absolute;left:56%;bottom:-2px;width:50%;transform:translateX(-50%);filter:drop-shadow(0 8px 0 rgba(58,54,51,.18))}
.uh-stage .st-ghost{transition:opacity .45s,transform .55s cubic-bezier(.3,1.5,.5,1)}
.uh-stage.off .st-ghost{opacity:0;transform:translate(-50%,-18px) scale(.96)}
.uh-stage .st-screen{transition:background .4s,color .4s}
.uh-stage.off .st-screen{background:rgba(0,0,0,.35);border-color:rgba(255,255,255,.08)}
.uh-stage.off .st-line,.uh-stage.off .st-lang{opacity:0}
.st-offmsg{position:absolute;inset:0;display:grid;place-content:center;font-size:13px;color:rgba(255,255,255,.55);opacity:0;transition:opacity .3s;pointer-events:none}
.uh-stage.off .st-offmsg{opacity:1}
.st-screen{position:absolute}
.tg-switch.hero{background:#F7F5F0}

/* 10/12 메인: 버튼·궤도 카드·셀링 포인트·숫자 띠·관객 후기·로고 2줄·액션+블로그 */

.station.on .dot{fill:var(--act)}.station.on .lb{fill:#EE7B2F}
.orbit-card{margin:8px auto 0;max-width:420px;min-height:118px;border:1px solid rgba(255,255,255,.18);border-radius:18px;padding:16px 18px;background:rgba(255,255,255,.04);color:#FFFFFF}
.orbit-card .oc{display:grid;gap:4px}
.orbit-card .oc-k{font-size:11px;letter-spacing:.2em;color:var(--gold-line)}
.orbit-card b{font-size:18px}
.orbit-card span{color:rgba(255,255,255,.72);font-size:14px}
.orbit-card a{color:#EE7B2F;font-size:14px;font-weight:600;text-decoration:none;margin-top:4px}

.roll.logos.two{padding:8px 0}
.roll.logos.two+.roll.logos.two{margin-top:6px}

.orbit-card .oc[hidden]{display:none}

/* 10/12 유니스텝 실적 3칸 + 언어 한 줄 */
.us-nums.three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.us-nums.three div{display:grid;gap:6px;align-content:start}
.us-nums.three span{line-height:1.5}

@media (max-width:760px){.us-nums.three{grid-template-columns:1fr}}

/* ===== 10/12 /unistep 구조 확정 ===== */

.u2-pitch{padding:24px 0 40px}
.pitch{display:grid;grid-template-columns:1fr 1.15fr;gap:22px;background:var(--u-o);border-radius:18px;padding:34px;border:1px solid var(--u-line);box-shadow:none;color:var(--u-ink)}
.pitch .ab-k{color:var(--u-ink)}
.uni-skin .pitch h2{font-weight:700!important;font-size:clamp(30px,4vw,48px);line-height:1.2;margin:0 0 14px}
.pitch h2 em{background:linear-gradient(transparent 58%,var(--u-y) 58%)}
.pitch-h p{font-size:16.5px;margin:0 0 18px}
.pack{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.pack li{display:grid;grid-template-columns:38px 1fr;gap:2px 10px;align-items:center;background:#F7F5F0;border:1px solid var(--u-line);border-radius:18px;padding:12px 14px}
.pack li>.n{grid-column:1;grid-row:1/3;font-weight:700;color:var(--u-o);font-family:'Paperlogy',sans-serif}
.pack b{grid-column:2;font-size:16px;color:var(--u-ink)}.pack span:not(.n){grid-column:2;font-size:13.5px;color:#77716A}
.vs{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
.vs>div{border-radius:18px;padding:18px 22px;border:1px solid var(--u-line);box-shadow:none;color:var(--u-ink)}
.vs .t{font-weight:700;font-size:13px;letter-spacing:.06em}
.vs ul{margin:8px 0 0;padding-left:18px;font-size:15px}
.vs-a{background:#FFFFFF;color:#77716A}.vs-a ul{text-decoration:line-through;text-decoration-color:rgba(58,54,51,.3)}
.vs-b{background:var(--u-y)}
.u2-new{padding:20px 0 50px}
.newbox{display:grid;grid-template-columns:1.1fr 1fr auto;gap:24px;align-items:center;background:#FFFFFF;border:1px dashed var(--u-line);border-radius:18px;padding:26px 30px}
.newbox h2{margin:0 0 6px;font-size:clamp(22px,2.4vw,28px)}.newbox p{margin:0;color:#77716A}
.newlist{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.newlist li{background:var(--u-cream);border-radius:18px;padding:10px 14px;display:grid}
.newlist b{color:var(--u-ink)}.newlist span{font-size:13.5px;color:#77716A}
.u2-voices{padding:56px 0}
.vcards4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:18px 0 14px}
.vc4{margin:0;border-radius:18px;padding:22px;border:1px solid var(--u-line);box-shadow:none;display:flex;flex-direction:column;justify-content:space-between;gap:14px;min-height:190px}
.vc4 blockquote{margin:0;font-size:16px;font-weight:600;line-height:1.5}
.vc4 figcaption{font-size:13px;opacity:.75}
.vc4.c0{background:var(--u-o);color:#FFFFFF}.vc4.c1{background:var(--u-cream);color:var(--u-ink)}.vc4.c2{background:var(--u-y);color:var(--u-ink)}.vc4.c3{background:var(--u-ink);color:#F7F5F0}
.u2-voices .fr-more{display:inline-block}
@media (max-width:900px){.pitch,.vs,.newbox{grid-template-columns:1fr}.vcards4{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.vcards4{grid-template-columns:1fr}}

/* 10/12 유니스텝 도입 문의 신청폼 */
.ucform{background:#FFFFFF;border:1px solid var(--u-line);border-radius:18px;box-shadow:none;padding:22px;display:grid;gap:12px;color:var(--u-ink)}
.ucform fieldset{border:0;margin:0;padding:0;display:grid;gap:6px}
.ucform legend{font-weight:700;margin-bottom:6px}
.ucform fieldset label{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:9px 12px;border:1px solid rgba(58,54,51,.25);border-radius:10px;cursor:pointer;font-weight:600}
.ucform fieldset label:has(input:checked){border-color:var(--u-ink);background:var(--u-cream)}
.ucform fieldset small{font-weight:400;color:#77716A}
.ucform fieldset em{font-style:normal;font-size:11.5px;background:var(--u-y);border-radius:999px;padding:1px 8px}
.ucf-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ucform label{display:grid;gap:4px;font-size:13.5px;font-weight:600}
.ucform input:not([type=checkbox]),.ucform textarea{font:inherit;font-weight:400;padding:10px 12px;border:1px solid rgba(58,54,51,.3);border-radius:10px;background:#F7F5F0;color:var(--u-ink)}
.ucform input[type=checkbox]{accent-color:var(--u-o);width:18px;height:18px}
.ucf-msg{font-size:13px;color:#77716A}
@media (max-width:700px){.ucf-row{grid-template-columns:1fr}}

/* ===== 10/12 /about 구조 확정 (오롯 톤: 크림·브라운·주황·노랑, 1.5px 선, 18 라운드, 3px 그림자) ===== */
.ab2-hero{background:#3A3633;color:#FFFFFF;padding:72px 0 64px}
.ab2-hero .eyebrow{color:#EE7B2F}
.ab2-hero h1{font-family:'Paperlogy',Pretendard,sans-serif;font-size:clamp(30px,4.4vw,54px);line-height:1.25;margin:10px 0 18px;color:#FFFFFF!important}
.ab2-hero h1 em{font-style:normal;background:linear-gradient(transparent 60%,rgba(255,211,110,.55) 60%)}
.ab2-hero .psub{color:rgba(255,255,255,.75);font-size:17px;max-width:760px}
.ab2-frame,.ab2-ev{padding:72px 0 10px}
.ab2-frame h2,.ab2-orb h2{font-family:'Paperlogy',Pretendard,sans-serif;font-weight:600;color:#3A3633;font-size:clamp(24px,3vw,36px);line-height:1.3;margin:0 0 22px}
.ab2-frame h2 em{font-style:normal;background:linear-gradient(transparent 58%,#FFD36E 58%)}

.ab2-f3{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;counter-reset:f}
.ab2-f3 li{counter-increment:f;background:#FFFFFF;border:1px solid rgba(58,54,51,.55);border-radius:18px;box-shadow:none;padding:16px 16px 22px;display:grid;gap:6px;color:#3A3633;align-content:start}
.ab2-f3 li b{font-family:'Paperlogy',Pretendard,sans-serif;font-size:21px;margin-top:12px}
.ab2-f3 li b::before{content:"0" counter(f);display:block;font-size:13px;color:#EE7B2F;margin-bottom:2px}
.ab2-f3 li>span{font-size:14.5px;color:#77716A}
.ab2-f3 .ill{aspect-ratio:1.3;position:relative;overflow:hidden;border-radius:18px;background:#FFF3E6;border:1px solid rgba(58,54,51,.18)}
.ab2-f3 .ill.type{display:grid;place-items:center}
.ab2-f3 .ill.type .scr{width:78%;padding:9% 0;border-radius:10px;background:#3A3633;text-align:center;color:#F7F5F0;font-size:15px;line-height:1.5}
.ab2-f3 .ill.type .scr i{font-style:normal;color:#FFD36E}
.ab2-f3 .tw{display:inline-block;overflow:hidden;white-space:nowrap;vertical-align:bottom;width:0;animation:ab2type 5s steps(12) infinite;border-right:2px solid #EE7B2F}
@keyframes ab2type{0%{width:0}55%,85%{width:7.2em}100%{width:0}}
.ab2-f3 .ill.sw{display:grid;place-items:center}
.ab2-f3 .ill.sw .tg{width:40%;height:28%;border-radius:999px;background:#E4E0D9;border:1px solid rgba(58,54,51,.55);position:relative;animation:ab2bg 4s ease-in-out infinite}
.ab2-f3 .ill.sw .tg::after{content:"";position:absolute;top:8%;left:4%;width:42%;height:84%;border-radius:50%;background:#FFFFFF;border:1px solid rgba(58,54,51,.55);animation:ab2knob 4s ease-in-out infinite}
.ab2-f3 .ill.sw .lb{position:absolute;bottom:12%;left:0;right:0;text-align:center;color:#3A3633;font-size:12px;letter-spacing:.2em;font-weight:700}
.ab2-f3 .ill.sw .lb::after{content:"OFF";animation:ab2lbl 4s steps(1) infinite}
@keyframes ab2bg{0%,35%{background:#E4E0D9}50%,90%{background:#EE7B2F}100%{background:#E4E0D9}}
@keyframes ab2knob{0%,35%{left:4%}50%,90%{left:52%}100%{left:4%}}
@keyframes ab2lbl{0%{content:"OFF"}45%{content:"ON"}92%{content:"OFF"}}
.ab2-f3 .ill.seats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6%;padding:14% 12%;align-content:center}
.ab2-f3 .ill.seats span{aspect-ratio:1;border-radius:30% 30% 12% 12%;background:#E4E0D9;animation:ab2lit 4s ease-in-out infinite}
.ab2-f3 .ill.seats span:nth-child(3n){animation-delay:.6s}.ab2-f3 .ill.seats span:nth-child(4n){animation-delay:1.3s}.ab2-f3 .ill.seats span:nth-child(5n+2){animation-delay:2s}
@keyframes ab2lit{0%,100%{background:#E4E0D9}50%{background:#EE7B2F}}
.ab2-orb{padding:72px 0 10px}
.ab2-orb .orb{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center;background:#3A3633;color:#F7F5F0;border-radius:18px;box-shadow:none;padding:44px}
.ab2-orb .orb h2{color:#F7F5F0}.ab2-orb .ab-k{color:#FFD36E}
.ab2-orb svg{width:100%;max-width:420px;height:auto;display:block;margin:auto;overflow:visible}
.ab2-orb .ring{fill:none;stroke:#FFD36E;stroke-opacity:.3}.ab2-orb .ring.m{stroke-opacity:.7}
.ab2-orb .core{fill:#F7F5F0}.ab2-orb .ct{fill:#3A3633;font-size:15px;font-weight:700;text-anchor:middle}
.ab2-orb .st circle{fill:#77716A;transition:fill .3s}.ab2-orb .st.on circle{fill:#EE7B2F}
.ab2-orb .st text{fill:#F7F5F0;font-size:16px;font-weight:700;text-anchor:middle}
.ab2-orb .lead{color:rgba(247,245,240,.75);margin:0 0 18px}
.ab2-orb .els{display:grid;gap:8px}
.ab2-orb .el{display:grid;grid-template-columns:28px 1fr;gap:2px 10px;padding:12px 14px;border-radius:18px;border:1px solid rgba(58,54,51,.3);color:#F7F5F0;text-decoration:none}
.ab2-orb .el b{font-size:16px}.ab2-orb .el span:not(.n){grid-column:2;font-size:13.5px;color:rgba(247,245,240,.72)}
.ab2-orb .el .n{grid-row:1/3;color:#FFD36E;font-weight:700}
.ab2-orb .el.on{border-color:#FFD36E;background:rgba(255,211,110,.12)}
.ab2-ev .evA{display:grid;grid-template-columns:1.4fr 1fr;gap:16px}
.ab2-ev .evA-hero{background:#3A3633;color:#F7F5F0;border-radius:18px;box-shadow:none;padding:32px}
.ab2-ev .k{color:#FFD36E;font-size:13px;font-weight:700}
.ab2-ev .score{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin:10px 0 6px;font-family:'Paperlogy',Pretendard,sans-serif}
.ab2-ev .score .was{font-size:clamp(28px,4vw,42px);color:rgba(58,54,51,.5);text-decoration:line-through}
.ab2-ev .score .arr{font-size:28px;color:#FFD36E}
.ab2-ev .score .big{font-size:clamp(60px,8.5vw,104px);line-height:1;color:#FFD36E}
.ab2-ev .score small{font-size:.4em;margin-left:2px}
.ab2-ev .evA-hero p{margin:0 0 18px;font-size:18px;color:#F7F5F0}
.ab2-ev .up{font-style:normal;color:#FFD36E;font-weight:700}
.ab2-ev .bar{display:grid;gap:8px;margin-bottom:10px}
.ab2-ev .bar span{display:block;height:26px;border-radius:10px;width:var(--w);position:relative}
.ab2-ev .bar .pre{background:rgba(58,54,51,.3)}.ab2-ev .bar .post{background:#EE7B2F}
.ab2-ev .bar i{position:absolute;right:10px;top:50%;transform:translateY(-50%);font-style:normal;font-size:12px;color:#FFFFFF}
.ab2-ev .evA-hero small{color:rgba(58,54,51,.6);font-size:12px}
.ab2-ev .evA-voice{margin:0;background:#FFF3E6;border:1px solid rgba(58,54,51,.55);border-radius:18px;box-shadow:none;padding:28px;display:flex;flex-direction:column;justify-content:space-between;color:#3A3633}
.ab2-ev .evA-voice p{font-size:20px;line-height:1.5;font-weight:700;margin:0}
.ab2-ev .evA-voice cite{font-style:normal;color:#77716A;font-size:14px;margin-top:16px}
.ab2-ev .evA-small{display:grid;grid-template-columns:repeat(3,1fr);margin-top:12px;border-top:1px solid rgba(58,54,51,.25)}
.ab2-ev .evA-small div{padding:14px 4px;font-size:13.5px;color:#77716A}
.ab2-ev .evA-small b{display:block;font-family:'Paperlogy',Pretendard,sans-serif;font-size:24px;color:#3A3633}
.ab2-hist{padding:40px 0 0}
.ab2-next{padding:40px 0 80px}
.ab2-next .wrap{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.ab2-next a{display:grid;gap:4px;padding:18px;border-radius:18px;border:1px solid rgba(58,54,51,.55);box-shadow:none;background:#FFFFFF;color:#3A3633;text-decoration:none}
.ab2-next a span{font-size:12.5px;color:#EE7B2F;font-weight:700}.ab2-next a b{font-size:16px}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media (prefers-reduced-motion:reduce){.ab2-f3 .ill *,.ab2-f3 .ill *::after{animation:none!important}}
@media (max-width:900px){.ab2-f3,.ab2-orb .orb,.ab2-ev .evA{grid-template-columns:1fr}.ab2-next .wrap{grid-template-columns:1fr 1fr}.ab2-orb .orb{padding:26px 18px}}

/* ===== 10/12 /action 한 페이지: 좌우로 나눈 영역에 WHY·HOW·WHAT 나란히 ===== */

.rk{margin:0;font-family:'Paperlogy',Pretendard,sans-serif;font-weight:700;font-size:22px;color:#EE7B2F;line-height:1.2}
.rk span{display:block;font-family:Pretendard,sans-serif;font-size:13px;font-weight:600;color:#77716A;margin-top:4px}

.asteps{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px;counter-reset:s}
.asteps li{counter-increment:s;display:grid;grid-template-columns:28px 1fr;gap:0 10px;font-size:14px;color:#77716A}
.asteps li::before{content:counter(s);grid-row:1/3;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:#FFF3E6;color:#EE7B2F;font-weight:700;font-size:13px}
.asteps li b{color:#3A3633;font-size:15px}
.afacts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
.afacts div{background:#F7F5F0;border-radius:10px;padding:10px 12px;font-size:12.5px;color:#77716A}
.afacts b{display:block;font-family:'Paperlogy',Pretendard,sans-serif;font-size:24px;color:#3A3633}

.alog{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.alog a{display:flex;justify-content:space-between;gap:10px;padding:12px 14px;border-radius:10px;border:1px solid rgba(58,54,51,.25);color:#3A3633;text-decoration:none;font-weight:600}
.alog a span{color:#EE7B2F;font-size:13px;white-space:nowrap}

.amore{margin-top:12px;background:#FFFFFF}
.amore .mmc-tpl pre{max-height:220px;overflow:auto}
.acsr{display:grid;gap:4px;margin-top:20px;padding:20px 22px;border-radius:18px;background:#3A3633;color:#FFFFFF;text-decoration:none;box-shadow:none}
.acsr span{color:#FFD36E;font-size:13px;font-weight:700}.acsr b{font-size:17px}

/* 10/12 블로그 하위 분류 */
.b-cats a.sub{padding-left:28px;font-size:14px}
.b-cats a.sub::before{content:"ㄴ";margin-right:6px;opacity:.5}
.b-cats a.sub{position:relative;padding-left:46px}.b-cats a.sub::before{position:absolute;left:26px;margin:0}

/* ===== 10/13 내용 정리 ===== */
.whw-lines{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:6px}
.whw-lines li{font-size:16px;color:var(--sub);padding-left:16px;position:relative}
.whw-lines li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--act,#EE7B2F)}
.whw-lines b{color:var(--ink)}
.fnums{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0 0 22px}
.fnums div{padding:12px 0;border-top:1px solid var(--line)}
.fnums b{display:block;font-family:'Paperlogy',Pretendard,sans-serif;font-size:30px;line-height:1.1;color:var(--ink)}
.fnums small{font-size:.5em;margin-left:2px}
.fnums span{font-size:13.5px;color:var(--sub)}
.ha-split{display:grid;grid-template-columns:1fr 1fr;border-radius:18px;overflow:hidden;min-height:300px}
.ha-half{position:relative;display:grid;align-content:end;gap:4px;padding:26px;color:#FFFFFF;text-decoration:none;background:#3A3633 var(--bg) center/cover}
.ha-half::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05) 25%,rgba(0,0,0,.72));transition:background .3s}
.ha-half:hover::before{background:linear-gradient(180deg,rgba(0,0,0,.15) 10%,rgba(0,0,0,.8))}
.ha-half>*{position:relative}
.ha-half .k{font-size:11.5px;letter-spacing:.2em;font-weight:700;opacity:.85}
.ha-half b{font-family:'Paperlogy',Pretendard,sans-serif;font-size:28px}
.ha-half span:last-child{font-size:14.5px;opacity:.85;max-width:360px}
.ha-half+.ha-half{border-left:2px solid rgba(255,255,255,.6)}
.home-blog{padding-top:0}
.hb-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.ab2-orb .orb-sub{margin:-12px 0 14px;opacity:.75}
.ab2-orb .el{grid-template-columns:14px 1fr}
.ab2-orb .el .n{width:7px;height:7px;border-radius:50%;background:currentColor;margin-top:.55em;opacity:.7}
@media (max-width:760px){.ha-split,.hb-grid{grid-template-columns:1fr}.ha-half+.ha-half{border-left:0;border-top:2px solid rgba(255,255,255,.6)}}
.hb-grid .tthumb{aspect-ratio:16/8}

/* ===== 10/13 썸네일 규격: 어디에 넣어도 같은 틀·같은 비율, 사진은 늘 잘라 채움(찌그러짐 없음) =====
   카드 3:2 · 가로 배너 21:9(모바일 4:3) · 글 머리 2:1 · 사진은 위쪽 35% 기준으로 자름 */
.tthumb{aspect-ratio:3/2}
.pv-thumb .tthumb{aspect-ratio:2/1}
.hb-grid .tthumb{aspect-ratio:2/1}
.ta-ph,.jimg img,.fr-card img{object-fit:cover!important;object-position:center 35%}
.jimg.tt{aspect-ratio:auto;border:0;border-radius:18px;overflow:visible}
.jimg.tt .tthumb{aspect-ratio:3/2}
.jcard:hover .jimg.tt .ta-ph{transform:scale(1.04)}
.b-feat .bf-track{aspect-ratio:21/9;height:auto!important}
@media (max-width:640px){.b-feat .bf-track{aspect-ratio:auto}.bf-slide .tthumb{aspect-ratio:4/3}}
.jimg.tt img.ta-logo{width:auto!important;height:18px!important;object-fit:contain!important;transform:none!important}.jimg.tt img.ta-ph{width:100%;height:100%}

/* 10/13 비공개 상영관 */

/* ===== 10/13 메인 손보기 ===== */
.hero-copy .orbit-card{margin:26px 0 0;max-width:460px;min-height:0}
.orbit .orbit-card{display:none}
.fref1{display:grid;gap:14px;margin-top:8px}
.fr-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.fr-row .fr-card{display:grid;gap:2px;text-decoration:none;color:var(--ink)}
.fr-row .fr-card img{width:100%;aspect-ratio:3/2;border-radius:10px;margin-bottom:8px}
.fr-row .fr-card b{font-size:15px}.fr-row .fr-card span{font-size:13px;color:var(--sub)}
.fr-one{margin:4px 0 0;padding:18px 22px;border-radius:18px;background:#FFF3E6;border:0}
.fr-one p{margin:0 0 6px;font-family:'Paperlogy',Pretendard,sans-serif;font-size:clamp(17px,1.8vw,21px);line-height:1.5;color:var(--ink)}
.fr-one cite{font-style:normal;font-size:13px;color:var(--sub)}
.why1{font-size:16.5px;color:var(--ink)!important;line-height:1.7}
.urows{margin:0 0 8px;border-top:1px solid var(--line)}
.urows div{display:grid;grid-template-columns:150px 1fr;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.urows dt{font-weight:700;color:var(--ink)}.urows dd{margin:0;color:var(--sub);font-size:14.5px}
.usplit{display:grid;grid-template-columns:1fr 1fr;gap:0;border-radius:18px;overflow:hidden;margin-top:8px;margin-bottom:24px}
.us-half{display:grid;gap:6px;padding:30px 30px 28px;text-decoration:none;min-height:200px;align-content:end}
.us-half .k{font-size:12.5px;font-weight:700;letter-spacing:.06em;opacity:.8}
.us-half b{font-family:'Paperlogy',Pretendard,sans-serif;font-size:clamp(22px,2.4vw,28px)}
.us-half span:not(.k){font-size:14.5px;opacity:.8}
.us-half em{font-style:normal;font-weight:700;margin-top:10px}
.us-half.pro{background:#3A3633;color:#fff}.us-half.pro em{color:#FFD36E}
.us-half.aud{background:#EE7B2F;color:#fff}
.us-half:hover b{text-decoration:underline;text-underline-offset:4px}
.partners.last{padding:56px 0 72px}

@media (max-width:860px){.fr-row{grid-template-columns:1fr 1fr}.usplit{grid-template-columns:1fr}.urows div{grid-template-columns:1fr;gap:2px}}

/* ===== 10/13 /unistep 재배치 ===== */
.uni-skin .uni-hero{padding-top:36px!important}
.uni-skin .uni-hero .uh-copy{padding-top:0}
.uni-skin .uni-hero h1,.uni-skin .uni-hero .eyebrow{color:#FFFFFF!important}
.uni-skin .uni-hero h1 em{background:linear-gradient(transparent 60%,rgba(58,54,51,.35) 60%)}
.uni-skin .uni-hero .lead{color:rgba(255,255,255,.9)!important}
.udoors{padding-top:48px}
.u2-mv2{padding:64px 0 40px;border-top:1px solid var(--line)}
.mv2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:48px;align-items:center}
.mv2 h2{font-size:clamp(24px,2.8vw,34px);line-height:1.35;margin:0 0 14px}
.mv2 p{color:var(--sub);font-size:16.5px;margin:0}
.mv-flow{list-style:none;margin:0;padding:0;position:relative;display:grid;gap:22px}
.mv-flow::before{content:"";position:absolute;left:11px;top:14px;bottom:14px;width:2px;background:repeating-linear-gradient(#E4E0D9 0 6px,transparent 6px 11px)}
.mv-flow li{position:relative;display:grid;grid-template-columns:24px 1fr auto;gap:2px 16px;align-items:center}
.mv-flow i{grid-row:1/3;width:24px;height:24px;border-radius:50%;background:#fff;border:2px solid #E4E0D9;position:relative;z-index:1}
.mv-flow li.on i{border-color:#EE7B2F;background:#EE7B2F;box-shadow:0 0 0 5px #FFF3E6}
.mv-flow b{font-size:18px;color:var(--ink)}.mv-flow span{grid-column:2;font-size:14px;color:var(--sub)}
.mv-flow em{grid-row:1/3;grid-column:3;font-style:normal;font-size:12px;font-weight:700;border:1px solid #E4E0D9;border-radius:999px;padding:2px 10px;color:var(--sub)}
.mv-flow li.on em{border-color:#EE7B2F;color:#C85A12}
/* 제작사 소구: 진한 주황 판 → 흰 판 + 기술 그림처럼 선으로 잇는 단계 */
.pitch{background:#FFFFFF!important;color:var(--ink)!important;border:1px solid var(--line)!important}
.pitch .ab-k{color:#EE7B2F!important}
.pitch h2 em{background:linear-gradient(transparent 58%,#FFD36E 58%)!important}
.pack{position:relative}
.pack::before{content:"";position:absolute;left:32px;top:24px;bottom:24px;width:2px;background:#FFF3E6}
.pack li{position:relative;background:#FFFFFF!important;border:1px solid var(--line)!important}
.pack li>.n{position:relative;z-index:1;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#FFF3E6;color:#C85A12!important;font-size:12.5px}
.vs-b{background:#FFF3E6!important}
@media (max-width:900px){.mv2{grid-template-columns:1fr;gap:28px}}

/* ===== 10/13-3 손보기 ===== */
.btn.ticket{border:0!important;box-shadow:none!important}
/* Action: 가로 꽉 찬 배너 + 아코디언 */
.aband{padding:0 0 40px}
.aband-ban{position:relative;min-height:340px;display:flex;align-items:flex-end;background:#3A3633 var(--bg) center 35%/cover;color:#fff;scroll-margin-top:120px}
.aband-ban::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 30%,rgba(0,0,0,.65))}
.aband-ban .wrap{position:relative;display:grid;gap:6px;padding-bottom:34px}
.aband-ban .k{font-size:12px;letter-spacing:.2em;font-weight:700;color:#FFD36E}
.aband-ban b{font-family:'Paperlogy',Pretendard,sans-serif;font-size:clamp(30px,4vw,44px)}
.aband-ban span:last-child{font-size:16px;opacity:.85}
.aacc-list{display:grid;gap:0;margin-top:8px}
.aacc{border-bottom:1px solid var(--line)}
.aacc summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:110px 1fr 24px;align-items:center;gap:12px;padding:20px 4px}
.aacc summary::-webkit-details-marker{display:none}
.aacc summary b{font-family:'Paperlogy',Pretendard,sans-serif;font-size:20px;color:#EE7B2F}
.aacc summary span{font-size:16px;color:var(--ink);font-weight:600}
.aacc summary::after{content:"+";font-size:22px;color:var(--sub);text-align:right}
.aacc[open] summary::after{content:"–"}
.aacc-in{padding:0 4px 24px 126px}
.aacc-in .big{font-size:20px;line-height:1.45;margin:0 0 10px}
.aacc-in .big b{background:linear-gradient(transparent 58%,#FFD36E 58%)}
.aacc-in p{color:var(--sub);font-size:15.5px}
@media (max-width:760px){.aacc summary{grid-template-columns:1fr 24px}.aacc summary b{grid-column:1}.aacc summary span{grid-column:1;grid-row:2;font-size:14.5px}.aacc summary::after{grid-row:1/3;grid-column:2}.aacc-in{padding-left:4px}}
/* 블로그: 하위 분류 둘째 줄 작은 글씨, 썸네일 로고 없앰 */
.b-cats a small{display:block;flex-basis:100%;font-size:12px;color:var(--sub);font-weight:400;margin-top:2px}
.b-cats a:has(small){flex-wrap:wrap}
.ta-logo{display:none!important}
/* 유니스텝 */
.uni-skin .uni-hero:not(.sub) .uh-copy{align-self:center;padding:24px 0 40px!important}
.utech .ut-grid{position:relative}
.ut-copy{position:absolute;right:0;bottom:-28px;margin:0!important;font-size:11.5px!important;opacity:.7}
.vs .t{font-size:15px}
.vs ul{font-size:17px!important;line-height:1.8}
.vs-a{background:#F7F5F0!important;color:#9C978F!important;border-style:dashed!important}
.vs-a .t{color:#9C978F}
.vs-a ul{text-decoration:line-through;text-decoration-color:rgba(58,54,51,.35)}
.vs-b{font-weight:600}
.vc4{border:0!important}
/* 메인: 관객 반쪽 토글이 (커서를 올렸을 때만 움직임) */
.us-half.aud{position:relative}
.us-tgl{position:absolute;right:22px;top:18px;width:74px;height:80px}
.us-tgl img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.us-tgl .mv{opacity:0}
.us-half.aud:hover .us-tgl .mv,.us-half.aud:focus-visible .us-tgl .mv{opacity:1}
.us-half.aud:hover .us-tgl .st,.us-half.aud:focus-visible .us-tgl .st{opacity:0}
/* 메인 첫 화면: 궤도 쪽에 금빛·노랑을 살짝 섞은 그라데이션 */
.space{background:radial-gradient(60% 70% at 78% 45%,rgba(255,211,110,.16) 0%,rgba(238,123,47,.08) 38%,rgba(58,54,51,0) 70%),linear-gradient(160deg,#3A3633 0%,#2F2B28 100%)!important}
.aacc-in .afacts{max-width:620px}
.aacc-in .chips{display:flex;flex-wrap:wrap;gap:6px}
.aacc-in .chips span{font-size:12.5px;border:1px solid #E4E0D9;border-radius:999px;padding:3px 10px;color:#3A3633}
.aacc-in blockquote{margin:12px 0 0;padding:12px 14px;border-radius:10px;background:#FFF3E6;font-size:14.5px;color:#3A3633;max-width:680px}
.aacc-in blockquote cite{display:block;font-style:normal;font-size:12.5px;color:#77716A;margin-top:4px}
.aacc-in .alog{max-width:620px}
.aacc-in .asteps{max-width:620px}

/* ===== 10/13-4 ===== */
/* 메인 첫 화면: 노랑 그라데이션 빼고 궤도 선을 금빛으로, 바깥 원·반짝이, 계속 돌아감 */
.space{background:linear-gradient(160deg,#3A3633 0%,#2F2B28 100%)!important}
.rings circle{stroke:#D8B46A!important;stroke-opacity:.35!important}
.rings circle.main{stroke-opacity:.8!important}
.rings circle.far{stroke-opacity:.2!important}
.rings circle.far2{stroke-opacity:.12!important;stroke-dasharray:2 6}
#deco circle{fill:#D8B46A!important;opacity:.85}
.orbit2d .twinkle circle{fill:#F3D79A;animation:twk 3.2s ease-in-out infinite}
.orbit2d .twinkle circle:nth-child(2){animation-delay:.6s}.orbit2d .twinkle circle:nth-child(3){animation-delay:1.3s}.orbit2d .twinkle circle:nth-child(4){animation-delay:2s}.orbit2d .twinkle circle:nth-child(5){animation-delay:2.5s}.orbit2d .twinkle circle:nth-child(6){animation-delay:.9s}
@keyframes twk{0%,100%{opacity:.15}50%{opacity:1}}
.station text{paint-order:stroke;stroke:#34302D;stroke-width:5px;stroke-linejoin:round}
.station .en{fill:#D8B46A!important}
@media (prefers-reduced-motion:reduce){.orbit2d .twinkle circle{animation:none}}
/* 유니스텝 이야기 구간: 다른 바탕 */
.feature.uni-band{background:#FFF3E6;padding:64px 0 24px;margin-top:40px}
.feature.uni-band .fgrid{margin-bottom:28px}
.feature.uni-band .chip.o{background:#EE7B2F;color:#fff}
/* 작품 배너: 밝은 톤 + 옅은 그림자 */
.wb{background:#FFFFFF!important;border:0!important;box-shadow:0 14px 40px rgba(58,54,51,.08)!important}
.wb h2{color:#3A3633!important}
.wb h2 em{background-image:linear-gradient(transparent 60%,#FFD36E 60%)!important}
.wb-copy p{color:#77716A!important}
.wb .chip{background:#FFF3E6!important;color:#C85A12!important}
.wb-go a{color:#3A3633!important}
/* Action */
.aband-ban{min-height:240px!important}
.aband-ban::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#3A3633 0%,rgba(58,54,51,.55) 22%,rgba(58,54,51,0) 45%,rgba(58,54,51,0) 60%,rgba(58,54,51,.6) 82%,#3A3633 100%);pointer-events:none}
.aband-ban .wrap{z-index:1}
.acsr{background:#FFFFFF!important;color:#3A3633!important;border:1px solid var(--line);box-shadow:none!important;margin-bottom:56px}
.acsr span{color:#C85A12!important}
.acsr:hover,.acsr:focus-visible{border-color:#3A3633}
.acsr:hover b{color:#3A3633!important;text-decoration:underline;text-underline-offset:4px}
.st-hero .hero-cta{margin-top:22px;display:flex;gap:10px;flex-wrap:wrap}
/* 유니스텝 후기 원문 */
.vc4 .vl{font-size:11.5px;font-weight:700;letter-spacing:.08em;opacity:.75}
.vc4 .vko{margin:0;font-size:13px;opacity:.8;line-height:1.5}
.vc4 blockquote{font-size:15.5px}

/* 10/13 실사 배너 (가로 꽉 참) */
.pban{position:relative;display:flex;align-items:flex-end;min-height:360px;background:#3A3633 var(--bg) center 40%/cover;color:#fff;text-decoration:none;margin:24px 0 0}
.pban::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(34,31,29,.82) 0%,rgba(34,31,29,.45) 45%,rgba(34,31,29,.1) 80%)}
.pban .wrap{position:relative;display:grid;gap:8px;padding-top:40px;padding-bottom:40px;width:100%}
.pban .k{font-size:12px;letter-spacing:.18em;font-weight:700;color:#FFD36E}
.pban b{font-family:'Paperlogy',Pretendard,sans-serif;font-size:clamp(24px,3.2vw,40px);line-height:1.3}
.pban em{font-style:normal;font-size:15px;font-weight:700;opacity:.9}
.pban:hover em{text-decoration:underline;text-underline-offset:4px}
.feature.uni-band{padding-top:0}
.feature.uni-band .pban{margin:0 0 56px}

/* 10/13 번역 특화 구간 */
.utech.trans{background:#FFF3E6;border-top:0}
.utech.trans .ut-fig .out rect{fill:#FFFFFF}
.tr-rows{margin:18px 0 14px}
.tr-q{margin:0;padding:12px 16px;border-left:3px solid #EE7B2F;background:#FFFFFF;border-radius:0 10px 10px 0;font-size:15px;color:var(--ink)}
.tr-q cite{display:block;font-style:normal;font-size:12.5px;color:var(--sub);margin-top:4px}
@media (max-width:860px){.utech.trans .ut-fig{order:2}}

/* 10/13 함께한 기업·기관: 블럭 없이 가로 넓게, 2행 격자 하나가 같은 속도로 흐름 */
.roll.logos.grid2{padding:8px 0}
.roll.logos.grid2 .roll-track{animation:roll 70s linear infinite}
.roll.logos.grid2 .dup{display:flex}
.lg2{display:grid;grid-auto-flow:column;grid-template-rows:repeat(2,44px);gap:22px 64px;padding-right:64px;align-items:center}
.lg2 img{height:32px!important;width:auto;margin:0!important;opacity:.85}

/* ===== 10/13 간격 규칙: 구간 사이 여백을 넉넉하게 (데스크톱 104 · 모바일 64) ===== */
:root{--sec:104px;--sec-s:64px}
.section,.partners,.wbanner,.u2-mv2,.uni-stats,.u2-pitch,.utech,.u2-new,.u2-voices,.utoggle,.ufaq,.udoors,.howto,.works,.ucontact,.ablock,.act-posts,.ab2-frame,.ab2-orb,.ab2-ev,.aband{padding-top:var(--sec)!important;padding-bottom:var(--sec-s)!important}
.feature{padding-top:var(--sec)!important}
.feature .fgrid{margin-bottom:var(--sec)!important}
.fref1{margin-bottom:var(--sec)}
.pban{margin-top:var(--sec)!important}
.feature.uni-band{padding-top:0!important;padding-bottom:var(--sec)!important}
.feature.uni-band .pban{margin-top:0!important;margin-bottom:var(--sec)!important}
.usplit{margin-top:var(--sec-s)!important}
.home-blog{padding-top:0!important}
.sec-h{margin-top:var(--sec)!important}
@media (max-width:760px){:root{--sec:64px;--sec-s:40px}}

/* ===== 10/13 모바일 최적화 (≤760px) ===== */
html,body{max-width:100%;overflow-x:clip}
img,svg,video,iframe{max-width:100%}
@media (max-width:760px){
  .site-head .wrap{display:grid;grid-template-columns:1fr auto;gap:6px 10px;padding:8px 16px 0!important}
  .site-head .brands{grid-column:1}
  .site-head .head-cta{grid-column:2;justify-self:end}
  .site-head .nav{grid-column:1/-1;order:0!important;display:flex;flex-wrap:nowrap!important;gap:18px;overflow-x:auto;scrollbar-width:none;padding:2px 0 8px;margin:0;justify-content:flex-start!important}
  .site-head .nav::-webkit-scrollbar{display:none}
  .site-head .nav > li > a{white-space:nowrap;font-size:15.5px!important;padding:6px 0!important}
  .btn.ticket{min-height:36px!important;font-size:12.5px!important;padding:0 12px 0 6px!important}
  .btn.ticket img{height:24px!important}
  .notice-bar a{font-size:12px}
  .space .wrap{padding-top:150px!important}
  .space h1,.ab2-hero h1,.st-hero h1{font-size:clamp(28px,8.4vw,38px)!important;word-break:keep-all}
  .lead,.psub{font-size:15px!important}
  .orbit{max-width:340px;margin:24px auto 0}
  .hero-copy .orbit-card{max-width:none}
  .fr-row{grid-template-columns:1fr 1fr!important}
  .us-half{min-height:160px;padding:24px 22px}
  .pban{min-height:260px}
  .pban b{font-size:22px}
  .ha-split{min-height:0}.ha-half{min-height:220px}
  .wb{padding:26px 20px!important}
  .lg2{grid-template-rows:repeat(2,36px);gap:14px 40px}.lg2 img{height:24px!important}
  .section-head{flex-wrap:wrap;gap:6px}
  .aacc-in{padding-left:4px!important}
  .aband-ban{min-height:200px!important}
  .mv-flow em{display:none}
  .pitch{padding:22px!important}
  .ut-copy{position:static!important;margin-top:10px!important}
  .tr-rows div,.urows div{grid-template-columns:1fr!important}
}
@media (max-width:760px){
  .site-head .brands{grid-row:1;grid-column:1;display:flex!important;align-items:center;gap:8px;min-width:0}
  .site-head .brand.mark{display:flex!important}
  .site-head .brand.mark img{height:26px!important;width:auto!important}
  .site-head .head-cta{grid-row:1;grid-column:2;display:flex!important;align-items:center}
  .site-head .nav{grid-row:2}
}
@media (max-width:760px){
  .site-head .wrap{grid-template-columns:minmax(0,1fr) auto!important}
  .site-head .brands{width:auto!important;max-width:100%;overflow:hidden}
  .site-head .brand .bn{display:none!important}
  .site-head .brand{width:auto!important;flex:none}
}
@media (max-width:760px){
  .site-head .wrap > nav{grid-column:1/-1;grid-row:2;min-width:0}
  .site-head .nav{gap:16px!important}
  .site-head .nav > li > a{font-size:15px!important}
}
@media (max-width:760px){
  .notice-bar{display:none}
  .ab2-ev .evA-small b{font-size:19px}
  .ab2-ev .evA-small{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .ab2-ev .score .big{font-size:56px}
  .ab2-orb .orb{gap:20px}
  .fnums b{font-size:24px}
  .us-nums.three b{font-size:40px}
}
/* 10/13 모바일: 궤도 카드는 궤도 아래로 */
@media (max-width:760px){
  .space .wrap{display:flex!important;flex-direction:column}
  .space .hero-copy{display:contents}
  .space .orbit{order:2}
  .space .hero-copy .orbit-card{order:3;margin:16px 0 40px!important}
}

/* ===== 10/13 블로그 모바일: 분류는 줄바꿈 칩(스크롤 없음), 검색은 아이콘, 대표 글은 점·넘기기, 목록형 카드 ===== */
.bt{display:none}
.bf-dots{display:none}
@media (max-width:760px){
  .b-side{display:grid;grid-template-columns:1fr auto;gap:10px 8px;align-items:start}
  .b-home{grid-column:1/-1}
  .b-cats{display:flex!important;flex-wrap:wrap;gap:6px;overflow:visible!important;grid-column:1;min-width:0}
  .b-cats a{white-space:nowrap;padding:7px 12px!important;border:1px solid var(--line);border-radius:999px;font-size:14px!important;background:#fff;gap:4px;justify-content:flex-start}
  .b-cats a em{display:none}
  .b-cats a small{display:none!important}
  .b-cats a.sub{display:none!important}
  .b-cats a.sub.show,.b-cats a.sub.on{display:flex!important;padding-left:12px!important;background:#F7F5F0}
  .b-cats a.sub::before{display:none}
  .b-cats a.on{background:#3A3633!important;color:#fff!important;border-color:#3A3633}
  .b-search{grid-column:2;grid-row:2;width:38px;height:38px;border:1px solid var(--line)!important;border-radius:999px;padding:0 11px!important;overflow:hidden;transition:width .25s;background:#fff}
  .b-search:focus-within{width:200px}
  .b-search input{font-size:14px}
  .bf-ctrl{display:none!important}
  .bf-dots{display:flex;justify-content:center;gap:6px;margin-top:10px}
  .bf-dots i{width:7px;height:7px;border-radius:50%;background:#E4E0D9}.bf-dots i.on{background:#EE7B2F;width:18px;border-radius:4px}
  .bf-slide .tthumb{aspect-ratio:4/3!important}
  .tthumb .ta-t span{white-space:normal!important;overflow:visible!important;text-overflow:clip!important}
  .b-grid{grid-template-columns:1fr!important;gap:0!important}
  .b-grid .b-card{display:grid;grid-template-columns:108px 1fr;gap:4px 14px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}
  .b-grid .b-card .tthumb{grid-row:1/3;aspect-ratio:1/1!important;border-radius:12px}
  .b-grid .b-card .tthumb .ta-t,.b-grid .b-card .tthumb .ta-cat{display:none}
  .b-grid .b-card .tthumb.a::after{opacity:.25}
  .b-grid .b-card .bt{display:block;font-size:15.5px;font-weight:700;line-height:1.45;color:var(--ink);align-self:end}
  .b-grid .b-card .bmeta{align-self:start;font-size:12.5px}
  .b-grid .b-card:first-child{grid-template-columns:1fr;padding-top:0}
  .b-grid .b-card:first-child .tthumb{grid-row:auto;aspect-ratio:3/2!important}
  .b-grid .b-card:first-child .tthumb .ta-t,.b-grid .b-card:first-child .tthumb .ta-cat{display:block}
  .b-grid .b-card:first-child .tthumb.a::after{opacity:1}
  .b-grid .b-card:first-child .bt{display:none}
}

/* ===== 10/13 About 발자취 탭 + 인터뷰 갤러리 ===== */
.ab2-hist .hist-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:18px}
.ab2-hist h2{font-family:'Paperlogy',Pretendard,sans-serif;font-weight:600;font-size:clamp(24px,3vw,34px);margin:0}
.ab2-hist h2 em{font-style:normal;background:linear-gradient(transparent 58%,#FFD36E 58%)}
.hist-sticker{width:170px;height:auto;transform:rotate(-6deg)}
.htabs{display:flex;gap:6px;border-bottom:1px solid var(--line);margin-bottom:22px}
.htabs [role=tab]{all:unset;cursor:pointer;padding:12px 16px;font-weight:700;font-size:15.5px;color:var(--sub);border-bottom:3px solid transparent;margin-bottom:-1px}
.htabs [role=tab][aria-selected=true]{color:var(--ink);border-bottom-color:#EE7B2F}
.htabs [role=tab]:focus-visible{outline:2px solid #EE7B2F;outline-offset:2px;border-radius:6px}
.hyears{list-style:none;margin:0;padding:0;display:grid;gap:0}
.hyears>li{display:grid;grid-template-columns:96px 1fr;gap:16px;padding:16px 0;border-bottom:1px solid var(--line)}
.hyears>li>b{font-family:'Paperlogy',Pretendard,sans-serif;font-size:24px;color:#EE7B2F}
.hyears ul{margin:0;padding-left:18px;display:grid;gap:4px;font-size:15.5px;color:var(--ink)}
.hlist{list-style:none;margin:0;padding:0}
.hlist li{display:grid;grid-template-columns:96px 1fr auto;gap:12px;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--line)}
.hlist .y{font-weight:700;color:#EE7B2F}.hlist b{font-weight:600}.hlist .o{font-size:13.5px;color:var(--sub);white-space:nowrap}
.hlist.press a{color:var(--ink);text-decoration:none;font-weight:600}.hlist.press a:hover{text-decoration:underline}
.himpact{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:18px}
.himpact div{display:grid;gap:4px;padding:18px 20px;border-radius:18px;background:#FFF3E6}
.himpact .y{font-size:13px;font-weight:700;color:#C85A12}
.himpact b{font-family:'Paperlogy',Pretendard,sans-serif;font-size:30px;color:var(--ink)}
.himpact span:not(.y){font-size:14px;color:var(--ink)}.himpact em{font-style:normal;font-size:12px;color:var(--sub)}
.htoc{margin:0}.htoc img{width:100%;border-radius:18px;border:1px solid var(--line)}.htoc figcaption{font-size:13px;color:var(--sub);margin-top:8px}
.igal{margin-top:56px}
.igal-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.ig{display:grid;gap:6px;text-decoration:none;color:var(--ink)}
.ig img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:center 30%;border-radius:18px;margin-bottom:6px;transition:transform .3s}
.ig:hover img{transform:translateY(-3px)}
.ig .k{font-size:12.5px;font-weight:700;color:#EE7B2F}
.ig b{font-size:16.5px;line-height:1.4}
.ig q{font-size:14px;color:var(--sub);quotes:"“" "”"}
@media (max-width:760px){
  .hist-sticker{width:110px}
  .htabs{gap:0;overflow:visible}.htabs [role=tab]{flex:1;text-align:center;padding:12px 4px;font-size:14px}
  .hyears>li{grid-template-columns:1fr;gap:6px}.hyears>li>b{font-size:20px}
  .hlist li{grid-template-columns:1fr;gap:2px}.hlist .o{white-space:normal}
  .himpact{grid-template-columns:1fr}
  .igal-row{grid-template-columns:1fr 1fr;gap:12px}.ig b{font-size:15px}
}

.ab2-hero{position:relative;overflow:hidden}
.ab2-sticker{position:absolute;right:max(16px,calc(50% - 560px));top:48px;width:220px;transform:rotate(8deg)}
.u2-photo{display:grid;grid-template-columns:2fr 1fr 1fr;gap:8px;margin:0;padding:0 16px;max-width:1280px;margin:0 auto}
.u2-photo img{width:100%;height:340px;object-fit:cover;border-radius:18px}
@media (max-width:760px){.ab2-sticker{width:120px;top:auto;bottom:16px;right:16px}.u2-photo{grid-template-columns:1fr 1fr}.u2-photo img{height:180px}.u2-photo img:first-child{grid-column:1/-1}}

/* ===== 10/13-6 고침 ===== */
/* About 점수 상자: 흰 바탕 + 옅은 그림자, 막대가 보이게 */
.ab2-ev .evA-hero{background:#FFFFFF!important;color:var(--ink)!important;box-shadow:0 14px 40px rgba(58,54,51,.08)!important;border:0!important}
.ab2-ev .evA-hero p,.ab2-ev .evA-hero .k{color:var(--ink)!important}
.ab2-ev .evA-hero .k{color:#C85A12!important}
.ab2-ev .score .was{color:#B9B3AB!important}
.ab2-ev .score .big,.ab2-ev .up{color:#EE7B2F!important}
.ab2-ev .bar .pre{background:#E4E0D9!important}.ab2-ev .bar .post{background:#EE7B2F!important}
.ab2-ev .bar .pre i{color:#77716A!important}
.ab2-ev .evA-hero small{color:#77716A!important}
.ab2-ev .evA-voice{box-shadow:0 14px 40px rgba(58,54,51,.06)!important;border:0!important}
/* 관련 글 카드: 글자가 테두리에 붙어 잘리지 않게 */
.jcard{border:1px solid var(--line);border-radius:18px;background:#fff;overflow:hidden;gap:0!important}
.jcard .jimg.tt .tthumb{border-radius:0}
.jbody{padding:14px 18px 18px}
/* 관객 후기: 중국어·일본어는 그 언어 글꼴로, 살짝 떠오르는 움직임 */
.vc4 blockquote[lang=zh]{font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif}
.vc4 blockquote[lang=ja]{font-family:"Hiragino Sans","Yu Gothic","Meiryo","Noto Sans JP",sans-serif}
.vc4 blockquote{word-break:normal;overflow-wrap:anywhere;font-weight:600}
.vc4{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.vcards4.in .vc4{opacity:1;transform:none}
.vcards4.in .vc4:nth-child(2){transition-delay:.12s}.vcards4.in .vc4:nth-child(3){transition-delay:.24s}.vcards4.in .vc4:nth-child(4){transition-delay:.36s}
.vc4:hover{transform:translateY(-4px)!important}
@media (prefers-reduced-motion:reduce){.vc4{opacity:1;transform:none}}
/* 유니스텝 현장 사진: 가로로 흐르는 띠 */
.u2-roll{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.u2-track{display:flex;gap:10px;width:max-content;animation:roll 50s linear infinite}
.u2-track .dup{display:flex;gap:10px}
.u2-track img{height:300px;width:auto;aspect-ratio:3/2;object-fit:cover;border-radius:18px}
@media (max-width:760px){.u2-track img{height:180px}}
@media (prefers-reduced-motion:reduce){.u2-track{animation:none}}
.tr-proof{margin:0 0 14px;font-size:14px;color:var(--ink);line-height:1.6}
.tr-proof span{display:inline-block;margin-right:8px;font-size:12px;font-weight:700;color:#fff;background:#3A3633;border-radius:999px;padding:2px 10px}
/* Action: 활발한 첫 화면 + 궤도 */
.act-hero{position:relative;overflow:hidden;background:linear-gradient(135deg,#EE7B2F 0%,#F2994A 45%,#FFD36E 100%)!important;color:#3A3633!important}
.act-hero .eyebrow{color:#3A3633!important}
.act-hero h1{color:#3A3633!important}
.act-hero h1 em{background:linear-gradient(transparent 58%,#FFFFFF 58%)!important}
.act-hero .psub{color:rgba(58,54,51,.85)!important}
.act-hero .btn.act{background:#3A3633!important;color:#fff!important;border-color:#3A3633!important}
.act-hero .btn.ghost{color:#3A3633!important;border-color:rgba(58,54,51,.5)!important}
.act-hero .wrap{position:relative;z-index:1}
.act-orbit{position:absolute;right:-80px;top:50%;width:620px;height:620px;transform:translateY(-50%);fill:none;stroke:#fff;stroke-opacity:.45}
.act-orbit .m{stroke-opacity:.8}
.act-orbit .spin{transform-origin:300px 300px;animation:aorb 40s linear infinite}
.act-orbit .dot{stroke:none}.act-orbit .dot.o{fill:#3A3633}.act-orbit .dot.y{fill:#FFFFFF}.act-orbit .dot.w{fill:#FFF3E6}
@keyframes aorb{to{transform:rotate(360deg)}}
@media (max-width:760px){.act-orbit{width:380px;height:380px;right:-140px;opacity:.6}}
@media (prefers-reduced-motion:reduce){.act-orbit .spin{animation:none}}
.aacc-in blockquote.kw{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.aacc-in blockquote.kw span{background:#fff;border-radius:999px;padding:3px 12px;font-weight:700;color:#C85A12}
/* 아코디언 머리: 글자 잘림 없게 */
.aacc summary{align-items:start;line-height:1.4}
.aacc summary span{white-space:normal;overflow:visible}
.aacc summary b{line-height:1.2}

/* ===== 10/13 메인 첫 화면 B안 (웜 그래파이트 다크 · 별 · 정거장 고정 · 이름 뜻 한 줄) ===== */
.space{--b1:#1D1B1A;--b2:#262321;--b3:#2E2A28;background:radial-gradient(55% 65% at 76% 48%,var(--b3) 0%,rgba(0,0,0,0) 70%),linear-gradient(165deg,var(--b2) 0%,var(--b1) 100%)!important}
.space .sky{position:absolute;inset:0;pointer-events:none;z-index:0}
.space .sky i{position:absolute;border-radius:50%;background:#FFF6E2;opacity:.2;animation:skytw var(--d) ease-in-out infinite;animation-delay:var(--dl)}
.space .sky i.big{box-shadow:0 0 6px 1px rgba(255,236,190,.55)}
.space .sky i.gold{background:#F3D79A}
@keyframes skytw{0%,100%{opacity:.12;transform:scale(.8)}50%{opacity:var(--o);transform:scale(1)}}
.space .drift{position:absolute;inset:-10%;animation:skydrift 160s linear infinite}
@keyframes skydrift{to{transform:translate3d(-6%,3%,0)}}
.space .shoot{position:absolute;width:120px;height:1px;background:linear-gradient(90deg,rgba(255,240,210,0),rgba(255,240,210,.9));opacity:0;transform:rotate(-24deg)}
.space .shoot.go{animation:skyshoot 1.4s ease-out}
@keyframes skyshoot{0%{opacity:0;translate:0 0}15%{opacity:1}100%{opacity:0;translate:-260px 115px}}
.orbit2d .spinl circle{stroke-opacity:.5!important}
.orbit2d .spinl circle:nth-child(3){stroke-opacity:.3!important}.orbit2d .spinl circle:nth-child(4){stroke-opacity:.22!important}
.orbit2d .spin{transform-origin:320px 320px;transform-box:view-box;animation:orbspin var(--t) linear infinite}
.orbit2d .spin.r{animation-direction:reverse}
@keyframes orbspin{to{transform:rotate(360deg)}}
.orbit2d .halo{fill:none;stroke:rgba(243,215,154,.35);stroke-width:1;transform-origin:320px 320px;transform-box:view-box;animation:orbhalo 4s ease-in-out infinite}
@keyframes orbhalo{0%,100%{opacity:.25;transform:scale(1)}50%{opacity:.8;transform:scale(1.06)}}
.station text{stroke:#1D1B1A!important}
.space .lead b{color:#fff;font-weight:600}
.space .meaning{position:absolute;left:0;right:0;bottom:0;z-index:1;border-top:1px solid rgba(216,180,106,.18);background:linear-gradient(0deg,rgba(0,0,0,.18),rgba(0,0,0,0))}
.space .mwrap{max-width:1280px;margin:0 auto;padding:16px 20px;display:flex;gap:16px;align-items:center}
.space .mk{flex:none;display:inline-flex;align-items:center;gap:7px;font-size:11px;letter-spacing:.28em;color:#D8B46A}
.space .meaning p{margin:0;font-size:13.5px;line-height:1.6;color:rgba(255,255,255,.62)}
.space .meaning p b{color:rgba(255,255,255,.88);font-weight:600}
@media (max-width:860px){.space .wrap{padding-bottom:32px}.space .meaning{position:relative}.space .mwrap{flex-direction:column;align-items:flex-start;gap:6px}}
@media (prefers-reduced-motion:reduce){.space .sky i,.space .drift,.orbit2d .spin,.orbit2d .halo{animation:none}}

/* ===== 10/15 진행 과정과 사례 (/csr/process) 다시 짬 ===== */
/* 원본 샘플 sample/process_1015.html. 이 페이지 안(.pp2)에서만 적용 */
.pp2{background:var(--bg);color:var(--ink);word-break:keep-all;font:16px/1.7 Pretendard,sans-serif}
.pp2 img{max-width:100%;display:block}
.pp2{--bg:#F7F5F0;--ink:#3A3633;--sub:#77716A;--line:#E4E0D9;--acc:#EE7B2F;--acc-d:#C85A12;--hi:#FFD36E;--tint:#FFF3E6;--sec:104px;--sec-s:64px;--sh:0 10px 30px rgba(58,54,51,.08);--hd:'Paperlogy',Pretendard,sans-serif}
.pp2 *{box-sizing:border-box}
.pp2 h1,.pp2 h2,.pp2 h3{font-family:var(--hd);font-weight:700;letter-spacing:-.03em;line-height:1.25;margin:0}
.pp2 h2{font-size:clamp(24px,3.2vw,40px)}
.pp2 h3{font-size:20px;font-weight:600;letter-spacing:-.02em}
.pp2 h1 em,.pp2 h2 em{font-style:normal;background:linear-gradient(transparent 62%,var(--hi) 62%)}
.pp2 .q-eyebrow{font-size:12px;letter-spacing:.3em;color:var(--acc-d);font-weight:600;margin:0 0 14px}
.pp2 section{padding:var(--sec) 0 var(--sec-s)}
.pp2 .q-sh{margin-bottom:36px}
.pp2 .q-sh p{margin:12px 0 0;max-width:34em;color:var(--sub)}
.pp2 .q-btn{display:inline-flex;align-items:center;gap:6px;min-height:48px;padding:0 22px;border-radius:999px;border:1px solid var(--line);background:#fff;font-weight:600;text-decoration:none;transition:transform .2s,box-shadow .2s}
.pp2 .q-btn:hover{transform:translateY(-2px);box-shadow:var(--sh)}
.pp2 .q-btn.q-pop{background:var(--acc);border-color:var(--acc);color:#fff}
.pp2 .q-chip{display:inline-block;font-size:13px;padding:4px 12px;border-radius:999px;background:var(--tint);color:var(--acc-d);font-weight:600}
.pp2 .q-phead{padding:44px 0 40px;border-bottom:1px solid var(--line)}
.pp2 .q-crumb{font-size:13px;color:var(--sub);margin:0 0 18px}
.pp2 .q-crumb a{text-decoration:none}
.pp2 .q-phead h1{font-size:clamp(30px,4.2vw,50px);line-height:1.22}
.pp2 .q-phead .q-lead{font-size:17px;line-height:1.8;max-width:34em;margin:16px 0 0}
.pp2 .q-toc{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px;padding:0;list-style:none}
.pp2 .q-toc a{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border-radius:999px;border:1px solid var(--line);background:#fff;font-size:14px;font-weight:600;text-decoration:none}
.pp2 .q-toc a:hover{border-color:var(--acc);color:var(--acc-d)}
.pp2 .q-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;list-style:none;margin:0;padding:0;counter-reset:s}
.pp2 .q-steps li{position:relative;background:#fff;border:1px solid var(--line);border-radius:18px;padding:24px 22px}
.pp2 .q-steps li:before{counter-increment:s;content:'STEP 0' counter(s);font:700 12px/1 var(--hd);letter-spacing:.12em;color:var(--acc-d)}
.pp2 .q-steps li:not(:last-child):after{content:'';position:absolute;top:50%;right:-13px;width:10px;height:1px;background:var(--acc)}
.pp2 .q-steps b{display:block;font:600 19px/1.35 var(--hd);margin:12px 0 8px;letter-spacing:-.02em}
.pp2 .q-steps p{margin:0;font-size:14.5px;color:var(--sub);line-height:1.65}
.pp2 .q-steps .q-who{display:inline-block;margin-top:14px}
.pp2 .q-member{margin-top:20px;display:grid;grid-template-columns:1.1fr 1fr;gap:0;align-items:center;background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden}
.pp2 .q-member img{width:100%;aspect-ratio:3/2;object-fit:cover;object-position:center 35%}
.pp2 .q-member .q-bd{padding:28px}
.pp2 .q-member h3{margin-bottom:6px}
.pp2 .q-member>.q-bd>p{margin:0 0 16px;color:var(--sub);font-size:15px}
.pp2 .q-mflow{display:flex;flex-wrap:wrap;align-items:center;gap:8px;list-style:none;margin:0;padding:0}
.pp2 .q-mflow li{display:flex;align-items:center;gap:8px;font-size:14.5px;font-weight:600}
.pp2 .q-mflow li span{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--tint);color:var(--acc-d);font:700 13px/1 var(--hd)}
.pp2 .q-mflow li:not(:last-child):after{content:'→';color:var(--acc);margin-left:2px}
.pp2 .q-member .q-note{margin:16px 0 0;font-size:13.5px;color:var(--sub);padding-top:14px;border-top:1px solid var(--line)}
.pp2 .q-gets{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.pp2 .q-get{background:#fff;border:1px solid var(--line);border-radius:18px;padding:26px 24px}
.pp2 .q-get svg{width:36px;height:36px;stroke:var(--acc-d);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.pp2 .q-get b{display:block;font:600 19px/1.4 var(--hd);margin:14px 0 6px;letter-spacing:-.02em}
.pp2 .q-get p{margin:0;font-size:14.5px;color:var(--sub)}
.pp2 .q-get .q-chip{margin-top:14px}
.pp2 .q-credits{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;margin-top:20px;background:var(--ink);color:#fff;border-radius:18px;padding:44px 40px;overflow:hidden}
.pp2 .q-credits .q-eyebrow{color:var(--hi)}
.pp2 .q-credits h2{font-size:clamp(22px,2.6vw,32px)}
.pp2 .q-credits h2 em{background:none;color:var(--hi)}
.pp2 .q-credits p{margin:12px 0 0;color:rgba(255,255,255,.72);font-size:15px}
.pp2 .q-roll{position:relative;height:230px;overflow:hidden;text-align:center;-webkit-mask:linear-gradient(transparent,#000 22%,#000 78%,transparent);mask:linear-gradient(transparent,#000 22%,#000 78%,transparent)}
.pp2 .q-roll .q-in{animation:pp2roll 16s linear infinite}
@keyframes pp2roll{from{transform:translateY(0)}to{transform:translateY(-50%)}}
.pp2 .q-roll dl{margin:0 0 34px}
.pp2 .q-roll dt{font-size:11.5px;letter-spacing:.24em;color:rgba(255,255,255,.55);margin-bottom:6px}
.pp2 .q-roll dd{margin:0;font-size:15px;line-height:1.9;color:#fff}
.pp2 .q-roll dd.q-big{font:600 18px/1.6 var(--hd);color:var(--hi)}
.pp2 .q-survey{background:#fff;border:1px solid var(--line);border-radius:18px;padding:32px 32px 26px}
.pp2 .q-legend{display:flex;gap:18px;font-size:13.5px;color:var(--sub);margin-bottom:10px}
.pp2 .q-legend span:before{content:'';display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;vertical-align:-1px;background:#fff;border:2px solid var(--sub)}
.pp2 .q-legend span.q-a:before{background:var(--acc);border-color:var(--acc)}
.pp2 .q-rows{list-style:none;margin:0;padding:0}
.pp2 .q-rows li{display:grid;grid-template-columns:220px 1fr 64px;gap:18px;align-items:center;padding:16px 0;border-top:1px solid var(--line)}
.pp2 .q-rows li:first-child{border-top:0}
.pp2 .q-rows .q-q{font-size:15px;font-weight:600}
.pp2 .q-track{position:relative;height:36px}
.pp2 .q-track:before{content:'';position:absolute;left:0;right:0;top:50%;height:1px;background:var(--line)}
.pp2 .q-bar{position:absolute;top:50%;height:4px;margin-top:-2px;border-radius:999px;background:linear-gradient(90deg,var(--line),var(--acc));transform-origin:left;transform:scaleX(0);transition:transform 1.2s ease}
.pp2 .q-survey.q-in .q-bar{transform:scaleX(1)}
.pp2 .q-dot{position:absolute;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:#fff;border:2px solid var(--sub)}
.pp2 .q-dot.q-a{background:var(--acc);border-color:var(--acc)}
.pp2 .q-dot i{position:absolute;left:50%;transform:translateX(-50%);font-style:normal;font-size:12px;font-weight:700;white-space:nowrap}
.pp2 .q-dot.q-b i{bottom:14px;color:var(--sub)}
.pp2 .q-dot.q-a i{top:14px;color:var(--acc-d)}
.pp2 .q-gain{font:700 18px/1 var(--hd);color:var(--acc-d);text-align:right}
.pp2 .q-scale{display:grid;grid-template-columns:220px 1fr 64px;gap:18px;font-size:12px;color:var(--sub)}
.pp2 .q-scale div{display:flex;justify-content:space-between}
.pp2 .q-survey .q-src{margin:14px 0 0;font-size:13px;color:var(--sub)}
.pp2 .q-filter{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px;padding:0;list-style:none}
.pp2 .q-filter button{min-height:40px;padding:0 16px;border-radius:999px;border:1px solid var(--line);background:#fff;font:600 14px/1 Pretendard,sans-serif;color:var(--ink);cursor:pointer}
.pp2 .q-filter button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.pp2 .q-cases{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.pp2 .q-case{background:#fff;border:1px solid var(--line);border-radius:18px;padding:24px;display:flex;flex-direction:column;gap:8px}
.pp2 .q-case[hidden]{display:none}
.pp2 .q-case .q-chip{align-self:flex-start}
.pp2 .q-case b{font:600 19px/1.35 var(--hd);letter-spacing:-.02em;margin-top:4px}
.pp2 .q-case p{margin:0;font-size:14.5px;color:var(--sub)}
.pp2 .q-case.q-feat{grid-column:span 3;display:grid;grid-template-columns:1.2fr 1fr;padding:0;overflow:hidden;gap:0}
.pp2 .q-case.q-feat img{width:100%;height:100%;object-fit:cover;min-height:240px}
.pp2 .q-case.q-feat .q-bd{padding:28px;display:flex;flex-direction:column;gap:8px}
.pp2 .q-case.q-feat .q-tags{display:flex;gap:6px;flex-wrap:wrap}
.pp2 .q-case.q-feat .q-more{margin-top:auto;padding-top:14px;font-size:14px;font-weight:600;color:var(--acc-d);text-decoration:none}
.pp2 .q-more-all{display:inline-block;margin-top:22px;font-weight:600;color:var(--acc-d);text-decoration:none}
.pp2 .q-endbox{background:linear-gradient(180deg,var(--tint),var(--bg));border:1px solid var(--line);border-radius:18px;padding:40px;display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center}
.pp2 .q-endbox h2{font-size:clamp(22px,2.6vw,30px)}
.pp2 .q-endbox p{margin:10px 0 0;color:var(--sub)}
.pp2 .q-fx{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .7s ease}
.pp2 .q-fx.q-in{opacity:1;transform:none}
@media (max-width:860px){.pp2 .q-steps{grid-template-columns:1fr 1fr}
.pp2 .q-steps li:after{display:none}
.pp2 .q-member,.pp2 .q-credits{grid-template-columns:1fr}
.pp2 .q-gets,.pp2 .q-cases{grid-template-columns:1fr 1fr}
.pp2 .q-case.q-feat{grid-column:span 2}}
@media (max-width:760px){.pp2{--sec:64px;--sec-s:40px}
.pp2 .q-steps,.pp2 .q-gets,.pp2 .q-cases{grid-template-columns:1fr}
.pp2 .q-case.q-feat{grid-column:auto;grid-template-columns:1fr}
.pp2 .q-member .q-bd{padding:22px}
.pp2 .q-credits{padding:30px 22px;gap:20px}
.pp2 .q-survey{padding:24px 18px 20px}
.pp2 .q-rows li{grid-template-columns:1fr 52px;gap:4px 12px}
.pp2 .q-rows .q-q{grid-column:1/-1}
.pp2 .q-scale{display:none}
.pp2 .q-endbox{grid-template-columns:1fr;padding:28px 20px}
.pp2 .q-endbox .q-btn{width:100%;justify-content:center}}
@media (prefers-reduced-motion:reduce){.pp2 *{animation:none!important;transition:none!important}
.pp2 .q-fx{opacity:1;transform:none}
.pp2 .q-bar{transform:none}}
.pp2 .q-credits h2{color:#fff} /* 테마 h2 글자색 덮기 */

/* ===== 10/15-2 대표 정비 (about·csr·사례와 후기·유니스텝 번역·Action JOIN) ===== */
/* /about 플라이휠: 누르면 그 자리에서 켜지기만 (링크 → 버튼) */
.ab2-orb button.el{width:100%;font:inherit;text-align:left;background:transparent;cursor:pointer;transition:border-color .25s,background .25s}
.ab2-orb button.el:focus-visible{outline:2px solid #FFD36E;outline-offset:2px}
/* /csr 설문 아래 안내: 블럭 없이 오른쪽 아래 주석 */
.fnote{margin:12px 0 0;text-align:right;font-size:12.5px;color:#77716A}
.fnote::before{content:"※ "}
/* /csr 사례 번호 글자가 안 보이던 것 (없는 --green 색) */
#cases .cno{background:#3A3633!important;color:#FFFFFF!important}
/* /csr 오른쪽 서랍 아래: 체험 하나만 */
.trial-cta{display:flex;align-items:center;gap:12px;width:100%;margin-top:12px;padding:14px 18px;border:1px dashed #E4E0D9;border-radius:18px;background:#FFFFFF;font:inherit;text-align:left;color:#3A3633;cursor:pointer;transition:border-color .2s,transform .2s}
.trial-cta span{flex:1;font-size:13px;color:#77716A;line-height:1.5}.trial-cta b{display:block;font-size:14.5px;color:#3A3633;margin-bottom:2px}
.trial-cta em{font-style:normal;color:#C85A12;font-weight:700}
.trial-cta:hover{border-color:#EE7B2F;transform:translateY(-1px)}
/* /csr 서랍 4단계: 순서 그대로, 고른 칸만 켜짐 + 한 번 반짝 */
.alts .chip{transition:background-color .3s,border-color .3s,color .3s}
.alts .chip.flash{animation:altflash .6s ease}
@keyframes altflash{0%{transform:scale(.96);box-shadow:0 0 0 0 rgba(238,123,47,.45)}60%{transform:scale(1.02);box-shadow:0 0 0 8px rgba(238,123,47,0)}100%{transform:none}}
/* /csr/process 사례와 후기 */
.pp2 .q-case .q-more{margin-top:auto;padding-top:12px;font-size:14px;font-weight:600;color:#C85A12;text-decoration:none}
.pp2 .q-case.q-has{border-color:#EE7B2F}
.pp2 .q-voices{columns:3 300px;column-gap:20px}
.pp2 .q-voice{break-inside:avoid;margin:0 0 20px;background:#FFFFFF;border:1px solid #E4E0D9;border-radius:18px;padding:24px}
.pp2 .q-voice blockquote{margin:0;font-size:15.5px;line-height:1.75;color:#3A3633}
.pp2 .q-voice figcaption{margin-top:14px;padding-top:12px;border-top:1px solid #E4E0D9;font-size:13px;color:#77716A}
.pp2 .q-voice figcaption b{display:block;color:#3A3633;font-size:13.5px}
/* /unistep 번역 그림: 선이 흐르고, 엔진 링이 천천히 돌고, 언어 상자가 차례로 켜짐 */
.utech.anim .ut-fig .ln{stroke-dasharray:5 6;animation:utflow 3s linear infinite}
@keyframes utflow{to{stroke-dashoffset:-44}}
.utech.anim .ut-fig .eng .in2{transform-box:fill-box;transform-origin:center;animation:utspin 24s linear infinite}
@keyframes utspin{to{transform:rotate(360deg)}}
.utech.anim .ut-fig .pt{animation:utpt 2s ease-in-out infinite}
@keyframes utpt{50%{opacity:.35}}
.utech.anim .ut-fig .out rect{animation:utlit 6s ease-in-out infinite}
.utech.anim .ut-fig .out rect:nth-of-type(2){animation-delay:1.5s}.utech.anim .ut-fig .out rect:nth-of-type(3){animation-delay:3s}.utech.anim .ut-fig .out rect:nth-of-type(4){animation-delay:4.5s}
@keyframes utlit{0%,30%,100%{stroke:#E4E0D9;fill:#FFFFFF}10%,20%{stroke:#EE7B2F;fill:#FFF3E6}}
@media (prefers-reduced-motion:reduce){.utech.anim .ut-fig *{animation:none!important}}
/* /action JOIN: 안쪽 접기 대신 칸 하나로 */
.ajoin-done{margin-top:22px;padding:20px;border:1px solid #E4E0D9;border-radius:18px;background:#FFFFFF}
.ajoin-done>.t{display:block;font-size:15.5px;margin-bottom:10px;color:#3A3633}/* Team portraits from existing company materials. */
.nc-photo{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:57% center}