/* Himart Narrative V2 production bundle. Source order preserved from 4254e58. */

/* --- style.css --- */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
:root{--bg:#f4f2ed;--fg:#111;--muted:#76736d;--line:#a9a59d;--pad:clamp(18px,2.2vw,34px);--gap:clamp(14px,1.4vw,24px)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--fg);font-family:'Averta PE',Pretendard,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-weight:300;letter-spacing:normal;text-transform:uppercase}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit}::selection{background:#111;color:#fff}.shell{padding:0 var(--pad)}
.top{position:fixed;z-index:50;inset:0 0 auto;display:grid;grid-template-columns:1fr auto 1fr;align-items:start;padding:18px var(--pad);font-size:12px;line-height:1.25;mix-blend-mode:difference;color:#fff;pointer-events:none}.top>*{pointer-events:auto}.top-center{display:flex;gap:26px}.top-center a{text-transform:none}.top-right{text-align:right}.top a{position:relative}.top a:after{content:"";position:absolute;left:0;right:100%;bottom:-3px;height:1px;background:currentColor;transition:right .3s}.top a:hover:after{right:0}
.hero{min-height:100vh;padding-top:88px;padding-bottom:18px;display:grid;grid-template-columns:minmax(0,2.25fr) minmax(250px,.75fr);gap:var(--gap);align-items:end}.hero-main{align-self:end}.hero-line{font-size:clamp(54px,8.4vw,146px);line-height:.88;letter-spacing:normal;font-weight:300;margin:0;max-width:1200px}.hero-line .light{font-weight:300}.hero-side{border-top:1px solid var(--fg);padding-top:12px;align-self:end}.mini-label{font-size:10px;letter-spacing:normal;margin-bottom:20px;color:var(--muted)}.side-list{display:grid;gap:7px;font-size:clamp(16px,1.35vw,22px);line-height:1.15}.hero-bottom{grid-column:1/-1;display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--fg);padding-top:10px;margin-top:24px;font-size:11px;letter-spacing:normal}
.intro-block{padding:120px 0 90px;display:grid;grid-template-columns:1fr 2.2fr;gap:var(--gap)}.intro-copy{font-size:clamp(34px,5.2vw,78px);line-height:.98;letter-spacing:normal;font-weight:300;margin:0}.intro-copy b{font-weight:700}.philosophy{grid-column:2;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);margin-top:70px}.phil{border-top:1px solid var(--fg);padding-top:10px}.phil strong{font-size:12px;letter-spacing:normal;font-weight:700}.phil p{font-size:13px;line-height:1.55;color:var(--muted);margin:35px 0 0}
.ai-strip{margin:0 calc(-1*var(--pad));padding:24px var(--pad);background:#111;color:#fff;display:grid;grid-template-columns:1fr 2.2fr;gap:var(--gap);align-items:start}.ai-strip .mini-label{color:#8d8d8d}.ai-big{font-size:clamp(42px,6.8vw,110px);line-height:.88;letter-spacing:normal;font-weight:300;margin:0}.ai-big .light{font-weight:300}.ai-desc{grid-column:2;max-width:760px;font-size:15px;line-height:1.65;color:#bcbcbc;margin:34px 0 10px}
.work-section{padding:120px 0 80px}.section-top{display:flex;justify-content:space-between;align-items:flex-end;border-top:1px solid var(--fg);padding-top:10px;margin-bottom:24px}.section-top h2{font-size:12px;font-weight:300;margin:0}.section-top span{font-size:11px;color:var(--muted)}.work-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap);row-gap:52px}.project{display:block;position:relative}.project:nth-child(1){grid-column:1/span 7}.project:nth-child(2){grid-column:8/span 5;margin-top:170px}.project:nth-child(3){grid-column:2/span 5}.project:nth-child(4){grid-column:7/span 6;margin-top:110px}.project:nth-child(5){grid-column:1/span 4}.project:nth-child(6){grid-column:5/span 8;margin-top:80px}.project-meta{display:flex;justify-content:space-between;gap:18px;margin-bottom:8px;font-size:11px;letter-spacing:normal}.project-title{font-size:clamp(18px,2vw,30px);font-weight:300;letter-spacing:normal}.placeholder{position:relative;width:100%;aspect-ratio:16/10;border:1px solid var(--line);overflow:hidden;background:transparent;transition:.45s cubic-bezier(.2,.75,.15,1)}.placeholder.tall{aspect-ratio:4/5}.placeholder.wide{aspect-ratio:2/1}.placeholder:before,.placeholder:after{content:"";position:absolute;left:50%;top:50%;width:142%;height:1px;background:var(--line);transform-origin:center}.placeholder:before{transform:translate(-50%,-50%) rotate(32deg)}.placeholder:after{transform:translate(-50%,-50%) rotate(-32deg)}.project:hover .placeholder{transform:scale(.988);background:#e9e6df}.project:hover .project-title{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.archive{padding:110px 0 80px;display:grid;grid-template-columns:1fr 2.2fr;gap:var(--gap);border-top:1px solid var(--fg)}.archive h2{font-size:11px;font-weight:300;margin:0}.archive-list{border-top:1px solid var(--line)}.archive-row{display:grid;grid-template-columns:105px 1fr 1fr 36px;gap:12px;padding:16px 0;border-bottom:1px solid var(--line);font-size:13px;transition:.25s}.archive-row:hover{padding-left:10px;padding-right:10px;background:#111;color:#fff}.archive-row .muted{color:var(--muted)}
.footer{padding:80px 0 18px}.footer-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--gap);border-top:1px solid var(--fg);padding-top:10px}.footer h3{font-size:10px;letter-spacing:normal;color:var(--muted);font-weight:300;margin:0 0 18px}.footer a,.footer p{font-size:13px;line-height:1.6;margin:0}.foot-name{font-size:clamp(46px,8vw,126px);font-weight:300;letter-spacing:normal;line-height:.82;margin:80px 0 0}.foot-name .light{font-weight:300}
.case-hero{min-height:100vh;padding:110px 0 24px;display:grid;grid-template-columns:1fr 2.2fr;gap:var(--gap);align-items:end}.case-title{grid-column:2;font-size:clamp(52px,8vw,126px);line-height:.87;letter-spacing:normal;font-weight:300;margin:0}.case-title .light{font-weight:300}.case-kicker{grid-column:1;align-self:end;font-size:11px;letter-spacing:normal;color:var(--muted)}.case-meta{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap);border-top:1px solid var(--fg);padding-top:10px;margin-top:35px;font-size:11px}.case-section{padding:110px 0;display:grid;grid-template-columns:1fr 2.2fr;gap:var(--gap)}.case-section .label{font-size:10px;letter-spacing:normal;color:var(--muted)}.case-copy h2{font-size:clamp(32px,4.5vw,68px);line-height:1;letter-spacing:normal;font-weight:300;margin:0 0 28px}.case-copy h2 b{font-weight:700}.case-copy p{max-width:720px;font-size:15px;line-height:1.7;color:#54514b}.case-image{grid-column:1/-1;margin-top:45px}.case-stats{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--fg);border-bottom:1px solid var(--fg);margin-top:50px}.case-stats div{padding:18px 16px 18px 0}.case-stats div+div{border-left:1px solid var(--line);padding-left:16px}.case-stats strong{display:block;font-size:clamp(34px,4vw,62px);font-weight:700;letter-spacing:normal}.case-stats span{font-size:11px;color:var(--muted)}
.about-hero{min-height:100vh;padding:110px 0 24px;display:flex;align-items:flex-end}.about-hero h1{font-size:clamp(58px,8.8vw,142px);line-height:.86;letter-spacing:normal;font-weight:300;margin:0}.about-hero b{font-weight:700}.timeline{padding:90px 0;border-top:1px solid var(--fg)}.timeline-row{display:grid;grid-template-columns:120px 1fr 1.6fr;gap:var(--gap);padding:16px 0;border-bottom:1px solid var(--line);font-size:13px}.timeline-row .year{color:var(--muted)}.timeline-row.ai{background:#111;color:#fff;margin:0 calc(-1*var(--pad));padding-left:var(--pad);padding-right:var(--pad)}.timeline-row.ai .year,.timeline-row.ai .desc{color:#999}
@media(max-width:850px){.top{grid-template-columns:1fr 1fr}.top-center{display:none}.hero,.intro-block,.ai-strip,.archive,.case-hero,.case-section{grid-template-columns:1fr}.hero-side,.intro-copy,.philosophy,.ai-big,.ai-desc,.case-title,.case-kicker{grid-column:1}.hero{align-content:end}.philosophy{grid-template-columns:1fr;margin-top:25px}.work-grid{grid-template-columns:1fr}.project,.project:nth-child(n){grid-column:1;margin-top:0}.archive-row{grid-template-columns:70px 1fr 28px}.archive-row .muted:nth-of-type(2){display:none}.footer-grid{grid-template-columns:1fr}.case-meta{grid-template-columns:1fr 1fr}.timeline-row{grid-template-columns:80px 1fr}.timeline-row .desc{grid-column:2}.hero-bottom{flex-direction:column}.hero-line{font-size:clamp(54px,16vw,100px)}}

/* --- typography.css --- */
@font-face{font-family:'Averta PE';src:url('./fonts/Averta-PE-Thin.otf') format('opentype');font-style:normal;font-weight:300;font-display:swap}
@font-face{font-family:'Averta PE';src:url('./fonts/Averta-PE-Regular.otf') format('opentype');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:'Averta PE';src:url('./fonts/Averta-PE-Bold.otf') format('opentype');font-style:normal;font-weight:700;font-display:swap}

/* English is always drawn with Averta as soon as the preloaded face is ready; swap avoids FOIT. */
html,body{font-family:'Averta PE',Pretendard,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-weight:300}
body,p,a,span,div,li,button,input,textarea,h1,h2,h3,h4,h5,h6{font-family:inherit}

/* Explicit Korean copy uses Pretendard only. */
.ko,[lang='ko'] .ko{font-family:Pretendard,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}

.light,.thin{font-weight:300}
b,strong,.bold{font-weight:700}

/* Global GNB follows the Home reference on every page. */
.top .top-center a{font-family:'Averta PE',sans-serif!important;font-weight:400!important;font-size:12px!important;line-height:1.25!important;letter-spacing:normal!important;text-transform:none!important}

/* --- global-gnb.css --- */
.top .top-center a{
  font-family:'Averta PE',sans-serif!important;
  font-weight:400!important;
  font-size:12px!important;
  line-height:1.25!important;
  letter-spacing:normal!important;
  text-transform:none!important;
}

/* Himart detail GNB is always centered in the viewport. */
.himart-page-body .top{
  display:flex!important;
  justify-content:center!important;
  align-items:flex-start!important;
}
.himart-page-body .top .top-center{
  margin:0 auto!important;
  justify-content:center!important;
}

/* Compatibility for the other Himart case pages that still use the earlier keyword layout. */
.himart-page-body .hm-perception-label{
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:baseline;
  padding-bottom:12px;
  border-bottom:1px solid var(--local-minor,rgba(255,255,255,.10));
}
.himart-page-body .hm-perception-label span{
  font:400 10px/1.3 'Averta PE',Arial,sans-serif;
  letter-spacing:.045em;
  color:var(--local-copy,rgba(255,255,255,.60));
  text-transform:uppercase;
}
.himart-page-body .hm-perception-label b{
  font:300 16px/1.4 Pretendard,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
.himart-page-body .hm-orbit{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  padding-top:42px;
  align-items:center;
}
.himart-page-body .hm-keyword-circle{
  display:grid;
  place-items:center;
  flex:0 0 auto;
  width:clamp(104px,9vw,148px);
  aspect-ratio:1/1;
  border:1px solid var(--local-major,rgba(255,255,255,.20));
  border-radius:50%;
  padding:12px;
  text-align:center;
  font:300 clamp(14px,1.2vw,18px)/1.3 Pretendard,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  letter-spacing:-.012em;
}

/* Unified Himart title language: Pretendard Thin across all case-study levels. */
.himart-page-body .hm-title,
.himart-page-body .hm-section-title,
.himart-page-body .hm-subtitle,
.himart-page-body .data-card h3,
.himart-page-body .flow-head h3,
.himart-page-body .flow-node h4,
.himart-page-body .role-card h4,
.himart-page-body .direction-card h4,
.himart-page-body .secondary-card h4,
.himart-page-body .secondary-principle h4,
.himart-page-body .secondary-step h4,
.himart-page-body .secondary-compare h4,
.himart-page-body .secondary-conclusion h4,
.himart-page-body .secondary-placeholder h4,
.himart-page-body .reuse-summary h4,
.himart-page-body .reuse-trust-ring h4{
  font-family:Pretendard,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif!important;
  font-weight:100!important;
}

/* Unified card top rule: white 40% throughout the Himart portfolio family. */
.himart-page-body .role-card,
.himart-page-body .flow-node,
.himart-page-body .direction-card,
.himart-page-body .secondary-card,
.himart-page-body .secondary-principle,
.himart-page-body .secondary-step,
.himart-page-body .secondary-placeholder,
.himart-page-body .reuse-summary article,
.himart-page-body .reuse-trust-ring{
  border-top-color:rgba(255,255,255,.40)!important;
}

/* Shared body-copy treatment: 50% white across all Himart cases. */
.himart-page-body{
  --hm-copy:rgba(255,255,255,.50)!important;
}
.himart-page-body .hm-lead,
.himart-page-body .hm-section-desc,
.himart-page-body .hm-subcopy,
.himart-page-body .ring-card p,
.himart-page-body .sentiment-keywords,
.himart-page-body .conclusion-card p,
.himart-page-body .direction-card p,
.himart-page-body .data-card .desc,
.himart-page-body .legend-row,
.himart-page-body .chart-legend,
.himart-page-body .number-panel p,
.himart-page-body .search-slope span,
.himart-page-body .hbar span,
.himart-page-body .stacklabels div,
.himart-page-body .pdp-col span,
.himart-page-body .flow-head p,
.himart-page-body .flow-node p,
.himart-page-body .role-card p,
.himart-page-body .prototype-intro p,
.himart-page-body .keyword-pill,
.himart-page-body .keyword-pill b,
.himart-page-body .secondary-card p,
.himart-page-body .secondary-principle p,
.himart-page-body .secondary-step p,
.himart-page-body .secondary-compare p,
.himart-page-body .secondary-placeholder p,
.himart-page-body .secondary-result-strip span,
.himart-page-body .reuse-summary p,
.himart-page-body .reuse-trust-ring p{
  color:rgba(255,255,255,.50)!important;
}

/* Normalize the remaining ~80% visual treatment to 70% (non-text visual only). */
.himart-page-body .phone-frame::before{
  opacity:.70!important;
}

/* Shared Himart case footer rhythm. */
.himart-page-body .hm-footer{
  min-height:168px!important;
  padding:0!important;
}
.himart-page-body .hm-footer .hm-wrap{
  min-height:168px!important;
  align-items:center!important;
}
.himart-page-body .hm-footer .hm-wrap>div{
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
}
.himart-page-body .hm-footer .hm-wrap>div>span{
  margin-bottom:10px!important;
  color:#fff!important;
  opacity:.6!important;
}
.himart-page-body .hm-footer .hm-wrap>div>a,
.himart-page-body .hm-footer .hm-wrap>a:first-child{
  position:relative!important;
  display:inline-block!important;
  color:#fff!important;
  line-height:1!important;
}
.himart-page-body .hm-footer .hm-wrap>div>a{
  font-size:14.4px!important;
  padding-right:24px!important;
}
/* Cover the old text arrow, then draw a head-only chevron. */
.himart-page-body .hm-footer .hm-wrap>div>a::before{
  content:''!important;
  position:absolute!important;
  z-index:1!important;
  right:22px!important;
  top:-.12em!important;
  width:1.15em!important;
  height:1.35em!important;
  background:var(--hm-bg,#000000)!important;
}
.himart-page-body .hm-footer .hm-wrap>div>a::after{
  content:''!important;
  position:absolute!important;
  z-index:2!important;
  right:3px!important;
  top:50%!important;
  width:.55em!important;
  height:.55em!important;
  border-top:1px solid currentColor!important;
  border-right:1px solid currentColor!important;
  transform:translateY(-50%) rotate(45deg)!important;
  transform-origin:center!important;
  background:transparent!important;
}
/* Works uses the same drawn chevron, mirrored to the left. */
.himart-page-body .hm-footer .hm-wrap>a:first-child{
  padding-left:24px!important;
}
.himart-page-body .hm-footer .hm-wrap>a:first-child::before{
  content:''!important;
  position:absolute!important;
  z-index:1!important;
  left:22px!important;
  top:-.12em!important;
  width:1.15em!important;
  height:1.35em!important;
  background:var(--hm-bg,#000000)!important;
}
.himart-page-body .hm-footer .hm-wrap>a:first-child::after{
  content:''!important;
  position:absolute!important;
  z-index:2!important;
  left:3px!important;
  top:50%!important;
  width:.55em!important;
  height:.55em!important;
  border-left:1px solid currentColor!important;
  border-bottom:1px solid currentColor!important;
  transform:translateY(-50%) rotate(45deg)!important;
  transform-origin:center!important;
  background:transparent!important;
}

@media(max-width:760px){
  .himart-page-body .hm-perception-label{display:block}
  .himart-page-body .hm-perception-label b{display:block;margin-top:8px}
  .himart-page-body .hm-orbit{gap:10px;padding-top:30px}
  .himart-page-body .hm-keyword-circle{width:calc(33.333% - 7px);min-width:0;font-size:13px}
  .himart-page-body .hm-footer,
  .himart-page-body .hm-footer .hm-wrap{min-height:144px!important}
  .himart-page-body .hm-footer .hm-wrap>div>a{font-size:14px!important}
}
@media(max-width:430px){
  .himart-page-body .hm-keyword-circle{width:calc(50% - 5px)}
}
/* --- himart-case-v4.css --- */
body.himart-page-body{--hm-bg:#000000;--hm-white:#fff;--hm-copy:rgba(255,255,255,.70);--hm-dim:rgba(255,255,255,.46);--hm-line:rgba(255,255,255,.14);--hm-line-strong:rgba(255,255,255,.24);--hm-blue:#00A6ED;--hm-newblue:#00B8DE;--hm-green:#00EDBD;--hm-yellow:#F3EB01;--hm-red:#FA481B;--hm-ko:Pretendard,-apple-system,BlinkMacSystemFont,"Noto Sans KR","Apple SD Gothic Neo",Arial,sans-serif;--hm-en:"Averta PE",Arial,sans-serif;--hm-wrap:1280px;--hm-hero:clamp(64px,6.1vw,98px);--hm-section:clamp(46px,4.2vw,68px);--hm-subsection:clamp(36px,3vw,48px);--hm-group:26px;--hm-card:26px;--hm-body:17px;--hm-body-small:15px;margin:0;background:var(--hm-bg)!important;color:var(--hm-white)!important;text-transform:none!important;font-family:var(--hm-ko);font-weight:300;letter-spacing:-.02em}.himart-page-body *{box-sizing:border-box}.himart-page-body main,.himart-page-body section,.himart-page-body footer{background:var(--hm-bg);color:var(--hm-white)}.hm-wrap{width:min(calc(100% - 64px),var(--hm-wrap));margin:0 auto}
.hm-hero{padding:92px 0 92px;min-height:auto}.hm-hero .hm-wrap{display:flex;flex-direction:column;min-height:0}.hm-kicker,.hm-meta span,.hm-card-no,.hm-source,.hm-subno,.hm-progress a,.hm-role-name{font-family:var(--hm-en);font-weight:300;letter-spacing:.04em}.hm-kicker{font-size:11px;color:var(--hm-dim);margin:0 0 26px}.hm-title{margin:0;max-width:1160px;font-family:var(--hm-ko);font-weight:100;font-size:var(--hm-hero);line-height:1.03;letter-spacing:-.055em}.hm-hero-bottom{margin-top:0;padding-top:54px}.hm-lead{max-width:940px;margin:0;color:rgba(255,255,255,.70);font-family:var(--hm-ko);font-weight:300;font-size:18px;line-height:1.62;letter-spacing:-.025em}.hm-meta{display:grid;grid-template-columns:1.4fr .95fr .95fr .9fr;margin-top:48px;border-top:1px solid var(--hm-line);border-bottom:1px solid var(--hm-line)}.hm-meta div{min-height:74px;padding:14px 18px 14px 0}.hm-meta div+div{border-left:1px solid var(--hm-line);padding-left:18px}.hm-meta span{display:block;font-size:9px;color:var(--hm-dim);margin-bottom:10px}.hm-meta b{font-family:var(--hm-en);font-weight:300;font-size:10px;line-height:1.45;color:#fff}.hm-progress{position:fixed;right:18px;top:50%;z-index:30;display:grid;gap:8px;transform:translateY(-50%)}.hm-progress a{font-size:10px;color:rgba(255,255,255,.28)}.hm-progress a.is-active{color:var(--hm-blue)}
.hm-section{padding:132px 0}.hm-section+.hm-section{border-top:1px solid rgba(255,255,255,.03)}.hm-section-head{display:block;margin-bottom:104px}.hm-section-no{display:block;margin-bottom:22px;font-family:var(--hm-en);font-weight:300;font-size:24px;color:rgba(255,255,255,.38);letter-spacing:.03em}.hm-section-title{margin:0;max-width:1080px;font-family:var(--hm-ko);font-weight:100;font-size:var(--hm-section);line-height:1.08;letter-spacing:-.055em;white-space:normal}.hm-section-desc{margin:32px 0 0;max-width:780px;color:rgba(255,255,255,.70);font-family:var(--hm-ko);font-weight:300;font-size:var(--hm-body);line-height:1.52;letter-spacing:-.024em}.hm-subsection{padding-top:34px;border-top:1px solid var(--hm-line);margin-top:112px}.hm-subsection:first-of-type{margin-top:0}.hm-subhead{display:block;padding-left:0;margin-bottom:56px}.hm-subno{display:block;font-size:12px;color:rgba(255,255,255,.42);padding:0;margin:0 0 18px}.hm-subtitle{margin:0;max-width:980px;font-family:var(--hm-ko);font-weight:100;font-size:var(--hm-subsection);line-height:1.18;letter-spacing:-.045em}.hm-subcopy{margin:20px 0 0;max-width:820px;color:rgba(255,255,255,.70);font-family:var(--hm-ko);font-weight:300;font-size:var(--hm-body);line-height:1.52}.hm-eyebrow{display:none!important}
.keyword-grid{display:grid;grid-template-columns:1fr 1fr;gap:72px}.keyword-group{padding-top:24px;border-top:1px solid var(--hm-line)}.keyword-group h3{margin:0 0 32px;font-family:var(--hm-ko);font-weight:100;font-size:26px;line-height:1.2;color:var(--hm-blue);letter-spacing:-.035em}.keyword-group.negative h3{color:var(--hm-red)}.keyword-cloud{display:flex;flex-wrap:wrap;gap:10px}.keyword-pill{display:inline-flex;align-items:center;min-height:42px;padding:9px 15px;border:1px solid rgba(255,255,255,.4);border-radius:999px;color:#fff;background:transparent;font-family:var(--hm-ko);font-weight:300;font-size:13px;line-height:1.25}.keyword-pill b{font-weight:300}.keyword-pill.major b{font-weight:500}.keyword-pill em{display:none!important}
.voice-stack{display:grid;gap:82px}.voice-group{padding-top:26px;border-top:1px solid var(--hm-line)}.voice-group-title{max-width:940px;margin:0 0 50px;font-family:var(--hm-ko);font-weight:100;font-size:26px;line-height:1.42;letter-spacing:-.04em}.voice-group-title strong{font-weight:500;color:var(--hm-blue)}.voice-group.negative .voice-group-title strong{color:var(--hm-red)}.ring-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px}.ring-card{--ring:var(--hm-blue);position:relative;aspect-ratio:1;border:1px solid rgba(255,255,255,.22);border-radius:50%;display:flex;align-items:center;justify-content:center;text-align:center;padding:52px 42px 78px}.voice-group.negative .ring-card{--ring:var(--hm-red)}.ring-card::before{content:"";position:absolute;inset:-1px;border-radius:50%;background:conic-gradient(var(--ring) calc(var(--pct)*1%),transparent 0);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 5px),#000 calc(100% - 4px));mask:radial-gradient(farthest-side,transparent calc(100% - 5px),#000 calc(100% - 4px))}.ring-card .inner{position:relative;z-index:1}.ring-card h4{margin:0;font-family:var(--hm-ko);font-weight:500;font-size:26px;line-height:1.24;letter-spacing:-.04em}.ring-card p{margin:18px auto 0;max-width:240px;color:rgba(255,255,255,.70);font-family:var(--hm-ko);font-weight:300;font-size:15px;line-height:1.58}.ring-card .pct{position:absolute;z-index:2;left:50%;bottom:26px;transform:translateX(-50%);font-family:var(--hm-en);font-weight:300;font-size:29px;color:var(--ring);letter-spacing:0}
.sentiment-title{margin:0 0 34px;font-family:var(--hm-ko);font-weight:100;font-size:26px;line-height:1.3}.sentiment-graph{display:grid;grid-template-columns:65fr 35fr;border:1px solid var(--hm-line);overflow:hidden}.sentiment-block{position:relative;min-height:350px;padding:30px 32px 34px;background:#070707;display:flex;flex-direction:column;border-top:2px solid var(--hm-blue)}.sentiment-block.negative{border-top-color:var(--hm-red);border-left:1px solid var(--hm-line)}.sentiment-number{font-family:var(--hm-en);font-weight:300;font-size:clamp(58px,5.7vw,88px);line-height:.95;letter-spacing:-.035em}.sentiment-keywords{margin-top:auto;color:rgba(255,255,255,.70);font-family:var(--hm-ko);font-weight:300;font-size:16px;line-height:1.65}.sentiment-keywords b{font-weight:500;color:#fff}.sentiment-conclusion{margin-top:68px}.sentiment-conclusion h4{margin:0 0 34px;max-width:1050px;font-family:var(--hm-ko);font-weight:100;font-size:26px;line-height:1.48;letter-spacing:-.035em}.sentiment-conclusion h4 strong{font-weight:500}.conclusion-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.conclusion-card{min-height:300px;padding:30px;border:1px solid var(--hm-line);border-top:2px solid var(--hm-blue);display:flex;flex-direction:column}.conclusion-card.negative{border-top-color:var(--hm-red)}.conclusion-card h5{margin:0;font-family:var(--hm-ko);font-weight:500;font-size:30px;line-height:1.28;letter-spacing:-.04em}.conclusion-card p{margin:auto 0 0;color:rgba(255,255,255,.70);font-family:var(--hm-ko);font-weight:300;font-size:16px;line-height:1.62}
.direction-list{display:grid;gap:0}.direction-card{display:grid;grid-template-columns:minmax(330px,.82fr) minmax(0,1.18fr);grid-template-rows:auto auto;column-gap:72px;row-gap:14px;align-items:start;min-height:220px;padding:38px 8px 40px;border:0;border-top:1px solid var(--hm-line);border-bottom:1px solid var(--hm-line);background:transparent}.direction-card+.direction-card{border-top:0}.direction-card .hm-card-no{grid-column:1;grid-row:1;font-size:13px;color:var(--hm-blue);padding:0;font-weight:600}.direction-card h4{grid-column:1;grid-row:2;margin:0;font-family:var(--hm-ko);font-weight:400;font-size:29px;line-height:1.26;letter-spacing:-.035em}.direction-card p{grid-column:2;grid-row:1/3;margin:0;color:rgba(255,255,255,.70);font-family:var(--hm-ko);font-weight:300;font-size:17px;line-height:1.58;align-self:center}
.data-list{display:grid;gap:0}.data-card{min-height:0;padding:64px 0 80px;border:0;border-top:1px solid var(--hm-line);background:transparent;display:flex;flex-direction:column}.data-card:first-child{border-top:0;padding-top:0}.data-card:nth-child(3){display:none!important}.data-card-head{display:block;margin-bottom:50px}.data-card .hm-card-no{display:block;font-size:12px;color:var(--hm-blue);padding:0;margin:0 0 18px}.data-card h3{margin:0;max-width:1040px;font-family:var(--hm-ko);font-weight:100;font-size:clamp(34px,3vw,48px);line-height:1.2;letter-spacing:-.045em}.data-card .desc{margin:20px 0 0;max-width:980px;color:rgba(255,255,255,.70);font-family:var(--hm-ko);font-weight:300;font-size:17px;line-height:1.52}.data-viz{width:100%;min-height:320px;display:flex;align-items:flex-end;margin-top:50px}.hm-source{margin-top:28px;padding-top:14px;border-top:1px solid var(--hm-line);font-size:10px;line-height:1.5;color:var(--hm-dim)}
.pie-layout{display:grid;grid-template-columns:360px 1fr;gap:64px;align-items:center;width:100%}.pie{width:360px;aspect-ratio:1;border-radius:50%;background:conic-gradient(var(--hm-blue) 0 52%,var(--hm-newblue) 52% 83%,var(--hm-green) 83% 93%,var(--hm-yellow) 93% 99%,rgba(255,255,255,.22) 99% 100%);position:relative}.pie::after{content:"";position:absolute;inset:29%;border-radius:50%;background:var(--hm-bg)}.pie-center{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;font-size:0;color:#fff}.pie-center small{display:none!important}.pie-center::before{content:"68%";font-family:var(--hm-en);font-weight:300;font-size:61px;line-height:1;letter-spacing:-.03em}.pie-center::after{content:"AD · CPS · CRM";margin-top:12px;font-family:var(--hm-en);font-weight:300;font-size:11px;letter-spacing:.05em;color:var(--hm-dim)}.legend{display:grid;gap:16px}.legend-row{display:grid;grid-template-columns:12px 1fr auto;gap:12px;align-items:center;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.07);font-family:var(--hm-ko);font-weight:300;font-size:16px;color:rgba(255,255,255,.70)}.legend-row i{width:9px;height:9px;border-radius:50%;background:var(--c)}.legend-row b{font-family:var(--hm-en);font-weight:300;color:#fff;font-size:19px}
.chart-wrap{width:100%}.chart-svg{display:none!important}.chart-wrap::before{content:"";display:block;width:100%;aspect-ratio:1160/330;background:url('./himart-traffic-v5.svg') center/contain no-repeat}.chart-legend{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:22px;font-family:var(--hm-ko);font-weight:300;font-size:13px;color:rgba(255,255,255,.70)}.chart-legend span{display:inline-flex;align-items:center;gap:9px;justify-content:flex-start}.chart-legend i{width:22px;height:2px;background:var(--c)}.chart-legend span:first-child{font-size:0}.chart-legend span:first-child::after{content:"세션";font-size:13px}.chart-legend span:nth-child(4){display:none!important}
.number-pair{display:grid;grid-template-columns:1fr 1fr;gap:22px;width:100%}.number-panel{min-height:300px;padding:30px;border:1px solid var(--hm-line);border-top:2px solid var(--hm-blue);display:flex;flex-direction:column}.number-panel:nth-child(2){border-top-color:var(--hm-newblue)}.number-panel strong{font-family:var(--hm-en);font-weight:300;font-size:clamp(92px,9vw,144px);line-height:.9;letter-spacing:-.04em}.number-panel h4{margin:30px 0 0;font-family:var(--hm-ko);font-weight:500;font-size:24px;line-height:1.35}.number-panel p{margin:auto 0 0;color:rgba(255,255,255,.70);font-family:var(--hm-ko);font-weight:300;font-size:16px;line-height:1.6}
.search-slope{display:grid;grid-template-columns:minmax(0,1fr) 80px minmax(0,1fr);gap:0;align-items:center;width:100%}.search-slope>div:not(.arrow-head){min-height:260px;display:flex;flex-direction:column;justify-content:center}.search-slope>div:first-child{align-items:flex-start}.search-slope>div:last-child{align-items:flex-end;text-align:right}.search-slope strong{font-family:var(--hm-en);font-weight:300;font-size:clamp(72px,7vw,112px);line-height:.95}.search-slope span{display:block;margin-top:16px;color:rgba(255,255,255,.70);font-family:var(--hm-ko);font-weight:300;font-size:15px}.arrow-head{position:relative;width:80px;height:80px;font-size:0;color:transparent}.arrow-head::before{content:"";position:absolute;left:50%;top:50%;width:22px;height:22px;border-top:1px solid #fff;border-right:1px solid #fff;transform:translate(-62%,-50%) rotate(45deg)}
.hbars{display:grid;gap:18px;width:100%}.hbar{display:grid;grid-template-columns:140px 1fr 80px;gap:16px;align-items:center}.hbar span{font-family:var(--hm-ko);font-weight:300;font-size:15px;color:rgba(255,255,255,.70)}.hbar b{font-family:var(--hm-en);font-weight:300;font-size:20px;text-align:right}.track{height:10px;background:rgba(255,255,255,.08)}.fill{height:100%;background:var(--c)}
.landing-stack{display:grid;gap:70px;width:100%}.landing-chart{padding-top:28px;border-top:1px solid var(--hm-line)}.landing-chart h4{margin:0 0 28px;font-family:var(--hm-ko);font-weight:100;font-size:26px}.stackbar{display:flex;height:54px}.stackbar i{display:block;height:100%;background:var(--c)}.stacklabels{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:18px}.stacklabels div{color:rgba(255,255,255,.70);font-family:var(--hm-ko);font-weight:300;font-size:14px;line-height:1.5}.stacklabels b{display:block;margin-bottom:4px;font-family:var(--hm-en);font-weight:300;font-size:22px;color:#fff}
.pdp-columns{display:grid;grid-template-columns:1fr;gap:22px;min-height:0;align-items:stretch}.pdp-col{position:relative;display:grid;grid-template-columns:180px 1fr;grid-template-rows:14px 14px;gap:10px 20px;height:auto;padding:0;align-items:center}.pdp-col span{position:static;grid-column:1;grid-row:1/3;text-align:left;color:rgba(255,255,255,.70);font-family:var(--hm-ko);font-weight:300;font-size:14px;line-height:1.45}.pdp-col i{position:relative;display:block;grid-column:2;width:100%!important;height:10px!important;min-height:0!important;background:rgba(255,255,255,.08)!important;overflow:hidden}.pdp-col i::after{content:"";display:block;height:100%;background:var(--c);width:100%}.pdp-col:nth-child(1) i:first-child::after{width:93%;background:var(--hm-blue)}.pdp-col:nth-child(1) i:nth-child(2)::after{width:100%;background:var(--hm-yellow)}.pdp-col:nth-child(2) i:first-child::after{width:100%;background:var(--hm-blue)}.pdp-col:nth-child(2) i:nth-child(2)::after{width:80%;background:var(--hm-yellow)}.pdp-col:nth-child(3) i:first-child::after{width:100%;background:var(--hm-blue)}.pdp-col:nth-child(3) i:nth-child(2)::after{width:83%;background:var(--hm-yellow)}
.flow-area{margin-top:132px;padding-top:34px;border-top:1px solid var(--hm-line)}.flow-head{display:block;margin-bottom:72px}.flow-head h3{margin:0;max-width:920px;font-family:var(--hm-ko);font-weight:100;font-size:clamp(36px,3.3vw,52px);line-height:1.2;letter-spacing:-.048em}.flow-head p{margin:26px 0 0;max-width:820px;color:rgba(255,255,255,.70);font-family:var(--hm-ko);font-weight:300;font-size:17px;line-height:1.52}.flow-groups{display:grid;gap:72px}.flow-group{position:relative;padding-top:34px;--line-left:0px;--line-width:100%}.flow-group::before{content:"";position:absolute;left:var(--line-left);width:var(--line-width);top:0;height:1px;background:var(--hm-red)}.flow-group.blue::before{background:var(--hm-blue)}.flow-label{position:absolute;left:var(--line-left);top:-26px;font-family:var(--hm-ko);font-weight:500;font-size:14px;line-height:1.4;color:var(--hm-red);white-space:nowrap}.flow-group.blue .flow-label{color:var(--hm-blue)}#data .flow-group:nth-child(1){--line-left:300px;--line-width:600px}#data .flow-group:nth-child(2){--line-left:0px;--line-width:552px}#journey .flow-group:nth-child(1){--line-left:0px;--line-width:900px}#journey .flow-group:nth-child(2){--line-left:0px;--line-width:552px}.flow-row{display:grid;align-items:center;justify-content:space-between}.flow-row.row4{grid-template-columns:252px 48px 252px 48px 252px 48px 252px}.flow-row.row3{grid-template-columns:252px 48px 252px 48px 252px}.flow-node{width:252px;height:252px;padding:24px;border:1px solid var(--hm-line);background:#070707;display:flex;flex-direction:column}.flow-node .hm-card-no{font-size:11px;color:var(--hm-blue)}.flow-node h4{margin:24px 0 0;font-family:var(--hm-ko);font-weight:100;font-size:26px;line-height:1.28;letter-spacing:-.035em}.flow-node p{margin:auto 0 0;color:rgba(255,255,255,.70);font-family:var(--hm-ko);font-weight:300;font-size:15px;line-height:1.55}.flow-arrow{position:relative;width:48px;height:48px;font-size:0;color:transparent}.flow-arrow::before{content:"";position:absolute;left:50%;top:50%;width:17px;height:17px;border-top:1px solid rgba(255,255,255,.56);border-right:1px solid rgba(255,255,255,.56);transform:translate(-62%,-50%) rotate(45deg)}.flow-conclusion{margin:54px 0 0;max-width:980px;font-family:var(--hm-ko);font-weight:300;font-size:20px;line-height:1.58;letter-spacing:-.03em}.flow-conclusion strong{font-weight:500;color:var(--hm-red)}
.role-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.role-card{aspect-ratio:1/1;min-height:0;padding:30px;border:0;border-top:1px solid var(--hm-blue);border-bottom:1px solid var(--hm-line);background:#070707;display:flex;flex-direction:column}.hm-role-name{font-size:17px;color:var(--hm-blue);font-weight:400}.role-card h4{margin:44px 0 18px;font-family:var(--hm-ko);font-weight:100;font-size:30px;line-height:1.24;letter-spacing:-.04em}.role-card p{margin:0;color:rgba(255,255,255,.70);font-family:var(--hm-ko);font-weight:300;font-size:16px;line-height:1.62}.role-card strong{margin-top:auto;padding-top:22px;color:var(--hm-blue);font-family:var(--hm-ko);font-weight:500;font-size:13px;line-height:1.55}
.prototype-intro{display:grid;grid-template-columns:1fr 1fr;gap:72px;margin-bottom:72px}.prototype-intro h3{margin:0;font-family:var(--hm-ko);font-weight:100;font-size:var(--hm-subsection);line-height:1.2;letter-spacing:-.045em}.prototype-intro p{margin:0;color:rgba(255,255,255,.70);font-family:var(--hm-ko);font-weight:300;font-size:17px;line-height:1.58}.phone-gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:34px 22px}.phone-card{min-width:0}.phone-frame{aspect-ratio:9/19.5;position:relative;border:1px solid rgba(255,255,255,.72);border-radius:38px;background:#000000;overflow:hidden}.phone-frame::before{content:"";position:absolute;inset:8px;border-radius:30px;background:linear-gradient(180deg,rgba(0,166,237,.2),rgba(255,255,255,.04) 24%,rgba(0,184,222,.12) 52%,rgba(0,237,189,.08)),repeating-linear-gradient(180deg,rgba(255,255,255,.12) 0 6%,transparent 6% 10%);filter:blur(5px);opacity:.82}.phone-frame::after{content:"";position:absolute;left:50%;top:12px;width:8px;height:8px;border-radius:50%;background:#000;border:1px solid rgba(255,255,255,.14);transform:translateX(-50%)}.phone-meta{margin-top:14px}.phone-meta span{font-family:var(--hm-en);font-weight:300;font-size:11px;color:var(--hm-blue)}.phone-meta b{display:block;margin-top:5px;font-family:var(--hm-en);font-weight:400;font-size:13px}.phone-meta p{margin:3px 0 0;color:var(--hm-dim);font-family:var(--hm-ko);font-weight:300;font-size:12px}.hm-footer{padding:70px 0 28px;border-top:1px solid var(--hm-line)}.hm-footer .hm-wrap{display:flex;justify-content:space-between;gap:24px}.hm-footer a,.hm-footer span{font-family:var(--hm-en);font-weight:300;font-size:12px}.hm-footer div{text-align:right}.hm-footer div span{display:block;margin-bottom:8px;color:var(--hm-dim)}.hm-reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}.hm-reveal.is-in{opacity:1;transform:none}
@media(max-width:1100px){body.himart-page-body{--hm-wrap:980px}.keyword-grid{gap:40px}.ring-row{gap:18px}.direction-card{grid-template-columns:1fr;row-gap:12px}.direction-card p{grid-column:1;grid-row:auto}.flow-row.row4{grid-template-columns:252px 48px 252px}.flow-row.row3{grid-template-columns:252px 48px 252px}.role-grid{grid-template-columns:repeat(2,1fr)}.phone-gallery{grid-template-columns:repeat(3,1fr)}}
@media(max-width:780px){.hm-wrap{width:min(calc(100% - 36px),var(--hm-wrap))}.hm-hero{padding-top:76px}.hm-hero-bottom{padding-top:42px}.hm-meta{grid-template-columns:1fr 1fr}.hm-meta div:nth-child(3){border-left:0}.hm-section{padding:100px 0}.hm-section-head{margin-bottom:78px}.hm-subhead{margin-bottom:48px}.keyword-grid,.sentiment-graph,.conclusion-grid,.pie-layout,.prototype-intro{grid-template-columns:1fr}.keyword-grid{gap:52px}.ring-row{grid-template-columns:1fr}.ring-card{max-width:420px;width:100%;margin:0 auto}.direction-card{grid-template-columns:1fr}.data-card{padding:48px 0}.pie{width:min(100%,360px);margin:auto}.chart-legend{grid-template-columns:1fr}.search-slope{grid-template-columns:1fr}.search-slope>div:not(.arrow-head){min-height:180px;align-items:flex-start!important;text-align:left!important}.arrow-head{width:100%;height:54px}.arrow-head::before{transform:translate(-50%,-60%) rotate(135deg)}.flow-row,.flow-row.row4,.flow-row.row3{grid-template-columns:1fr;gap:12px}.flow-node{width:100%;height:auto;min-height:260px}.flow-arrow{width:100%;height:46px}.flow-arrow::before{transform:translate(-50%,-60%) rotate(135deg)}.flow-group::before{left:0!important;width:100%!important}.flow-label{left:0!important;white-space:normal}.role-grid{grid-template-columns:1fr}.role-card{aspect-ratio:auto;min-height:390px}.phone-gallery{grid-template-columns:repeat(2,1fr)}.sentiment-block{min-height:290px}.hm-progress{display:none}}

/* 2026-08-24 unified Himart visual system — derived from the approved purchase-journey case */
body.himart-page-body{--hm-copy:rgba(255,255,255,.50);--hm-dim:rgba(255,255,255,.38)}
body.himart-page-body .hm-title,
body.himart-page-body .hm-section-title,
body.himart-page-body .hm-subtitle,
body.himart-page-body .forced-redesign-title,
body.himart-page-body .secondary-card h4,
body.himart-page-body .secondary-principle h4,
body.himart-page-body .secondary-step h4{font-family:var(--hm-ko)!important;font-weight:100!important}
body.himart-page-body .hm-lead,
body.himart-page-body .hm-section-desc,
body.himart-page-body .hm-subcopy,
body.himart-page-body .data-card .desc,
body.himart-page-body .flow-head p,
body.himart-page-body .flow-node p,
body.himart-page-body .role-card p,
body.himart-page-body .direction-card p,
body.himart-page-body .conclusion-card p,
body.himart-page-body .secondary-card p,
body.himart-page-body .secondary-principle p,
body.himart-page-body .secondary-step p,
body.himart-page-body .secondary-conclusion p{color:rgba(255,255,255,.50)!important;font-weight:300!important}
body.himart-page-body .hm-meta{grid-template-columns:repeat(4,minmax(0,1fr))!important}
body.himart-page-body .role-card,
body.himart-page-body .flow-node,
body.himart-page-body .direction-card,
body.himart-page-body .secondary-card,
body.himart-page-body .secondary-principle,
body.himart-page-body .secondary-step{border-top-color:rgba(255,255,255,.40)!important}
body.himart-page-body .hm-section-no,
body.himart-page-body .hm-subno,
body.himart-page-body .hm-card-no,
body.himart-page-body .hm-role-name{color:var(--hm-blue)!important}
body.himart-page-body .top .top-center{left:50%!important;right:auto!important;transform:translateX(-50%)!important}

/* --- himart-patch-20260823-2110.css --- */
/* 2026-08-23 21:10 refinement patch — himart.html only */
body.himart-page-body{--hm-hero:82px;--hm-section:58px;--hm-subsection:42px}

/* Hero: requested 200px gap between hero title and lower content */
.hm-hero-bottom{padding-top:200px!important}
.hm-title{font-size:82px!important;line-height:1.03}

/* Shared title scale */
.hm-section-title{font-size:58px!important;line-height:1.08!important;white-space:pre-line!important}
.hm-subtitle{font-size:42px!important;line-height:1.18!important}

/* Keyword tablets */
.keyword-pill,.keyword-pill b{color:rgba(255,255,255,.70)!important}

/* UX point rows: number + title kept close, whole row vertically centered */
.direction-card{row-gap:12px!important;align-items:center!important}
.direction-card .hm-card-no{align-self:end!important;margin:0!important}
.direction-card h4{align-self:start!important;margin:0!important}
.direction-card p{align-self:center!important}

/* Data section heading is an intentional two-line title */
#data .hm-section-title{white-space:pre-line!important}

/* Data cards: headline stays on one line and body may use the full content width */
.data-card h3{font-size:42px!important;max-width:none!important;white-space:nowrap!important}
.data-card .desc{max-width:none!important;width:100%!important}

/* Entry pie center emphasis reduced by 15% */
.pie-center::before{font-size:52px!important}

/* PDP comparison legend: correct labels and tight 14px spacing */
.landing-chart .chart-legend{display:flex!important;grid-template-columns:none!important;justify-content:flex-start!important;gap:14px!important;margin-top:14px!important;padding-left:0!important}
.landing-chart .chart-legend span:first-child{font-size:13px!important}
.landing-chart .chart-legend span:first-child::after{content:none!important}

/* Flow issue/solution lines align exactly to the cards below */
#data .flow-group:nth-child(1){--line-left:0px!important;--line-width:1152px!important}
#data .flow-group:nth-child(2){--line-left:0px!important;--line-width:852px!important}
#journey .flow-group:nth-child(1){--line-left:0px!important;--line-width:1152px!important}
#journey .flow-group:nth-child(2){--line-left:0px!important;--line-width:852px!important}

/* Role cards: all text sits flush to the left edge; top rule remains blue */
.role-card{padding:30px 0!important}
.role-card .hm-role-name,.role-card h4,.role-card p,.role-card strong{margin-left:0!important;padding-left:0!important;text-align:left!important}

/* 2026-08-23 21:29 refinement */
/* Restore previous keyword-summary rhythm */
.sentiment-keywords{min-height:0!important;display:block!important;line-height:1.65!important}
.sentiment-keywords b{display:inline!important;margin-bottom:0!important}
.sentiment-keywords br:nth-of-type(n+2){display:none!important}

/* Data descriptions keep the requested manual break and use the full width */
.data-card .desc{line-height:1.52!important}

/* Traffic graph: true full-width plot with legend forced underneath, left-aligned */
.data-viz.chart-wrap{display:grid!important;grid-template-columns:minmax(0,1fr)!important;grid-template-rows:auto auto!important;align-items:stretch!important;width:100%!important;min-height:0!important;overflow:visible!important;margin-top:50px!important}
.data-viz.chart-wrap::before{content:""!important;display:block!important;grid-column:1!important;grid-row:1!important;width:100%!important;max-width:none!important;margin:0!important;aspect-ratio:1280/330!important;background:url('./himart-traffic-v6.svg') center/100% 100% no-repeat!important}
.data-viz.chart-wrap>.chart-legend{grid-column:1!important;grid-row:2!important;display:flex!important;width:100%!important;justify-content:flex-start!important;align-items:center!important;gap:30px!important;margin:20px 0 0!important;padding:0!important;position:static!important;transform:none!important}
.data-viz.chart-wrap>.chart-legend span{display:inline-flex!important;align-items:center!important;justify-content:flex-start!important;gap:9px!important;white-space:nowrap!important}
.data-viz.chart-wrap>.chart-legend span:nth-child(4){display:none!important}

/* AS-IS problem rules stop exactly at the affected card's right edge */
#data .flow-group:nth-child(1){--line-left:0px!important;--line-width:852px!important}
#data .flow-group:nth-child(2){--line-left:0px!important;--line-width:552px!important}

/* AS-IS card labels are problem-state red */
#data .flow-groups .flow-node .hm-card-no{color:var(--hm-red)!important}

/* TO-BE group rules remain aligned to the full grouped card range */
#journey .flow-group:nth-child(1){--line-left:0px!important;--line-width:1152px!important}
#journey .flow-group:nth-child(2){--line-left:0px!important;--line-width:852px!important}

/* Role cards: increase card-to-card spacing by 1.5x and let copy reflow naturally */
.role-grid{gap:27px!important}
.role-card{padding:32px 0!important}
.role-card h4{max-width:90%!important}
.role-card p,.role-card strong{max-width:92%!important}
.role-card strong{color:#fff!important}

@media(max-width:1100px){
  body.himart-page-body{--hm-hero:72px;--hm-section:52px;--hm-subsection:38px}
  .hm-title{font-size:72px!important}
  .hm-section-title{font-size:52px!important}
  .hm-subtitle,.data-card h3{font-size:38px!important}
  .data-card h3{white-space:normal!important}
  .data-viz.chart-wrap::before{width:100%!important;margin:0!important}
  .data-viz.chart-wrap>.chart-legend{gap:22px!important}
  #data .flow-group:nth-child(n),#journey .flow-group:nth-child(n){--line-left:0px!important;--line-width:100%!important}
}

@media(max-width:780px){
  .hm-hero-bottom{padding-top:72px!important}
  .hm-title{font-size:52px!important}
  .hm-section-title{font-size:42px!important}
  .hm-subtitle,.data-card h3{font-size:32px!important}
  .data-viz.chart-wrap>.chart-legend{flex-wrap:wrap!important;gap:12px 20px!important}
}

/* 2026-08-23 mobile responsive layer — desktop rules above remain unchanged */
@media(max-width:780px){
  body.himart-page-body{--hm-wrap:100%;--hm-body:15px;--hm-body-small:13px;overflow-x:hidden}
  .hm-wrap{width:calc(100% - 32px)!important;margin:0 16px!important}
  .hm-progress{display:none!important}

  .hm-hero{padding:72px 0 64px!important}
  .hm-kicker{font-size:9px!important;margin-bottom:18px!important;letter-spacing:.05em!important}
  .hm-title{max-width:none!important;font-size:40px!important;line-height:1.06!important;letter-spacing:-.052em!important;word-break:keep-all!important}
  .hm-hero-bottom{padding-top:84px!important}
  .hm-lead{max-width:none!important;font-size:15px!important;line-height:1.56!important;word-break:keep-all!important}
  .hm-meta{grid-template-columns:1fr 1fr!important;margin-top:34px!important}
  .hm-meta div{min-height:68px!important;padding:12px 12px 12px 0!important}
  .hm-meta div:nth-child(2n){padding-left:12px!important;border-left:1px solid var(--hm-line)!important}
  .hm-meta div:nth-child(n+3){border-top:1px solid var(--hm-line)!important}
  .hm-meta span{font-size:8px!important;margin-bottom:8px!important}
  .hm-meta b{font-size:9px!important;line-height:1.4!important}

  .hm-section{padding:88px 0!important}
  .hm-section-head{margin-bottom:72px!important}
  .hm-section-no{font-size:16px!important;margin-bottom:16px!important}
  .hm-section-title{max-width:none!important;font-size:36px!important;line-height:1.1!important;letter-spacing:-.05em!important;word-break:keep-all!important;white-space:pre-line!important}
  .hm-section-desc{max-width:none!important;margin-top:24px!important;font-size:15px!important;line-height:1.55!important;word-break:keep-all!important}

  .hm-subsection{padding-top:24px!important;margin-top:78px!important}
  .hm-subhead{margin-bottom:38px!important}
  .hm-subno{font-size:10px!important;margin-bottom:12px!important}
  .hm-subtitle{max-width:none!important;font-size:29px!important;line-height:1.18!important;letter-spacing:-.042em!important;word-break:keep-all!important}
  .hm-subcopy{max-width:none!important;margin-top:16px!important;font-size:15px!important;line-height:1.55!important}

  .keyword-grid{grid-template-columns:1fr!important;gap:54px!important}
  .keyword-group{padding-top:18px!important}
  .keyword-group h3{font-size:23px!important;margin-bottom:24px!important}
  .keyword-cloud{gap:9px 8px!important}
  .keyword-pill{min-height:36px!important;padding:7px 11px!important;font-size:12px!important;line-height:1.2!important}

  .voice-stack{gap:64px!important}
  .voice-group{padding-top:20px!important}
  .voice-group-title{max-width:none!important;margin-bottom:34px!important;font-size:23px!important;line-height:1.42!important}
  .ring-row{grid-template-columns:1fr!important;gap:24px!important}
  .ring-card{width:min(82vw,320px)!important;max-width:320px!important;margin:0 auto!important;padding:46px 36px 70px!important}
  .ring-card h4{font-size:23px!important}
  .ring-card p{font-size:14px!important;line-height:1.54!important;max-width:220px!important}
  .ring-card .pct{bottom:20px!important;font-size:26px!important}

  .sentiment-title{font-size:23px!important;margin-bottom:24px!important}
  .sentiment-graph{grid-template-columns:1fr!important;border:0!important;gap:14px!important;overflow:visible!important}
  .sentiment-block,.sentiment-block.negative{min-height:250px!important;padding:24px!important;border:1px solid var(--hm-line)!important;border-top:2px solid var(--hm-blue)!important}
  .sentiment-block.negative{border-top-color:var(--hm-red)!important}
  .sentiment-number{font-size:58px!important}
  .sentiment-keywords{font-size:14px!important;line-height:1.58!important}
  .sentiment-conclusion{margin-top:48px!important}
  .sentiment-conclusion h4{font-size:23px!important;line-height:1.42!important}
  .conclusion-grid{grid-template-columns:1fr!important;gap:14px!important}
  .conclusion-card{min-height:250px!important;padding:24px!important}
  .conclusion-card h5{font-size:26px!important}
  .conclusion-card p{font-size:14px!important;line-height:1.58!important}

  .direction-card{display:block!important;min-height:0!important;padding:28px 0 30px!important}
  .direction-card .hm-card-no{display:block!important;font-size:11px!important;margin:0 0 12px!important}
  .direction-card h4{display:block!important;margin:0 0 16px!important;font-size:25px!important;line-height:1.28!important}
  .direction-card p{display:block!important;margin:0!important;font-size:15px!important;line-height:1.58!important}

  .data-card{padding:52px 0 62px!important}
  .data-card-head{margin-bottom:0!important}
  .data-card .hm-card-no{font-size:10px!important;margin-bottom:12px!important}
  .data-card h3{max-width:none!important;font-size:29px!important;line-height:1.22!important;white-space:normal!important;word-break:keep-all!important}
  .data-card .desc{max-width:none!important;margin-top:16px!important;font-size:15px!important;line-height:1.55!important;word-break:keep-all!important}
  .data-viz{min-height:0!important;margin-top:34px!important;align-items:stretch!important}
  .hm-source{font-size:9px!important;line-height:1.45!important;margin-top:22px!important;word-break:break-word!important}

  .pie-layout{grid-template-columns:1fr!important;gap:30px!important;justify-items:center!important}
  .pie{width:min(78vw,300px)!important}
  .pie-center::before{font-size:46px!important}
  .pie-center::after{font-size:9px!important;margin-top:8px!important}
  .legend{width:100%!important;gap:10px!important}
  .legend-row{grid-template-columns:10px 1fr auto!important;gap:9px!important;padding-bottom:10px!important;font-size:14px!important}
  .legend-row b{font-size:16px!important}

  .data-viz.chart-wrap{display:grid!important;grid-template-columns:1fr!important;grid-template-rows:auto auto!important;width:100%!important;margin-top:34px!important}
  .data-viz.chart-wrap::before{display:block!important;width:100%!important;aspect-ratio:390/300!important;margin:0!important;background:url('./himart-traffic-mobile.svg') center/100% 100% no-repeat!important}
  .data-viz.chart-wrap>.chart-legend{display:grid!important;grid-template-columns:repeat(3,max-content)!important;justify-content:start!important;align-items:center!important;gap:10px 18px!important;margin:14px 0 0!important;padding:0!important;font-size:11px!important}
  .data-viz.chart-wrap>.chart-legend span{gap:7px!important}
  .data-viz.chart-wrap>.chart-legend i{width:18px!important}

  .search-slope{grid-template-columns:1fr 36px 1fr!important;gap:0!important}
  .search-slope>div:not(.arrow-head){min-height:170px!important;justify-content:center!important}
  .search-slope strong{font-size:38px!important;letter-spacing:-.03em!important}
  .search-slope span{margin-top:10px!important;font-size:11px!important;line-height:1.45!important}
  .search-slope .arrow-head{font-size:46px!important;color:#fff!important}

  .hbars{gap:13px!important}
  .hbar{grid-template-columns:74px 1fr 48px!important;gap:8px!important}
  .hbar span,.hbar b{font-size:11px!important}
  .track{height:10px!important}

  .landing-stack{grid-template-columns:1fr!important;gap:46px!important}
  .landing-chart h4{font-size:20px!important;margin-bottom:20px!important}
  .stacklabels{grid-template-columns:1fr 1fr!important;gap:10px 14px!important}
  .stacklabels div{font-size:12px!important}
  .pdp-columns{grid-template-columns:1fr!important;gap:14px!important}
  .pdp-col{grid-template-columns:92px 1fr!important;gap:12px!important}
  .pdp-col span{font-size:12px!important}
  .landing-chart .chart-legend{margin-top:12px!important;gap:14px!important;font-size:11px!important}

  .flow-area{margin-top:74px!important;padding-top:24px!important}
  .flow-head{grid-template-columns:1fr!important;gap:18px!important;margin-bottom:42px!important}
  .flow-head h3{font-size:29px!important;line-height:1.2!important}
  .flow-head p{font-size:15px!important;line-height:1.55!important}
  .flow-groups{gap:54px!important}
  .flow-label{font-size:12px!important;line-height:1.45!important;margin-bottom:16px!important;padding-bottom:10px!important}
  .flow-row.row4,.flow-row.row3{display:grid!important;grid-template-columns:1fr!important;gap:12px!important}
  .flow-node{aspect-ratio:auto!important;min-height:230px!important;padding:22px!important}
  .flow-node .hm-card-no{font-size:10px!important}
  .flow-node h4{font-size:25px!important;margin-top:22px!important}
  .flow-node p{font-size:14px!important;line-height:1.55!important}
  .flow-arrow{width:100%!important;min-height:28px!important;font-size:36px!important;transform:rotate(90deg)!important;color:rgba(255,255,255,.55)!important}
  .flow-conclusion{margin-top:34px!important;font-size:20px!important;line-height:1.5!important}

  #journey .hm-subsection[style]{margin-top:88px!important}
  .role-grid{grid-template-columns:1fr!important;gap:20px!important}
  .role-card{aspect-ratio:auto!important;min-height:0!important;padding:26px 0 28px!important}
  .role-card .hm-role-name{font-size:17px!important;margin-bottom:22px!important}
  .role-card h4{max-width:none!important;font-size:27px!important;line-height:1.25!important;margin-bottom:16px!important}
  .role-card p,.role-card strong{max-width:none!important;font-size:14px!important;line-height:1.58!important}
  .role-card strong{margin-top:28px!important}

  .prototype-intro{grid-template-columns:1fr!important;gap:20px!important;margin-bottom:42px!important}
  .prototype-intro h3{font-size:29px!important;line-height:1.22!important}
  .prototype-intro p{font-size:15px!important;line-height:1.55!important}
  .phone-gallery{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:28px 14px!important}
  .phone-frame{border-radius:24px!important}
  .phone-frame::before{border-radius:18px!important}
  .phone-meta{padding-top:12px!important}
  .phone-meta span,.phone-meta b{font-size:10px!important}
  .phone-meta p{font-size:11px!important}

  .hm-footer{padding:56px 0 72px!important}
  .hm-footer .hm-wrap{grid-template-columns:1fr!important;gap:28px!important}
  .hm-footer>div>div{text-align:left!important}
}

@media(max-width:430px){
  .hm-title{font-size:37px!important}
  .hm-section-title{font-size:33px!important}
  .hm-subtitle{font-size:27px!important}
  .keyword-pill{font-size:11.5px!important;padding:7px 10px!important}
  .ring-card{width:min(86vw,304px)!important}
  .search-slope strong{font-size:34px!important}
  .data-viz.chart-wrap>.chart-legend{grid-template-columns:1fr 1fr!important;row-gap:10px!important}
}

/* 2026-08-23 23:48 — requested title rhythm + prototype gallery */
#journey .hm-section-title{max-width:none!important;width:1500px!important;white-space:normal!important}
#journey .hm-section-title{font-size:0!important;line-height:0!important}
#journey .hm-section-title::before{content:"그래서 끊어진 여정을, 어디서 시작해도 다음 행동으로\A이어지는 구조로 다시 설계했습니다.";display:block;white-space:pre-line;font-family:var(--hm-ko);font-weight:100;font-size:58px;line-height:1.08;letter-spacing:-.055em;color:#fff}

#direction .phone-gallery{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:58px 42px!important}
#direction .phone-card{display:grid!important;grid-template-columns:minmax(0,42%) minmax(0,58%)!important;gap:26px!important;align-items:stretch!important;min-width:0!important}
#direction .phone-frame{width:100%!important;border-radius:15px!important}
#direction .phone-frame::before{border-radius:11px!important}
#direction .phone-meta{margin:0!important;padding:18px 0!important;border-top:1px solid var(--hm-line)!important;border-bottom:1px solid var(--hm-line)!important;display:flex!important;flex-direction:column!important;align-items:flex-start!important;min-width:0!important}
#direction .phone-meta span{font-size:11px!important;color:var(--hm-blue)!important}
#direction .phone-meta b{margin-top:8px!important;font-size:16px!important;line-height:1.25!important}
#direction .phone-meta p{margin:auto 0 0!important;font-size:0!important;max-width:95%!important;line-height:1.6!important;color:rgba(255,255,255,.68)!important;word-break:keep-all!important}
#direction .phone-meta p::before{font-family:var(--hm-ko);font-weight:300;font-size:15px;line-height:1.6;letter-spacing:-.02em;color:rgba(255,255,255,.68)}
#direction .phone-card:nth-child(1) .phone-meta p::before{content:"최근 행동과 유입 맥락을 이어받아 검색·카테고리·혜택·주요 서비스로 빠르게 이동시키는 탐색 허브입니다."}
#direction .phone-card:nth-child(2) .phone-meta p::before{content:"품목 나열보다 사용 상황과 공간, 설치 조건을 중심으로 구매 목적을 더 구체화하는 탐색 화면입니다."}
#direction .phone-card:nth-child(3) .phone-meta p::before{content:"추천검색과 탐색 가이드로 막연한 요구를 실제 검색 행동으로 자연스럽게 전환하는 시작 화면입니다."}
#direction .phone-card:nth-child(4) .phone-meta p::before{content:"검색 맥락과 필터를 유지하면서 사용자가 원하는 조건을 빠르게 좁힐 수 있도록 결과 구조를 정리했습니다."}
#direction .phone-card:nth-child(5) .phone-meta p::before{content:"가격·혜택·핵심 스펙과 설치 조건을 같은 기준으로 비교해 구매 후보를 빠르게 압축하는 목록 경험입니다."}
#direction .phone-card:nth-child(6) .phone-meta p::before{content:"선택한 상품들의 차이를 한눈에 확인하고 사용자의 우선순위에 맞는 후보를 남기도록 비교 기준을 단순화했습니다."}
#direction .phone-card:nth-child(7) .phone-meta p::before{content:"가격과 혜택, 상품의 핵심 정보와 리뷰를 구매 판단 순서에 맞춰 배치해 결정에 필요한 근거를 먼저 보여줍니다."}
#direction .phone-card:nth-child(8) .phone-meta p::before{content:"매장 실물 확인, 전문 상담, 배송·설치와 케어 정보를 PDP 안에서 이어 구매 전 불확실성을 줄입니다."}
#direction .phone-card:nth-child(9) .phone-meta p::before{content:"선택한 상품의 최종 금액과 적용 혜택, 배송·설치 조건을 다시 확인해 결제 직전의 조건 변경을 줄입니다."}
#direction .phone-card:nth-child(10) .phone-meta p::before{content:"필수 입력만 남기고 총 결제금액과 혜택을 고정해 보여주어 마지막 단계의 인지 부담을 최소화합니다."}
#direction .phone-card:nth-child(11) .phone-meta p::before{content:"설치 일정과 준비 사항, 폐가전 회수 등 구매 이후 필요한 정보를 하나의 진행 상태로 확인하게 합니다."}
#direction .phone-card:nth-child(12) .phone-meta p::before{content:"보증·A/S·평생Care까지 구매 이력을 기반으로 이어 관리 관계가 구매 완료 뒤에도 끊기지 않도록 합니다."}

@media(max-width:1100px){
  #journey .hm-section-title{width:100%!important;font-size:0!important;line-height:0!important}
  #journey .hm-section-title::before{font-size:52px!important;line-height:1.08!important}
  #direction .phone-gallery{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:42px 26px!important}
  #direction .phone-card{grid-template-columns:minmax(0,44%) minmax(0,56%)!important;gap:20px!important}
  #direction .phone-meta b{font-size:15px!important}
  #direction .phone-meta p::before{font-size:14px!important}
}

@media(max-width:780px){
  #journey .hm-section-title{width:100%!important}
  #journey .hm-section-title::before{content:"그래서 끊어진 여정을,\A어디서 시작해도 다음 행동으로\A이어지는 구조로 다시 설계했습니다.";font-size:36px!important;line-height:1.1!important}
  #direction .phone-gallery{grid-template-columns:1fr!important;gap:34px!important}
  #direction .phone-card{grid-template-columns:minmax(0,42%) minmax(0,58%)!important;gap:16px!important}
  #direction .phone-frame{border-radius:15px!important}
  #direction .phone-frame::before{border-radius:11px!important}
  #direction .phone-meta{padding:12px 0!important}
  #direction .phone-meta span{font-size:9px!important}
  #direction .phone-meta b{font-size:13px!important}
  #direction .phone-meta p::before{font-size:12px!important;line-height:1.55!important}
}

@media(max-width:430px){
  #journey .hm-section-title::before{font-size:33px!important}
  #direction .phone-card{grid-template-columns:minmax(0,43%) minmax(0,57%)!important;gap:14px!important}
  #direction .phone-meta b{font-size:12px!important}
  #direction .phone-meta p::before{font-size:11.5px!important}
}

/* --- himart-test-20260824.css --- */
/* Himart journey test page — 2026-08-24 */
body.himart-page-body.himart-test-page{background:#000000}
.himart-test-page .hm-title{max-width:1160px}
.himart-test-page .hm-section-desc{max-width:820px;line-height:1.62}
.himart-test-page .hm-subcopy{max-width:760px}

/* Behavioral data is framed as signals, not proof. */
.himart-test-page .signal-tag{display:block;margin-bottom:18px;font-family:var(--hm-en);font-size:11px;letter-spacing:.07em;color:var(--hm-blue)}
.himart-test-page .data-card h3{white-space:normal!important}
.himart-test-page .data-card .desc{max-width:1000px!important;line-height:1.62!important}
.himart-test-page .data-card .desc strong{font-weight:500;color:#fff}

/* 02.7 / four concise signal cells with vertical dividers. */
.himart-test-page .data-bridge{margin-top:72px;padding:30px 0 34px;border-top:1px solid var(--hm-line);border-bottom:1px solid var(--hm-line)}
.himart-test-page .data-bridge>.hm-card-no{display:block;margin-bottom:22px;color:var(--hm-blue)!important;font-size:12px!important;font-weight:300!important;line-height:1.3!important;letter-spacing:.04em!important}
.himart-test-page .data-bridge-title{margin:0 0 42px;max-width:900px;font-size:42px;font-weight:100;line-height:1.2;letter-spacing:-.045em}
.himart-test-page .data-bridge-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
.himart-test-page .data-bridge article{min-height:220px;display:flex;flex-direction:column;padding:0 28px}
.himart-test-page .data-bridge article:first-child{padding-left:0}
.himart-test-page .data-bridge article:last-child{padding-right:0}
.himart-test-page .data-bridge article+article{border-left:1px solid var(--hm-line)}
.himart-test-page .data-bridge article span{font-family:var(--hm-en);font-size:11px;color:rgba(255,255,255,.42);letter-spacing:.06em}
.himart-test-page .data-bridge article h4{margin:20px 0 0;font-size:24px;font-weight:100;line-height:1.36;letter-spacing:-.035em}
.himart-test-page .data-bridge article p{margin:auto 0 0;color:rgba(255,255,255,.64);font-size:14px;line-height:1.62}
.himart-test-page .journey-title-emphasis{color:var(--hm-blue);font-weight:400}

/* Traffic graph: legend belongs directly below the plotting area. */
.himart-test-page .chart-wrap{display:grid!important;grid-template-columns:minmax(0,1fr)!important;width:100%!important;overflow:visible!important}
.himart-test-page .chart-wrap::before{display:block!important;width:100%!important;max-width:none!important;background-size:100% auto!important;background-position:left top!important;background-repeat:no-repeat!important}
.himart-test-page .chart-wrap>.chart-legend{position:static!important;display:flex!important;grid-template-columns:none!important;justify-content:flex-start!important;align-items:center!important;align-self:start!important;gap:28px!important;width:100%!important;margin:20px 0 0!important;padding:0!important;transform:none!important;inset:auto!important}
.himart-test-page .chart-wrap>.chart-legend span{display:inline-flex!important;align-items:center!important;width:auto!important;min-width:0!important;margin:0!important}

/* Landing stacked bar: labels use the exact same fractional track as the bar. */
.himart-test-page .landing-chart .stackbar.signal-stack,
.himart-test-page .landing-chart .stacklabels.signal-stack-labels{display:grid!important;grid-template-columns:52.2fr 27.6fr 9.3fr 6.6fr 4.3fr!important;width:100%!important;gap:0!important}
.himart-test-page .landing-chart .stackbar.signal-stack i{display:block!important;width:100%!important;min-width:0!important}
.himart-test-page .landing-chart .stacklabels.signal-stack-labels{margin-top:14px!important;align-items:start!important}
.himart-test-page .landing-chart .stacklabels.signal-stack-labels>div{width:auto!important;min-width:0!important;padding:0 12px 0 0!important;text-align:left!important;transform:none!important}
.himart-test-page .landing-chart .stacklabels.signal-stack-labels b{display:block;margin-bottom:6px}

/* 02 to 03 transition follows the same section rhythm as the rest of the page. */
.himart-test-page #data{padding-bottom:96px!important}
.himart-test-page #journey{padding-top:96px!important}
.himart-test-page #journey>.hm-wrap>.hm-section-head{margin-bottom:82px!important}
.himart-test-page #journey>.hm-wrap>.hm-section-head .hm-section-no{margin-bottom:22px!important}
.himart-test-page #journey>.hm-wrap>.hm-section-head .hm-section-title{max-width:1180px!important;font-size:0!important;line-height:1!important}
.himart-test-page #journey>.hm-wrap>.hm-section-head .hm-section-title::before{content:"그래서 끊어진 여정을, 어디서 시작해도\A다음 행동으로 이어지는 구조로\A다시 설계했습니다.";display:block;white-space:pre-line;font-size:var(--hm-section)!important;line-height:1.06!important;letter-spacing:-.045em;color:#fff}

/* 03.x / use blue numbering throughout the journey chapter. */
.himart-test-page #journey .hm-subsection .hm-subno{color:var(--hm-blue)!important}
.himart-test-page #journey .journey-signal-subsection{margin-top:0!important}
.himart-test-page #journey .journey-redesign-subsection{margin-top:112px!important}
.himart-test-page #journey .journey-signal-subsection>.flow-area,
.himart-test-page #journey .journey-redesign-subsection>.flow-area{margin-top:0!important;padding-top:0!important;border-top:0!important}
.himart-test-page #journey .journey-signal-subsection .hm-subhead,
.himart-test-page #journey .journey-redesign-subsection .hm-subhead{margin-bottom:100px!important}
.himart-test-page #journey .journey-signal-subsection .hm-subtitle{font-size:var(--hm-subsection)!important;line-height:1.18!important}
.himart-test-page #journey .journey-redesign-subsection .forced-redesign-title{font-size:0!important;line-height:1!important}
.himart-test-page #journey .journey-redesign-subsection .forced-redesign-title::before{content:"끊어진 지점을 기준으로, 각 단계가\A다음 행동을 이어주도록 다시 연결했습니다.";display:block;white-space:pre-line;font-family:Pretendard,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:42px;line-height:1.18;letter-spacing:-.045em;color:#fff;font-weight:100}
.himart-test-page #journey .journey-redesign-subsection .forced-redesign-title>span{display:none!important}
.himart-test-page #journey .journey-signal-subsection .hm-subcopy,
.himart-test-page #journey .journey-redesign-subsection .hm-subcopy{margin-top:20px!important}

/* AS-IS journey is a problem-state story, so every small stage label is red. */
.himart-test-page #journey .journey-signal-subsection .flow-node .hm-card-no{color:var(--hm-red)!important}

/* 03.3 / eight compact role cards, four per row. */
.himart-test-page #journey .role-grid{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:16px!important}
.himart-test-page #journey .role-card{min-height:258px!important;padding:22px!important;border:1px solid var(--hm-line)!important;border-top-color:#fff!important;display:flex!important;flex-direction:column!important;background:transparent!important}
.himart-test-page #journey .role-card .hm-role-name{font-size:10px!important;letter-spacing:.07em!important}
.himart-test-page #journey .role-card h4{margin:24px 0 0!important;font-size:23px!important;line-height:1.28!important;letter-spacing:-.035em!important}
.himart-test-page #journey .role-card p{margin:11px 0 0!important;max-width:none!important;font-size:13px!important;line-height:1.29!important;color:rgba(255,255,255,.68)!important}
.himart-test-page #journey .role-card strong{margin-top:auto!important;padding-top:24px!important;font-size:11px!important;line-height:1.5!important;font-weight:400!important;color:rgba(255,255,255,.6)!important;opacity:.6!important}

/* The CARE principle uses Pretendard Light. */
.himart-test-page #brand .direction-list .direction-card:nth-child(2) h4{font-family:Pretendard,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif!important;font-weight:300!important}

/* Final prototype section: four actual screens, two cases per row on desktop. */
.himart-test-page .prototype-intro{display:none!important}
.himart-test-page .prototype-case-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:38px;row-gap:88px;margin-top:86px}
.himart-test-page .prototype-case{display:grid;grid-template-columns:minmax(190px,.82fr) minmax(0,1.18fr);gap:28px;align-items:start;padding-top:26px;border-top:1px solid var(--hm-line);min-width:0}
.himart-test-page .prototype-case-visual{height:620px;display:flex;align-items:flex-start;justify-content:center;padding:0;background:#080808;border-radius:15px;overflow:hidden;min-width:0}
.himart-test-page .prototype-case-visual>img{display:block;width:auto;max-width:100%;height:100%;max-height:100%;object-fit:contain;border-radius:0;image-rendering:auto;filter:blur(2.2px);transform:scale(1.012);opacity:.94}
.himart-test-page .prototype-case-copy{display:flex;flex-direction:column;align-self:start;padding:0;min-width:0;height:620px}
.himart-test-page .prototype-case-copy .hm-card-no{color:var(--hm-blue);margin:0!important;line-height:1!important}
.himart-test-page .prototype-case-copy h3{margin:18px 0 0;max-width:100%;font-size:23px!important;font-weight:100;line-height:1.16!important;letter-spacing:-.035em}
.himart-test-page .prototype-case-copy p{margin:20px 0 0;max-width:100%;color:rgba(255,255,255,.68);font-size:14px;line-height:1.54}
.himart-test-page .prototype-case-copy strong{margin-top:auto;padding:16px 0 0;border-top:1px solid var(--hm-line);font-size:12px;font-weight:400;line-height:1.45;color:rgba(255,255,255,.72)}
.himart-test-page .prototype-case-copy strong b{font-family:inherit;font-size:10px;letter-spacing:0;color:var(--hm-blue);font-weight:400;display:block;margin-bottom:8px}

/* Hi Check: actual screen mounted inside a Galaxy Ultra-style line drawing. */
.himart-test-page .prototype-case.hicheck .prototype-case-visual{align-items:center;background:#000000}
.himart-test-page .galaxy-ultra-mockup{position:relative;width:min(270px,84%);aspect-ratio:9/19.5;border:1px solid rgba(255,255,255,.72);border-radius:34px;padding:7px;background:#000000;box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
.himart-test-page .galaxy-ultra-mockup::before{content:"";position:absolute;z-index:3;left:50%;top:12px;width:8px;height:8px;border-radius:50%;background:#000000;border:1px solid rgba(255,255,255,.45);transform:translateX(-50%)}
.himart-test-page .galaxy-ultra-mockup::after{content:"";position:absolute;right:-3px;top:112px;width:2px;height:72px;border-radius:2px;background:rgba(255,255,255,.56);box-shadow:0 88px 0 rgba(255,255,255,.4)}
.himart-test-page .galaxy-ultra-screen{width:100%;height:100%;overflow:hidden;border-radius:28px;background:#fff}
.himart-test-page .galaxy-ultra-screen img{display:block;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;object-fit:cover!important;filter:none!important;transform:none!important;opacity:1!important}

@media(max-width:1100px){
  .himart-test-page .data-bridge-title{font-size:36px}
  .himart-test-page .data-bridge-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .himart-test-page .data-bridge article{padding:26px!important;border-left:0!important;border-bottom:1px solid var(--hm-line)}
  .himart-test-page .data-bridge article:nth-child(even){border-left:1px solid var(--hm-line)!important}
  .himart-test-page #journey .journey-redesign-subsection .forced-redesign-title::before{font-size:38px}
  .himart-test-page #journey .role-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .himart-test-page .prototype-case-list{column-gap:28px;row-gap:72px}
  .himart-test-page .prototype-case{grid-template-columns:minmax(160px,.8fr) minmax(0,1.2fr);gap:22px}
  .himart-test-page .prototype-case-visual{height:560px}
  .himart-test-page .prototype-case-copy{height:560px}
  .himart-test-page .galaxy-ultra-mockup{width:min(238px,86%)}
}

@media(max-width:780px){
  .himart-test-page .data-bridge{margin-top:58px;padding-top:26px}
  .himart-test-page .data-bridge-title{font-size:30px;margin-bottom:34px}
  .himart-test-page .data-bridge-grid{grid-template-columns:1fr}
  .himart-test-page .data-bridge article,.himart-test-page .data-bridge article:nth-child(even){min-height:0;padding:26px 0!important;border-left:0!important;border-bottom:1px solid var(--hm-line)}
  .himart-test-page .data-bridge article p{margin-top:22px}
  .himart-test-page .chart-wrap>.chart-legend{flex-wrap:wrap!important;gap:12px 20px!important;margin-top:16px!important}
  .himart-test-page .landing-chart .stackbar.signal-stack{grid-template-columns:52.2fr 27.6fr 9.3fr 6.6fr 4.3fr!important}
  .himart-test-page .landing-chart .stacklabels.signal-stack-labels{display:grid!important;grid-template-columns:1fr 1fr!important;gap:16px 18px!important;margin-top:18px!important}
  .himart-test-page .landing-chart .stacklabels.signal-stack-labels>div{padding:0!important}
  .himart-test-page #data{padding-bottom:76px!important}
  .himart-test-page #journey{padding-top:76px!important}
  .himart-test-page #journey>.hm-wrap>.hm-section-head{margin-bottom:64px!important}
  .himart-test-page #journey>.hm-wrap>.hm-section-head .hm-section-title::before{font-size:clamp(42px,10vw,72px)!important;line-height:1.08!important}
  .himart-test-page #journey .journey-redesign-subsection{margin-top:78px!important}
  .himart-test-page #journey .journey-signal-subsection .hm-subhead,
  .himart-test-page #journey .journey-redesign-subsection .hm-subhead{margin-bottom:64px!important}
  .himart-test-page #journey .journey-redesign-subsection .forced-redesign-title::before{font-size:29px;line-height:1.18}
  .himart-test-page #journey .role-grid{grid-template-columns:1fr!important;gap:12px!important}
  .himart-test-page #journey .role-card{min-height:220px!important}
  .himart-test-page .prototype-case-list{grid-template-columns:1fr;gap:82px;margin-top:58px}
  .himart-test-page .prototype-case{grid-template-columns:1fr;gap:32px;padding-top:24px}
  .himart-test-page .prototype-case-visual{height:640px}
  .himart-test-page .prototype-case-copy{height:auto;min-height:0;padding:0}
  .himart-test-page .prototype-case-copy h3{margin-top:18px;font-size:22px!important;line-height:1.16!important}
  .himart-test-page .prototype-case-copy p{margin-top:16px;font-size:14px}
  .himart-test-page .prototype-case-copy strong{margin-top:28px;padding-top:20px}
  .himart-test-page .galaxy-ultra-mockup{width:min(294px,78%)}
}

/* --- himart-test-refine-v2.css --- */
/* Himart journey test refinements v4 — 2026-08-24 */

/* ROLE / FOCUS / SCOPE / TEAM: exact four-way split. */
.himart-test-page .hm-meta{grid-template-columns:repeat(4,minmax(0,1fr))!important}

/* Common secondary-copy module at 50%. Includes bottom descriptor copy. */
.himart-test-page .hm-lead,
.himart-test-page .hm-section-desc,
.himart-test-page .hm-subcopy,
.himart-test-page .data-card .desc,
.himart-test-page .legend-row,
.himart-test-page .chart-legend,
.himart-test-page .hbar span,
.himart-test-page .stacklabels div,
.himart-test-page .pdp-col span,
.himart-test-page .flow-head p,
.himart-test-page .flow-node p,
.himart-test-page .role-card p,
.himart-test-page .role-card strong,
.himart-test-page .prototype-case-copy p,
.himart-test-page .data-bridge article p,
.himart-test-page .sentiment-keywords,
.himart-test-page .conclusion-card p,
.himart-test-page .direction-card p,
.himart-test-page .ring-card p{color:rgba(255,255,255,.50)!important;opacity:1!important}

/* Inline evidence emphasis: white at 80%, no semantic strong styling. */
.himart-test-page .data-emphasis{color:rgba(255,255,255,.80)!important;opacity:1!important;font-weight:300!important}
.himart-test-page .data-card .desc strong{color:rgba(255,255,255,.80)!important;font-weight:300!important}

/* Entry channel: donut is always visible; dot + label stay together on the left of each legend row. */
.himart-test-page .pie{display:block!important;visibility:visible!important;opacity:1!important;clip-path:none!important;transform:none!important;background:conic-gradient(var(--hm-blue) 0 52%,var(--hm-newblue) 52% 83%,var(--hm-green) 83% 93%,var(--hm-yellow) 93% 99%,rgba(255,255,255,.22) 99% 100%)!important}
@media(min-width:781px){
  .himart-test-page .pie-layout{grid-template-columns:360px minmax(0,1fr)!important;column-gap:64px!important}
  .himart-test-page .pie-layout .legend{width:min(520px,100%)!important;max-width:none!important;justify-self:end!important}
  .himart-test-page .pie-layout .legend-row{grid-template-columns:12px minmax(0,1fr) 58px!important;width:100%!important;column-gap:10px!important}
  .himart-test-page .pie-layout .legend-row span{text-align:left!important;justify-self:start!important}
  .himart-test-page .pie-layout .legend-row b{text-align:right!important;justify-self:end!important}
}

/* Flow/role cards: compact multi-line rhythm. All identical flow-card top rules are white 10%. */
.himart-test-page .flow-node{border-top-color:rgba(255,255,255,.10)!important}
.himart-test-page .flow-node h4{line-height:1.02!important}
.himart-test-page .role-card h4,
.himart-test-page .data-bridge-grid article h4{line-height:1.05!important}

/* Traffic chart: restore the original v5 visual. Static axes/grid/labels are visible immediately;
   only the three data series animate, one series after another. */
.himart-test-page .chart-wrap::before{display:none!important}
.himart-test-page .chart-wrap>.chart-svg:not(.traffic-v5-live){display:none!important}
.himart-test-page .traffic-v5-live{display:block!important;width:100%!important;height:auto!important;overflow:visible!important}
.himart-test-page .traffic-v5-live .grid{opacity:1!important}
.himart-test-page .traffic-v5-live text{opacity:1!important}
.himart-test-page .traffic-v5-live .session,
.himart-test-page .traffic-v5-live .purchase,
.himart-test-page .traffic-v5-live .cvr{will-change:stroke-dashoffset}
.himart-test-page .traffic-v5-live .p-dot,
.himart-test-page .traffic-v5-live .c-dot{opacity:0}

/* Journey subsection rhythm. */
.himart-test-page #journey .journey-signal-subsection .hm-subcopy,
.himart-test-page #journey .journey-redesign-subsection .hm-subcopy{margin-top:14px!important}
.himart-test-page .data-card:has(.landing-stack) .landing-stack{margin-top:25px!important;min-height:0!important}
.himart-test-page .landing-chart{padding-top:14px!important}
.himart-test-page .data-card:has(.search-slope) .search-slope{margin-top:25px!important;min-height:0!important}
.himart-test-page .search-slope>div:not(.arrow-head){min-height:150px!important}
.himart-test-page .hbars{gap:14px!important}

/* Landing / PDP palette. */
.himart-test-page .landing-chart .stackbar.signal-stack i:first-child{background:#0572CB!important}
.himart-test-page .landing-chart .stackbar.signal-stack i:nth-child(5){background:#1AEFC4!important}
.himart-test-page .pdp-col i:first-child::after{background:#0572CB!important}
.himart-test-page .pdp-col i:nth-child(2)::after{background:var(--hm-blue)!important}
.himart-test-page .landing-chart .chart-legend span:first-child i{background:#0572CB!important}
.himart-test-page .landing-chart .chart-legend span:nth-child(2) i{background:var(--hm-blue)!important}

/* Prototype proof: the copy area is a virtual alignment box, not a drawn box.
   Keep exactly 30px between device and copy; copy bottom aligns to device bottom. */
.himart-test-page .prototype-case{--device-h:620px;grid-template-columns:minmax(190px,.82fr) minmax(0,1.18fr)!important;gap:30px!important;align-items:start!important;padding-top:0!important;border-top:0!important}
.himart-test-page .prototype-case-visual{height:var(--device-h)!important;display:flex!important;align-items:stretch!important;justify-content:center!important;padding:0!important;background:transparent!important;border-radius:0!important;overflow:visible!important}
.himart-test-page .prototype-case-copy{height:var(--device-h)!important;display:flex!important;flex-direction:column!important;justify-content:flex-end!important;align-self:start!important;padding:0 30px!important;min-width:0!important;border:0!important;background:transparent!important;box-shadow:none!important}
.himart-test-page .prototype-case-copy .hm-card-no{margin:0!important;line-height:1!important}
.himart-test-page .prototype-case-copy h3{margin:18px 0 0!important}
.himart-test-page .prototype-case-copy p{margin:18px 0 0!important;color:rgba(255,255,255,.50)!important}
.himart-test-page .prototype-case-copy strong{margin:24px 0 0!important;padding:16px 0 0!important;border-top:0!important;color:rgba(255,255,255,.50)!important;opacity:1!important}
.himart-test-page .prototype-case-copy strong b{color:rgba(255,255,255,.70)!important;opacity:1!important}
.himart-test-page .galaxy-ultra-mockup{position:relative!important;height:100%!important;width:auto!important;aspect-ratio:9/19.5!important;border:1px solid rgba(255,255,255,.72)!important;border-radius:34px!important;padding:7px!important;background:transparent!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)!important}
.himart-test-page .galaxy-ultra-mockup::before{content:""!important;position:absolute!important;z-index:3!important;left:50%!important;top:12px!important;width:8px!important;height:8px!important;border-radius:50%!important;background:#000000!important;border:1px solid rgba(255,255,255,.48)!important;transform:translateX(-50%)!important}
.himart-test-page .galaxy-ultra-mockup::after{content:""!important;position:absolute!important;right:-3px!important;top:112px!important;width:2px!important;height:72px!important;border-radius:2px!important;background:rgba(255,255,255,.56)!important;box-shadow:0 88px 0 rgba(255,255,255,.40)!important}
.himart-test-page .galaxy-ultra-screen{width:100%!important;height:100%!important;border:1px solid rgba(255,255,255,.10)!important;border-radius:28px!important;background:transparent!important;overflow:hidden!important}
.himart-test-page .galaxy-ultra-screen img,.himart-test-page .prototype-case-visual>img{display:none!important}

/* Other chart drawing on scroll. Pie stays visible; its legend fades in sequentially. */
.himart-test-page .chart-motion{will-change:transform,opacity}
.himart-test-page .pie.chart-motion{opacity:1!important;clip-path:none!important;transform:none!important}
.himart-test-page .pie.chart-motion+.legend .legend-row{opacity:0;transform:translateX(10px);transition:opacity .45s ease,transform .55s cubic-bezier(.2,.8,.2,1)}
.himart-test-page .pie.chart-motion.is-chart-active+.legend .legend-row{opacity:1;transform:none}
.himart-test-page .pie.chart-motion.is-chart-active+.legend .legend-row:nth-child(1){transition-delay:.10s}.himart-test-page .pie.chart-motion.is-chart-active+.legend .legend-row:nth-child(2){transition-delay:.18s}.himart-test-page .pie.chart-motion.is-chart-active+.legend .legend-row:nth-child(3){transition-delay:.26s}.himart-test-page .pie.chart-motion.is-chart-active+.legend .legend-row:nth-child(4){transition-delay:.34s}.himart-test-page .pie.chart-motion.is-chart-active+.legend .legend-row:nth-child(5){transition-delay:.42s}
.himart-test-page .hbars.chart-motion .fill{transform:scaleX(0);transform-origin:left center;transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.himart-test-page .hbars.chart-motion.is-chart-active .fill{transform:scaleX(1)}
.himart-test-page .hbars.chart-motion .hbar:nth-child(2) .fill{transition-delay:.08s}.himart-test-page .hbars.chart-motion .hbar:nth-child(3) .fill{transition-delay:.16s}.himart-test-page .hbars.chart-motion .hbar:nth-child(4) .fill{transition-delay:.24s}.himart-test-page .hbars.chart-motion .hbar:nth-child(5) .fill{transition-delay:.32s}.himart-test-page .hbars.chart-motion .hbar:nth-child(6) .fill{transition-delay:.40s}
.himart-test-page .search-slope.chart-motion strong,.himart-test-page .search-slope.chart-motion .arrow-head{opacity:0;transform:translateY(20px);transition:opacity .65s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
.himart-test-page .search-slope.chart-motion.is-chart-active strong,.himart-test-page .search-slope.chart-motion.is-chart-active .arrow-head{opacity:1;transform:none}
.himart-test-page .search-slope.chart-motion>div:last-child strong{transition-delay:.14s}
.himart-test-page .landing-chart.chart-motion .stackbar i{transform:scaleX(0);transform-origin:left center;transition:transform .75s cubic-bezier(.2,.8,.2,1)}
.himart-test-page .landing-chart.chart-motion.is-chart-active .stackbar i{transform:scaleX(1)}
.himart-test-page .landing-chart.chart-motion .stackbar i:nth-child(2){transition-delay:.08s}.himart-test-page .landing-chart.chart-motion .stackbar i:nth-child(3){transition-delay:.16s}.himart-test-page .landing-chart.chart-motion .stackbar i:nth-child(4){transition-delay:.24s}.himart-test-page .landing-chart.chart-motion .stackbar i:nth-child(5){transition-delay:.32s}
.himart-test-page .landing-chart.chart-motion .pdp-col i::after{transform:scaleX(0);transform-origin:left center;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.himart-test-page .landing-chart.chart-motion.is-chart-active .pdp-col i::after{transform:scaleX(1)}
.himart-test-page .landing-chart.chart-motion .pdp-col:nth-child(2) i::after{transition-delay:.12s}.himart-test-page .landing-chart.chart-motion .pdp-col:nth-child(3) i::after{transition-delay:.24s}

@media (min-width:781px) and (max-width:1100px){
  .flow-row.row4{display:grid!important;grid-template-columns:minmax(0,1fr) 32px minmax(0,1fr) 32px minmax(0,1fr) 32px minmax(0,1fr)!important;justify-content:stretch!important}
  .flow-row.row4 .flow-node{width:100%!important}.flow-row.row4 .flow-arrow{width:32px!important}
  .himart-test-page .prototype-case{--device-h:560px;gap:30px!important}
}
@media(max-width:780px){
  .himart-test-page .hm-meta{grid-template-columns:1fr 1fr!important}
  .himart-test-page .pie-layout .legend{width:100%!important;justify-self:stretch!important}
  .himart-test-page .pie-layout .legend-row{grid-template-columns:10px 1fr auto!important;width:100%!important}
  .himart-test-page .pie-layout .legend-row span{text-align:left!important}
  .himart-test-page .search-slope>div:not(.arrow-head){min-height:120px!important}
  .himart-test-page .prototype-case{--device-h:640px;grid-template-columns:1fr!important;gap:30px!important}
  .himart-test-page .prototype-case-copy{height:auto!important;min-height:0!important;justify-content:flex-start!important;padding:0 24px!important}
  .himart-test-page .prototype-case-visual{height:var(--device-h)!important}
  .himart-test-page .galaxy-ultra-mockup{height:100%!important;max-width:78%!important}
}

/* --- himart-test-fix-20260824.css --- */
/* Himart journey test targeted fixes — 2026-08-24 */

/* Main content width: expand the purchase-journey canvas from 1280px to 1440px. */
body.himart-test-page{
  --hm-wrap:1440px!important;
}

/* Prototype case titles: never split a Korean word in the middle. */
.himart-test-page .prototype-case-copy h3{
  word-break:keep-all!important;
  overflow-wrap:normal!important;
  word-wrap:normal!important;
  white-space:normal!important;
}

/* Role cards: force white 40% top rule across the full module family. */
body.himart-test-page .role-card{
  border-top:1px solid rgba(255,255,255,.40)!important;
  box-shadow:none!important;
}

/* Journey flow cards: force white 40% top rule across every identical card. */
body.himart-test-page .flow-node{
  border-top:1px solid rgba(255,255,255,.40)!important;
  box-shadow:none!important;
}

/* UX direction rows: reduce vertical footprint by 30% and vertically center both columns. */
body.himart-test-page .direction-card{
  min-height:154px!important;
  padding:24px 8px 26px!important;
  row-gap:10px!important;
  align-content:center!important;
  align-items:center!important;
}
body.himart-test-page .direction-card .hm-card-no{
  align-self:end!important;
  margin:0!important;
}
body.himart-test-page .direction-card h4{
  align-self:start!important;
  margin:0!important;
}
body.himart-test-page .direction-card p{
  align-self:center!important;
  margin:0!important;
}

/* --- himart-wide-test.css --- */
/* Himart wide-layout experiment — 2026-08-25
   Keep the 1440px master canvas, but let titles, data visualizations, cards and journey flows use it more assertively.
   Reading-width body copy remains intentionally constrained. */

body.himart-wide-test-page{
  --hm-wrap:1440px!important;
}

@media(min-width:1201px){
  /* Editorial hierarchy: wider display type, readable body copy. */
  body.himart-wide-test-page .hm-title{max-width:1280px!important}
  body.himart-wide-test-page .hm-section-title{max-width:1220px!important}
  body.himart-wide-test-page .hm-subtitle{max-width:1160px!important}
  body.himart-wide-test-page .hm-lead{max-width:980px!important}
  body.himart-wide-test-page .hm-section-desc{max-width:820px!important}
  body.himart-wide-test-page .hm-subcopy{max-width:840px!important}
  body.himart-wide-test-page .data-card h3{max-width:1160px!important}
  body.himart-wide-test-page .data-card .desc{max-width:960px!important}
  body.himart-wide-test-page .flow-head h3{max-width:1100px!important}
  body.himart-wide-test-page .flow-head p{max-width:860px!important}

  /* Use the full canvas for visual systems. */
  body.himart-wide-test-page .data-viz,
  body.himart-wide-test-page .chart-wrap,
  body.himart-wide-test-page .landing-stack,
  body.himart-wide-test-page .pdp-columns,
  body.himart-wide-test-page .direction-list,
  body.himart-wide-test-page .flow-area,
  body.himart-wide-test-page .role-grid,
  body.himart-wide-test-page .prototype-case-list{width:100%!important;max-width:none!important}

  /* Entry-channel chart gets more breathing room without widening prose. */
  body.himart-wide-test-page .pie-layout{
    grid-template-columns:420px minmax(0,1fr)!important;
    gap:88px!important;
  }
  body.himart-wide-test-page .pie{width:420px!important}

  /* UX direction rows: more confident left/right composition on the wider canvas. */
  body.himart-wide-test-page .direction-card{
    grid-template-columns:minmax(390px,.76fr) minmax(0,1.24fr)!important;
    column-gap:88px!important;
  }

  /* Journey cards expand with the canvas instead of staying at the old fixed 252px width. */
  body.himart-wide-test-page .flow-row.row4{
    grid-template-columns:minmax(0,1fr) 56px minmax(0,1fr) 56px minmax(0,1fr) 56px minmax(0,1fr)!important;
    justify-content:stretch!important;
  }
  body.himart-wide-test-page .flow-row.row3{
    grid-template-columns:minmax(0,1fr) 56px minmax(0,1fr) 56px minmax(0,1fr)!important;
    justify-content:stretch!important;
  }
  body.himart-wide-test-page .flow-node{
    width:100%!important;
    min-width:0!important;
    height:276px!important;
    padding:26px!important;
  }
  body.himart-wide-test-page .flow-arrow{width:56px!important}

  /* Keep journey rule endpoints tied to card geometry at any desktop width. */
  body.himart-wide-test-page #data .flow-group:nth-child(1),
  body.himart-wide-test-page #journey .flow-group:nth-child(1){
    --line-left:0px!important;
    --line-width:calc(((100% - 168px) / 4) * 3 + 112px)!important;
  }
  body.himart-wide-test-page #data .flow-group:nth-child(2),
  body.himart-wide-test-page #journey .flow-group:nth-child(2){
    --line-left:0px!important;
    --line-width:calc(((100% - 168px) / 4) * 2 + 56px)!important;
  }

  /* Larger visual cards, while keeping 2-up reading rhythm. */
  body.himart-wide-test-page .prototype-case-list{
    column-gap:48px!important;
    row-gap:96px!important;
  }
  body.himart-wide-test-page .prototype-case{
    grid-template-columns:minmax(220px,.84fr) minmax(0,1.16fr)!important;
    gap:34px!important;
  }
  body.himart-wide-test-page .prototype-case-visual,
  body.himart-wide-test-page .prototype-case-copy{height:660px!important}

  /* Numeric/data comparisons benefit from the added horizontal room. */
  body.himart-wide-test-page .number-pair{gap:30px!important}
  body.himart-wide-test-page .hbar{grid-template-columns:160px minmax(0,1fr) 84px!important;gap:20px!important}
  body.himart-wide-test-page .pdp-col{grid-template-columns:205px minmax(0,1fr)!important;gap:10px 24px!important}
}

/* Avoid an abrupt desktop/tablet jump. */
@media(min-width:781px) and (max-width:1200px){
  body.himart-wide-test-page{--hm-wrap:1100px!important}
}

/* 03.3 role labels: current 10px -> 25px (2.5x). */
body.himart-wide-test-page #journey .role-card .hm-role-name{
  font-size:25px!important;
  line-height:1!important;
  letter-spacing:.04em!important;
}

/* Alternating chapter treatment: 02 / 04 use black mixed with 5% white, keeping the dark-theme visual system intact. */
body.himart-wide-test-page #data,
body.himart-wide-test-page #direction{
  --hm-local-text:#fff;
  --hm-local-copy:rgba(255,255,255,.50);
  --hm-local-dim:rgba(255,255,255,.38);
  --hm-local-line:rgba(255,255,255,.14);
  background:#0D0D0D!important;
  color:var(--hm-local-text)!important;
}
body.himart-wide-test-page #data .hm-wrap,
body.himart-wide-test-page #direction .hm-wrap{color:var(--hm-local-text)!important}
body.himart-wide-test-page #data .hm-section-title,
body.himart-wide-test-page #data .data-card h3,
body.himart-wide-test-page #data .data-bridge-title,
body.himart-wide-test-page #data .data-bridge-grid h4,
body.himart-wide-test-page #data .number-panel strong,
body.himart-wide-test-page #data .number-panel h4,
body.himart-wide-test-page #data .landing-chart h4,
body.himart-wide-test-page #direction .hm-section-title,
body.himart-wide-test-page #direction .hm-subtitle,
body.himart-wide-test-page #direction .direction-card h4,
body.himart-wide-test-page #direction .prototype-case-copy h3{color:#fff!important}
body.himart-wide-test-page #data .hm-section-desc,
body.himart-wide-test-page #data .data-card .desc,
body.himart-wide-test-page #data .data-bridge-grid p,
body.himart-wide-test-page #data .number-panel p,
body.himart-wide-test-page #data .legend-row,
body.himart-wide-test-page #data .hbar span,
body.himart-wide-test-page #data .stacklabels div,
body.himart-wide-test-page #data .pdp-col span,
body.himart-wide-test-page #data .hm-source,
body.himart-wide-test-page #direction .hm-section-desc,
body.himart-wide-test-page #direction .hm-subcopy,
body.himart-wide-test-page #direction .direction-card p,
body.himart-wide-test-page #direction .prototype-case-copy p{color:var(--hm-local-copy)!important}
body.himart-wide-test-page #data .data-emphasis,
body.himart-wide-test-page #data .legend-row b,
body.himart-wide-test-page #data .stacklabels b,
body.himart-wide-test-page #direction .prototype-case-copy strong{color:rgba(255,255,255,.80)!important}
body.himart-wide-test-page #data .data-card,
body.himart-wide-test-page #data .data-bridge,
body.himart-wide-test-page #data .data-bridge article+article,
body.himart-wide-test-page #data .landing-chart,
body.himart-wide-test-page #data .hm-source,
body.himart-wide-test-page #direction .hm-subsection,
body.himart-wide-test-page #direction .direction-card,
body.himart-wide-test-page #direction .prototype-case,
body.himart-wide-test-page #direction .prototype-case-copy strong{border-color:var(--hm-local-line)!important}
body.himart-wide-test-page #data .number-panel{
  border-color:var(--hm-local-line)!important;
  border-top-color:rgba(255,255,255,.40)!important;
}
body.himart-wide-test-page #data .legend-row{border-bottom-color:rgba(255,255,255,.08)!important}
body.himart-wide-test-page #data .track,
body.himart-wide-test-page #data .pdp-col i{background:rgba(255,255,255,.08)!important}
body.himart-wide-test-page #data .pie::after{background:#0D0D0D!important}
body.himart-wide-test-page #data .pie-center{color:#fff!important}
body.himart-wide-test-page #data .pie-center::after{color:var(--hm-local-dim)!important}
body.himart-wide-test-page #direction .direction-card,
body.himart-wide-test-page #direction .prototype-case{background:transparent!important}
body.himart-wide-test-page #direction .prototype-case-visual{background:#0D0D0D!important}
body.himart-wide-test-page #direction .galaxy-ultra-mockup{
  background:#0D0D0D!important;
  border-color:rgba(255,255,255,.42)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)!important;
}
body.himart-wide-test-page #direction .galaxy-ultra-mockup::before{
  background:#0D0D0D!important;
  border-color:rgba(255,255,255,.34)!important;
}
body.himart-wide-test-page #direction .galaxy-ultra-mockup::after{
  background:rgba(255,255,255,.46)!important;
  box-shadow:0 88px 0 rgba(255,255,255,.34)!important;
}

/* --- himart-wide-spacing-300.css --- */
/* Wide test — hero title spacing + fixed chapter-head to first divider spacing */
body.himart-wide-test-page .hm-hero-bottom{
  padding-top:400px!important;
}

body.himart-wide-test-page #brand > .hm-wrap > .hm-section-head,
body.himart-wide-test-page #data > .hm-wrap > .hm-section-head,
body.himart-wide-test-page #journey > .hm-wrap > .hm-section-head,
body.himart-wide-test-page #direction > .hm-wrap > .hm-section-head{
  margin-bottom:300px!important;
}

/* --- himart-wide-role-v2.css --- */
/* Wide test — 03.3 / ROLE DEFINITION hierarchy */

/* HOME / SEARCH / PDP etc. become the primary label and switch from blue to white. */
body.himart-wide-test-page #journey .role-card .hm-role-name{
  color:#fff!important;
  font-size:25px!important;
  line-height:1.04!important;
  letter-spacing:.02em!important;
  font-weight:300!important;
}

/* All Korean copy inside the role cards uses one 16px type scale. */
body.himart-wide-test-page #journey .role-card h4,
body.himart-wide-test-page #journey .role-card p,
body.himart-wide-test-page #journey .role-card strong{
  font-size:16px!important;
}
body.himart-wide-test-page #journey .role-card h4{
  margin-top:24px!important;
  line-height:1.32!important;
  font-weight:500!important;
}
body.himart-wide-test-page #journey .role-card p{
  margin-top:14px!important;
  line-height:1.55!important;
  color:rgba(255,255,255,.58)!important;
}
body.himart-wide-test-page #journey .role-card strong{
  margin-top:auto!important;
  padding-top:24px!important;
  line-height:1.5!important;
  font-weight:300!important;
  color:rgba(255,255,255,.42)!important;
  opacity:1!important;
}

/* Desktop: always four cards per row. */
@media(min-width:1201px){
  body.himart-wide-test-page #journey .role-grid{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:18px!important;
  }
  body.himart-wide-test-page #journey .role-card{
    min-height:330px!important;
    padding:26px!important;
  }
}

/* --- himart-wide-content-v4.css --- */
/* Wide Himart content refinement v4 — 2026-08-25
   Editorial rule: hero display type and annotation labels are exceptions.
   All main case-study prose uses only 40 / 24 / 16px. */
body.himart-wide-test-page{
  --hm-wide-emphasis:40px;
  --hm-wide-small-title:24px;
  --hm-wide-body:16px;
}

/* Remove report-style subsection labels; the readable title carries the number instead. */
body.himart-wide-test-page .hm-subhead>.hm-subno,
body.himart-wide-test-page .data-card-head>.hm-card-no,
body.himart-wide-test-page .data-bridge>.hm-card-no,
body.himart-wide-test-page #brand .direction-card>.hm-card-no,
body.himart-wide-test-page #direction .prototype-case-copy>.hm-card-no{
  display:none!important;
}

/* Three-size typography system for actual case-study content. */
body.himart-wide-test-page .hm-section-title,
body.himart-wide-test-page .hm-subtitle,
body.himart-wide-test-page .forced-redesign-title,
body.himart-wide-test-page .data-bridge-title,
body.himart-wide-test-page .flow-head h3{
  font-size:var(--hm-wide-emphasis)!important;
  line-height:1.12!important;
  letter-spacing:-.042em!important;
}
body.himart-wide-test-page #journey .journey-redesign-subsection .forced-redesign-title::before{
  font-size:var(--hm-wide-emphasis)!important;
  line-height:1.12!important;
}
body.himart-wide-test-page .data-card h3,
body.himart-wide-test-page .voice-group-title,
body.himart-wide-test-page .sentiment-title,
body.himart-wide-test-page .sentiment-conclusion>h4,
body.himart-wide-test-page .conclusion-card h5,
body.himart-wide-test-page .direction-card h4,
body.himart-wide-test-page .data-bridge-grid h4,
body.himart-wide-test-page .role-card h4,
body.himart-wide-test-page .flow-node h4,
body.himart-wide-test-page .prototype-case-copy h3{
  font-size:var(--hm-wide-small-title)!important;
  line-height:1.24!important;
}
body.himart-wide-test-page .hm-lead,
body.himart-wide-test-page .hm-section-desc,
body.himart-wide-test-page .hm-subcopy,
body.himart-wide-test-page .data-card .desc,
body.himart-wide-test-page .voice-group p,
body.himart-wide-test-page .ring-card p,
body.himart-wide-test-page .conclusion-card p,
body.himart-wide-test-page .direction-card p,
body.himart-wide-test-page .data-bridge-grid p,
body.himart-wide-test-page .role-card p,
body.himart-wide-test-page .flow-node p,
body.himart-wide-test-page .prototype-case-copy p,
body.himart-wide-test-page .flow-conclusion{
  font-size:var(--hm-wide-body)!important;
  line-height:1.58!important;
}

/* Reduce title-to-explanation spacing by about 30% across matching editorial modules. */
body.himart-wide-test-page .hm-section-desc{
  margin-top:22px!important;
}
body.himart-wide-test-page .hm-subhead .hm-subtitle + .hm-subcopy,
body.himart-wide-test-page .hm-subhead .forced-redesign-title + .hm-subcopy{
  margin-top:14px!important;
}
body.himart-wide-test-page .data-card-head .desc{
  margin-top:14px!important;
}

/* 01.3 sentiment ratio: tighten title-to-graph spacing. */
body.himart-wide-test-page #brand .sentiment-title{
  margin-top:54px!important;
  margin-bottom:28px!important;
}

/* User-feedback synthesis: one connected comparison frame with a center divider. */
body.himart-wide-test-page #brand .sentiment-conclusion>h4{
  margin:0 0 28px!important;
  font-weight:300!important;
}
body.himart-wide-test-page #brand .conclusion-grid{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:0!important;
  border:1px solid rgba(255,255,255,.16)!important;
  background:transparent!important;
}
body.himart-wide-test-page #brand .conclusion-card{
  min-height:300px!important;
  height:auto!important;
  padding:36px 40px!important;
  border:0!important;
  border-top:3px solid var(--hm-blue)!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:space-between!important;
  background:transparent!important;
  box-sizing:border-box!important;
}
body.himart-wide-test-page #brand .conclusion-card.negative{
  border-left:1px solid rgba(255,255,255,.16)!important;
  border-top-color:var(--hm-red)!important;
}
body.himart-wide-test-page #brand .conclusion-card h5{
  margin:0!important;
  font-weight:500!important;
  color:#fff!important;
}
body.himart-wide-test-page #brand .conclusion-card p{
  margin:42px 0 0!important;
  color:rgba(255,255,255,.50)!important;
}

/* CARE wording remains Korean-light rather than display/English treatment. */
body.himart-wide-test-page #brand .direction-list .direction-card:nth-child(2) h4{
  font-family:Pretendard,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif!important;
  font-weight:300!important;
}

/* Removing the PDP-after-action comparison leaves one landing chart: let it use the row. */
body.himart-wide-test-page #data .data-card:has(.landing-stack) .landing-stack{
  grid-template-columns:1fr!important;
}
body.himart-wide-test-page #data .landing-stack>.landing-chart:only-child{
  width:100%!important;
  max-width:none!important;
}

@media(max-width:780px){
  body.himart-wide-test-page{
    --hm-wide-emphasis:34px;
    --hm-wide-small-title:22px;
    --hm-wide-body:16px;
  }
  body.himart-wide-test-page #brand .conclusion-grid{grid-template-columns:1fr!important}
  body.himart-wide-test-page #brand .conclusion-card{min-height:250px!important;padding:30px 26px!important}
  body.himart-wide-test-page #brand .conclusion-card.negative{border-left:0!important;border-top:1px solid rgba(255,255,255,.16)!important}
}

/* --- himart-wide-refine-v5.css --- */
/* Wide Himart refinement v5 — 2026-08-25 */

/* HERO: lead sits directly under the title; preserve a 300px editorial break before meta. */
body.himart-wide-test-page .hm-hero-bottom{
  padding-top:20px!important;
}
body.himart-wide-test-page .hm-hero-bottom .hm-lead{
  margin-top:0!important;
}
body.himart-wide-test-page .hm-hero-bottom .hm-meta{
  margin-top:300px!important;
}

/* Meta table: remove all vertical dividers. */
body.himart-wide-test-page .hm-meta>div{
  border-left:0!important;
  border-right:0!important;
}

/* Chapter title to first content: 300px -> 200px. */
@media(min-width:781px){
  body.himart-wide-test-page #brand>.hm-wrap>.hm-section-head,
  body.himart-wide-test-page #data>.hm-wrap>.hm-section-head,
  body.himart-wide-test-page #journey>.hm-wrap>.hm-section-head,
  body.himart-wide-test-page #direction>.hm-wrap>.hm-section-head{
    margin-bottom:200px!important;
  }
}

/* Editorial hierarchy: chapter titles remain 40px; subsection titles are 32px. */
body.himart-wide-test-page .hm-section-title{
  font-size:40px!important;
  line-height:1.12!important;
}
body.himart-wide-test-page .hm-subtitle,
body.himart-wide-test-page .forced-redesign-title,
body.himart-wide-test-page #journey .journey-redesign-subsection .forced-redesign-title::before{
  font-size:32px!important;
  line-height:1.18!important;
}

/* Remove the report-style rules above subsection headings. */
body.himart-wide-test-page .hm-subsection{
  border-top:0!important;
}
body.himart-wide-test-page .hm-subhead{
  border-top:0!important;
  padding-top:0!important;
}

/* Readable inline numbering added by v5 JS. */
body.himart-wide-test-page .wide-title-index{
  color:var(--hm-blue)!important;
  font:300 1em/1 var(--hm-en)!important;
  letter-spacing:0!important;
}

/* Sentiment ratio: keyword block begins at a fixed 70px offset. */
body.himart-wide-test-page #brand .sentiment-keywords{
  margin-top:70px!important;
}

/* Feedback synthesis: reduce the oversized flexible middle space by about half. */
body.himart-wide-test-page #brand .conclusion-card{
  min-height:250px!important;
  height:auto!important;
  padding:36px 40px!important;
}
body.himart-wide-test-page #brand .conclusion-card p{
  margin-top:24px!important;
}

/* Data-card title to body-copy spacing: 20% tighter than the previous 14px. */
body.himart-wide-test-page #data .data-card-head .desc{
  margin-top:11px!important;
}

/* Chart headings at one consistent body-level size. */
body.himart-wide-test-page #data .landing-chart>h4,
body.himart-wide-test-page #data .data-viz>h4,
body.himart-wide-test-page #data .chart-wrap>h4{
  font-size:16px!important;
  line-height:1.4!important;
  font-weight:300!important;
}

/* Shared segmented-bar language for entry channel and landing-next-action. */
body.himart-wide-test-page .wide-segmented-chart{
  width:100%!important;
  min-height:0!important;
  margin-top:28px!important;
}
body.himart-wide-test-page .wide-segmented-bar{
  display:flex!important;
  width:100%!important;
  height:80px!important;
  overflow:hidden!important;
  border:1px solid rgba(255,255,255,.12)!important;
  background:rgba(255,255,255,.06)!important;
}
body.himart-wide-test-page .wide-segmented-bar .wide-segment{
  position:relative!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-width:0!important;
  height:100%!important;
  box-sizing:border-box!important;
  color:#fff!important;
  font-family:var(--hm-en)!important;
  font-size:16px!important;
  font-weight:300!important;
  line-height:1.12!important;
  text-align:center!important;
  white-space:nowrap!important;
  overflow:hidden!important;
}
body.himart-wide-test-page .wide-segmented-bar .wide-segment+ .wide-segment{
  border-left:1px solid rgba(0,0,0,.18)!important;
}
body.himart-wide-test-page .wide-segmented-bar .wide-segment small{
  display:block!important;
  margin-left:6px!important;
  color:#fff!important;
  font:inherit!important;
  opacity:.82!important;
}
body.himart-wide-test-page .wide-segmented-bar .wide-segment.is-tiny span{
  display:none!important;
}
body.himart-wide-test-page .wide-segmented-note{
  margin-top:12px!important;
  color:rgba(255,255,255,.38)!important;
  font-size:12px!important;
  line-height:1.4!important;
}

/* Existing landing chart adopts the same 80px segmented-bar grammar. */
body.himart-wide-test-page #data .landing-stack{
  display:block!important;
}
body.himart-wide-test-page #data .landing-chart{
  width:100%!important;
  max-width:none!important;
}
body.himart-wide-test-page #data .landing-chart .stacklabels,
body.himart-wide-test-page #data .landing-chart .chart-legend{
  display:none!important;
}

/* Role cards: Averta Light, blue 24px role labels; top padding only increases to 36px. */
body.himart-wide-test-page #journey .role-card{
  padding:36px 26px 26px!important;
}
body.himart-wide-test-page #journey .role-card .hm-role-name{
  font-family:var(--hm-en)!important;
  font-size:24px!important;
  font-weight:300!important;
  line-height:1!important;
  letter-spacing:.02em!important;
  color:var(--hm-blue)!important;
}
body.himart-wide-test-page #journey .role-card h4{
  margin-top:28px!important;
}
body.himart-wide-test-page #journey .role-card p{
  margin-top:10px!important;
}
body.himart-wide-test-page #journey .role-card strong{
  font-size:12px!important;
  line-height:1.5!important;
}

@media(max-width:780px){
  body.himart-wide-test-page .hm-hero-bottom .hm-meta{margin-top:160px!important}
  body.himart-wide-test-page .hm-subtitle,
  body.himart-wide-test-page .forced-redesign-title,
  body.himart-wide-test-page #journey .journey-redesign-subsection .forced-redesign-title::before{font-size:28px!important}
  body.himart-wide-test-page .wide-segmented-bar{height:72px!important}
  body.himart-wide-test-page .wide-segmented-bar .wide-segment{font-size:12px!important}
  body.himart-wide-test-page #brand .conclusion-card{min-height:220px!important;padding:30px 26px!important}
}

/* --- himart-wide-refine-v6.css --- */
/* Wide Himart refinement v6 — 2026-08-25 */

/* 01 chapter starts exactly 200px after the hero meta table. */
body.himart-wide-test-page .hm-hero{padding-bottom:0!important}
body.himart-wide-test-page #brand{padding-top:200px!important}

/* Chapter headline -> first content rhythm: 100px across the case. */
body.himart-wide-test-page #brand>.hm-wrap>.hm-section-head,
body.himart-wide-test-page #data>.hm-wrap>.hm-section-head,
body.himart-wide-test-page #journey>.hm-wrap>.hm-section-head,
body.himart-wide-test-page #direction>.hm-wrap>.hm-section-head{
  margin-bottom:100px!important;
}

/* Qualitative subsection titles remain 32px; numbering is part of the readable title. */
body.himart-wide-test-page #brand .hm-subtitle{font-size:32px!important;line-height:1.18!important}
body.himart-wide-test-page #brand .wide-title-index{color:inherit!important;font:inherit!important}

/* Sentiment ratio labels: body-level 16px with a 20px gap to the following rule/card. */
body.himart-wide-test-page #brand .sentiment-title,
body.himart-wide-test-page #brand .sentiment-conclusion>h4{
  font-size:16px!important;
  line-height:1.45!important;
  font-weight:300!important;
  margin:0 0 20px!important;
}

/* Shrink the sentiment cards with the reduced number-to-keyword distance. */
body.himart-wide-test-page #brand .sentiment-block{
  min-height:0!important;
  padding:30px 32px 30px!important;
}
body.himart-wide-test-page #brand .sentiment-keywords{
  margin-top:56px!important;
}

/* UX principle titles: complete title, including index, is blue. */
body.himart-wide-test-page #brand .direction-card h4,
body.himart-wide-test-page #brand .direction-card h4 .wide-title-index{
  color:var(--hm-blue)!important;
}

/* Quantitative evidence: one shared 100px rhythm. Every I—VI block gets a rule 40px above its title. */
body.himart-wide-test-page #data .data-list{
  gap:0!important;
}
body.himart-wide-test-page #data .data-card,
body.himart-wide-test-page #data .data-card:first-child{
  border-top:1px solid var(--hm-local-line,var(--hm-line))!important;
  padding:40px 0 100px!important;
}
body.himart-wide-test-page #data .data-card-head{
  margin-bottom:40px!important;
}
body.himart-wide-test-page #data .data-card-head .desc{
  margin-top:9px!important;
}

/* Shared segmented chart grammar: 110px high, left aligned, Averta Thin label + Regular value. */
body.himart-wide-test-page .wide-segmented-chart{margin-top:28px!important}
body.himart-wide-test-page .wide-segmented-bar{
  height:110px!important;
  align-items:stretch!important;
}
body.himart-wide-test-page .wide-segmented-bar .wide-segment{
  justify-content:flex-start!important;
  align-items:center!important;
  padding:0 22px!important;
  text-align:left!important;
  font-family:var(--hm-en)!important;
  color:#fff!important;
}
body.himart-wide-test-page .wide-segmented-bar .wide-segment span{
  display:flex!important;
  align-items:baseline!important;
  gap:10px!important;
  min-width:0!important;
  color:#fff!important;
  font-family:var(--hm-en)!important;
  font-size:18px!important;
  font-weight:300!important;
  line-height:1!important;
}
body.himart-wide-test-page .wide-segmented-bar .wide-segment small{
  display:inline!important;
  margin:0!important;
  color:#fff!important;
  font-family:var(--hm-en)!important;
  font-size:18px!important;
  font-weight:400!important;
  line-height:1!important;
  opacity:1!important;
}
body.himart-wide-test-page .wide-segmented-bar .wide-segment.is-small{padding-left:16px!important;padding-right:12px!important}
body.himart-wide-test-page .wide-segmented-bar .wide-segment.is-tiny{padding:0!important}
body.himart-wide-test-page .wide-segmented-bar .wide-segment.is-tiny span{display:none!important}

/* Graph-level headings stay at the 16px body level. */
body.himart-wide-test-page #data .landing-chart>h4,
body.himart-wide-test-page #data .data-viz>h4,
body.himart-wide-test-page #data .chart-wrap>h4{
  font-size:16px!important;
  line-height:1.4!important;
  font-weight:300!important;
  margin-bottom:20px!important;
}

@media(max-width:780px){
  body.himart-wide-test-page #brand{padding-top:120px!important}
  body.himart-wide-test-page #brand>.hm-wrap>.hm-section-head,
  body.himart-wide-test-page #data>.hm-wrap>.hm-section-head,
  body.himart-wide-test-page #journey>.hm-wrap>.hm-section-head,
  body.himart-wide-test-page #direction>.hm-wrap>.hm-section-head{margin-bottom:72px!important}
  body.himart-wide-test-page #data .data-card,
  body.himart-wide-test-page #data .data-card:first-child{padding:32px 0 72px!important}
  body.himart-wide-test-page .wide-segmented-bar{height:88px!important}
  body.himart-wide-test-page .wide-segmented-bar .wide-segment{padding:0 12px!important}
  body.himart-wide-test-page .wide-segmented-bar .wide-segment span,
  body.himart-wide-test-page .wide-segmented-bar .wide-segment small{font-size:13px!important;gap:5px!important}
}

/* --- himart-wide-system-lock-v1.css --- */
/* HIMART WIDE — TYPOGRAPHY & SPACING SYSTEM LOCK v1
   This file is intentionally loaded last.
   Unless a later explicit override is added, these rules win. */

body.himart-wide-test-page{
  --hm-lock-page-title:82px;
  --hm-lock-major-title:42px;
  --hm-lock-mid-title:28px;
  --hm-lock-small-title:22px;
  --hm-lock-body:16px;
  --hm-lock-note:12px;
  --hm-lock-section-top:200px;
  --hm-lock-major-to-mid:100px;
  --hm-lock-mid-to-small:50px;
  --hm-lock-mid-block-gap:100px;
  --hm-lock-title-copy-gap:20px;
  --hm-lock-mid-rule-gap:40px;
  --hm-lock-rule:rgba(255,255,255,.10);
}

/* ---------- TYPE SCALE ---------- */
/* Page title */
body.himart-wide-test-page .hm-title{
  font-size:var(--hm-lock-page-title)!important;
  line-height:1.04!important;
}

/* Major titles: chapter / section headlines */
body.himart-wide-test-page .hm-section-title,
body.himart-wide-test-page #journey>.hm-wrap>.hm-section-head .hm-section-title::before{
  font-size:var(--hm-lock-major-title)!important;
  line-height:1.12!important;
}

/* Mid titles: the narrative blocks directly under each major title */
body.himart-wide-test-page .hm-subtitle,
body.himart-wide-test-page .forced-redesign-title,
body.himart-wide-test-page #journey .journey-redesign-subsection .forced-redesign-title::before,
body.himart-wide-test-page .data-card h3,
body.himart-wide-test-page .data-bridge-title,
body.himart-wide-test-page .flow-head h3{
  font-size:var(--hm-lock-mid-title)!important;
  line-height:1.2!important;
}

/* Small titles */
body.himart-wide-test-page .keyword-group h3,
body.himart-wide-test-page .voice-group-title,
body.himart-wide-test-page .sentiment-title,
body.himart-wide-test-page .sentiment-conclusion>h4,
body.himart-wide-test-page .conclusion-card h5,
body.himart-wide-test-page .direction-card h4,
body.himart-wide-test-page .data-bridge-grid article h4,
body.himart-wide-test-page .role-card h4,
body.himart-wide-test-page .flow-node h4,
body.himart-wide-test-page .prototype-case-copy h3{
  font-size:var(--hm-lock-small-title)!important;
  line-height:1.28!important;
}

/* Body copy */
body.himart-wide-test-page .hm-lead,
body.himart-wide-test-page .hm-section-desc,
body.himart-wide-test-page .hm-subcopy,
body.himart-wide-test-page .data-card .desc,
body.himart-wide-test-page .keyword-pill,
body.himart-wide-test-page .voice-group p,
body.himart-wide-test-page .ring-card p,
body.himart-wide-test-page .sentiment-keywords,
body.himart-wide-test-page .conclusion-card p,
body.himart-wide-test-page .direction-card p,
body.himart-wide-test-page .data-bridge-grid article p,
body.himart-wide-test-page .role-card p,
body.himart-wide-test-page .flow-node p,
body.himart-wide-test-page .prototype-case-copy p,
body.himart-wide-test-page .flow-conclusion,
body.himart-wide-test-page .legend-row,
body.himart-wide-test-page .hbar span,
body.himart-wide-test-page .stacklabels div,
body.himart-wide-test-page .pdp-col span{
  font-size:var(--hm-lock-body)!important;
}

/* Notes / source / metadata */
body.himart-wide-test-page .hm-source,
body.himart-wide-test-page .hm-kicker,
body.himart-wide-test-page .hm-meta span,
body.himart-wide-test-page .hm-meta b,
body.himart-wide-test-page .hm-card-no,
body.himart-wide-test-page .hm-subno,
body.himart-wide-test-page .signal-tag,
body.himart-wide-test-page .wide-segmented-note,
body.himart-wide-test-page .chart-legend{
  font-size:var(--hm-lock-note)!important;
}

/* ---------- SPACING SYSTEM ---------- */
/* Major title from the preceding page/section area */
body.himart-wide-test-page .hm-hero{
  padding-bottom:0!important;
}
body.himart-wide-test-page .hm-section{
  padding-top:var(--hm-lock-section-top)!important;
}

/* Major content block to the next mid-title block.
   60px to the rule + 40px rule-to-title = 100px total. */
body.himart-wide-test-page .hm-section-head{
  margin-bottom:60px!important;
}

/* Mid-title modules always have a rule, 40px above the title. */
body.himart-wide-test-page .hm-subsection,
body.himart-wide-test-page #data .data-card,
body.himart-wide-test-page .data-bridge{
  border-top:1px solid var(--hm-lock-rule)!important;
  padding-top:var(--hm-lock-mid-rule-gap)!important;
}
body.himart-wide-test-page #data .data-card:first-child{
  border-top:1px solid var(--hm-lock-rule)!important;
  padding-top:var(--hm-lock-mid-rule-gap)!important;
}

/* Mid-title to its following small-title/content region */
body.himart-wide-test-page .hm-subhead,
body.himart-wide-test-page .data-card-head{
  margin-bottom:var(--hm-lock-mid-to-small)!important;
}

/* Gap between consecutive mid-title content modules */
body.himart-wide-test-page .hm-subsection{
  margin-top:var(--hm-lock-mid-block-gap)!important;
}
body.himart-wide-test-page .hm-subsection:first-of-type{
  margin-top:0!important;
}
body.himart-wide-test-page #data .data-list{
  gap:0!important;
}
body.himart-wide-test-page #data .data-card{
  margin:0!important;
  padding-bottom:var(--hm-lock-mid-block-gap)!important;
}
body.himart-wide-test-page .data-bridge{
  margin-top:0!important;
}

/* Title to explanatory copy: always 20px unless an explicit later exception is introduced. */
body.himart-wide-test-page .hm-section-desc,
body.himart-wide-test-page .hm-subcopy,
body.himart-wide-test-page .data-card .desc,
body.himart-wide-test-page .voice-group-title + p,
body.himart-wide-test-page .ring-card h4 + p,
body.himart-wide-test-page .conclusion-card h5 + p,
body.himart-wide-test-page .direction-card h4 + p,
body.himart-wide-test-page .data-bridge-grid article h4 + p,
body.himart-wide-test-page .role-card h4 + p,
body.himart-wide-test-page .flow-node h4 + p,
body.himart-wide-test-page .prototype-case-copy h3 + p{
  margin-top:var(--hm-lock-title-copy-gap)!important;
}

/* Keep role labels and large numeric/chart display values as intentional display exceptions. */
body.himart-wide-test-page #journey .role-card .hm-role-name{
  font-size:24px!important;
}

/* Mobile keeps the same hierarchy tokens unless explicitly overridden later. */
@media(max-width:780px){
  body.himart-wide-test-page{
    --hm-lock-page-title:82px;
    --hm-lock-major-title:42px;
    --hm-lock-mid-title:28px;
    --hm-lock-small-title:22px;
    --hm-lock-body:16px;
    --hm-lock-note:12px;
  }
}

/* --- himart-wide-refine-v7.css --- */
/* Wide Himart refinement v7 — 2026-08-25
   Explicit exceptions to the locked typography/spacing system. */

/* ---------- 01 / QUALITATIVE ---------- */
body.himart-wide-test-page #brand .hm-subtitle{
  font-size:28px!important;
  line-height:1.22!important;
}
body.himart-wide-test-page #brand .wide-title-index{
  color:inherit!important;
  font:inherit!important;
}

/* Voice-group descriptions are not mid-title blocks: remove their old top rules. */
body.himart-wide-test-page #brand .voice-group{
  border-top:0!important;
  padding-top:0!important;
}
body.himart-wide-test-page #brand .ring-row{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:0!important;
  align-items:start!important;
}
body.himart-wide-test-page #brand .ring-card{
  width:85%!important;
  justify-self:center!important;
  aspect-ratio:1!important;
}

/* 03 / sentiment section is a mid-title; its two internal labels are small titles. */
body.himart-wide-test-page #brand .sentiment-title,
body.himart-wide-test-page #brand .sentiment-conclusion>h4{
  font-size:22px!important;
  line-height:1.3!important;
  font-weight:300!important;
  margin:0 0 20px!important;
}

/* Compact the sentiment cards to match the reduced number-to-copy distance. */
body.himart-wide-test-page #brand .sentiment-block{
  min-height:290px!important;
  padding:28px 32px!important;
}
body.himart-wide-test-page #brand .sentiment-keywords{
  margin-top:34px!important;
  font-size:16px!important;
  line-height:1.62!important;
}

/* Six design principles: two columns, 80px each, vertically centered. */
body.himart-wide-test-page #brand .direction-list{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:0!important;
  border-top:1px solid rgba(255,255,255,.10)!important;
  border-bottom:1px solid rgba(255,255,255,.10)!important;
}
body.himart-wide-test-page #brand .direction-card{
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  min-height:80px!important;
  height:80px!important;
  padding:0 24px!important;
  border:0!important;
  border-bottom:1px solid rgba(255,255,255,.10)!important;
  background:transparent!important;
}
body.himart-wide-test-page #brand .direction-card:nth-child(odd){
  border-right:1px solid rgba(255,255,255,.10)!important;
}
body.himart-wide-test-page #brand .direction-card:nth-last-child(-n+2){
  border-bottom:0!important;
}
body.himart-wide-test-page #brand .direction-card .hm-card-no{display:none!important}
body.himart-wide-test-page #brand .direction-card h4,
body.himart-wide-test-page #brand .direction-card h4 .wide-title-index{
  margin:0!important;
  color:#fff!important;
  font-size:22px!important;
  line-height:1.12!important;
  font-weight:300!important;
}
body.himart-wide-test-page #brand .direction-card p{
  margin:12px 0 0!important;
  color:rgba(255,255,255,.50)!important;
  font-size:16px!important;
  line-height:1.25!important;
}

/* ---------- 02 / QUANTITATIVE ---------- */
/* One consistent 60px gap from text block to its visualization. */
body.himart-wide-test-page #data .data-card-head{
  margin-bottom:60px!important;
}
body.himart-wide-test-page #data .data-viz,
body.himart-wide-test-page #data .wide-segmented-chart{
  margin-top:0!important;
}

/* Entry segmented chart: 110px, left aligned, 28px Averta Thin label + Regular value. */
body.himart-wide-test-page #data .wide-entry-bar{
  height:110px!important;
}
body.himart-wide-test-page #data .wide-entry-bar .wide-segment{
  justify-content:flex-start!important;
  padding:0 24px!important;
}
body.himart-wide-test-page #data .wide-entry-bar .wide-segment span,
body.himart-wide-test-page #data .wide-entry-bar .wide-segment small{
  font-family:var(--hm-en)!important;
  font-size:28px!important;
  line-height:1!important;
}
body.himart-wide-test-page #data .wide-entry-bar .wide-segment span{font-weight:300!important}
body.himart-wide-test-page #data .wide-entry-bar .wide-segment small{font-weight:400!important}

/* Remove all internal gaps from the HOME horizontal-bar chart. */
body.himart-wide-test-page #data .data-viz.hbars{
  min-height:0!important;
  gap:0!important;
  padding:0!important;
}
body.himart-wide-test-page #data .hbars .hbar{
  margin:0!important;
  padding:0!important;
  min-height:44px!important;
}

/* Landing next-action chart adopts the same palette and graphic grammar as entry. */
body.himart-wide-test-page #data .wide-action-bar{
  height:110px!important;
}
body.himart-wide-test-page #data .wide-action-bar .wide-segment{
  justify-content:flex-start!important;
  padding:0 20px!important;
}
body.himart-wide-test-page #data .wide-action-bar .wide-segment span,
body.himart-wide-test-page #data .wide-action-bar .wide-segment small{
  font-family:var(--hm-en)!important;
  font-size:clamp(14px,1.28vw,20px)!important;
  line-height:1!important;
}
body.himart-wide-test-page #data .wide-action-bar .wide-segment span{font-weight:300!important}
body.himart-wide-test-page #data .wide-action-bar .wide-segment small{font-weight:400!important}

/* The bridge is the sixth Roman-numbered evidence block; no rule beneath its closing copy. */
body.himart-wide-test-page #data .data-bridge{
  border-bottom:0!important;
}
body.himart-wide-test-page #data .data-bridge-title{
  font-size:28px!important;
  line-height:1.2!important;
}

/* ---------- 03 / JOURNEY SIGNALS ---------- */
body.himart-wide-test-page #journey .journey-signal-subsection .hm-subtitle,
body.himart-wide-test-page #journey .journey-redesign-subsection .forced-redesign-title,
body.himart-wide-test-page #journey .journey-redesign-subsection .forced-redesign-title::before{
  font-size:28px!important;
  line-height:1.2!important;
}

/* AS-IS journey: every former box becomes a centered circle. */
body.himart-wide-test-page #journey .journey-signal-subsection .flow-label{display:none!important}
body.himart-wide-test-page #journey .journey-signal-subsection .flow-row{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:16px!important;
  width:100%!important;
}
body.himart-wide-test-page #journey .journey-signal-subsection .flow-node{
  flex:0 0 190px!important;
  width:190px!important;
  min-height:0!important;
  aspect-ratio:1!important;
  border:1px solid rgba(255,255,255,.24)!important;
  border-radius:50%!important;
  padding:28px 22px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  background:#000000!important;
}
body.himart-wide-test-page #journey .journey-signal-subsection .flow-node .hm-card-no,
body.himart-wide-test-page #journey .journey-signal-subsection .flow-node h4,
body.himart-wide-test-page #journey .journey-signal-subsection .flow-node p{
  text-align:center!important;
}
body.himart-wide-test-page #journey .journey-signal-subsection .flow-node h4{margin-top:14px!important}
body.himart-wide-test-page #journey .journey-signal-subsection .flow-node p{
  margin-top:14px!important;
  font-size:14px!important;
  line-height:1.48!important;
}
body.himart-wide-test-page #journey .journey-signal-subsection .flow-arrow{
  flex:0 0 28px!important;
  width:28px!important;
  color:rgba(255,255,255,.46)!important;
}

/* Tablet-shaped cluster around 01–03 and 05–06. */
body.himart-wide-test-page .wide-flow-cluster{
  position:relative!important;
  display:flex!important;
  align-items:center!important;
  flex:0 0 auto!important;
  padding:30px 24px 22px!important;
  border:1px solid rgba(255,255,255,.24)!important;
  border-radius:999px!important;
  background:transparent!important;
}
body.himart-wide-test-page .wide-flow-cluster-inner{
  display:flex!important;
  align-items:center!important;
  gap:14px!important;
}
body.himart-wide-test-page .wide-flow-cluster-label{
  position:absolute!important;
  left:30px!important;
  top:0!important;
  transform:translateY(-50%)!important;
  padding:0 10px!important;
  background:#000000!important;
  font-size:12px!important;
  font-weight:400!important;
  line-height:1.4!important;
  white-space:nowrap!important;
}
body.himart-wide-test-page .wide-flow-cluster--alert .wide-flow-cluster-label{color:var(--hm-red)!important}
body.himart-wide-test-page .wide-flow-cluster--focus .wide-flow-cluster-label{color:var(--hm-blue)!important}
body.himart-wide-test-page .wide-flow-cluster .flow-node{
  flex-basis:168px!important;
  width:168px!important;
}
body.himart-wide-test-page .wide-flow-cluster .flow-arrow{
  flex-basis:22px!important;
  width:22px!important;
}

/* ROLE DEFINITION: English screen names use Averta Regular. */
body.himart-wide-test-page #journey .role-card .hm-role-name{
  font-family:var(--hm-en)!important;
  font-weight:400!important;
}

@media(max-width:1100px){
  body.himart-wide-test-page #brand .direction-list{grid-template-columns:1fr!important}
  body.himart-wide-test-page #brand .direction-card:nth-child(odd){border-right:0!important}
  body.himart-wide-test-page #brand .direction-card:nth-last-child(-n+2){border-bottom:1px solid rgba(255,255,255,.10)!important}
  body.himart-wide-test-page #brand .direction-card:last-child{border-bottom:0!important}
  body.himart-wide-test-page #journey .journey-signal-subsection .flow-row{flex-wrap:wrap!important}
}

@media(max-width:780px){
  body.himart-wide-test-page #brand .ring-row{grid-template-columns:1fr!important;gap:28px!important}
  body.himart-wide-test-page #brand .ring-card{width:min(82vw,320px)!important}
  body.himart-wide-test-page #brand .direction-card{height:auto!important;min-height:104px!important;padding:18px 20px!important}
  body.himart-wide-test-page #data .wide-entry-bar .wide-segment span,
  body.himart-wide-test-page #data .wide-entry-bar .wide-segment small{font-size:15px!important}
  body.himart-wide-test-page #journey .journey-signal-subsection .flow-node,
  body.himart-wide-test-page .wide-flow-cluster .flow-node{flex-basis:150px!important;width:150px!important}
  body.himart-wide-test-page .wide-flow-cluster{border-radius:44px!important;padding:34px 16px 18px!important}
  body.himart-wide-test-page .wide-flow-cluster-inner{flex-wrap:wrap!important;justify-content:center!important}
  body.himart-wide-test-page .wide-flow-cluster-label{white-space:normal!important;max-width:80vw!important}
}

/* --- himart-wide-refine-v8.css --- */
/* Wide Himart refinement v8 — 2026-08-26
   Latest visual corrections. Loaded after the system lock and v7.
   This revision also repairs chart-motion compatibility after the v5–v8 DOM replacements. */

/* ---------- 01 / QUALITATIVE ---------- */
/* Sentiment ratio + feedback synthesis: no blur/glow. The gradient occupies only the upper 2/3. */
body.himart-wide-test-page #brand .sentiment-graph,
body.himart-wide-test-page #brand .conclusion-grid{
  position:relative!important;
  isolation:isolate!important;
  overflow:visible!important;
  box-shadow:none!important;
  filter:none!important;
  backdrop-filter:none!important;
}
body.himart-wide-test-page #brand .sentiment-block,
body.himart-wide-test-page #brand .conclusion-card{
  position:relative!important;
  isolation:isolate!important;
  overflow:hidden!important;
  background:#000000!important;
  box-shadow:none!important;
  filter:none!important;
  backdrop-filter:none!important;
}
body.himart-wide-test-page #brand .sentiment-block::before,
body.himart-wide-test-page #brand .conclusion-card::before{
  content:""!important;
  position:absolute!important;
  z-index:0!important;
  left:0!important;
  right:0!important;
  top:0!important;
  height:66.666%!important;
  pointer-events:none!important;
  background:linear-gradient(112deg,
    rgba(5,114,203,.18) 0%,
    rgba(0,166,237,.14) 34%,
    rgba(0,184,222,.10) 66%,
    rgba(0,237,189,.05) 100%)!important;
  transform:scaleY(0)!important;
  transform-origin:top center!important;
  transition:transform .9s cubic-bezier(.2,.8,.2,1)!important;
}
body.himart-wide-test-page #brand .sentiment-block.negative::before,
body.himart-wide-test-page #brand .conclusion-card.negative::before{
  background:linear-gradient(112deg,
    rgba(5,114,203,.14) 0%,
    rgba(0,184,222,.09) 58%,
    rgba(250,72,27,.08) 100%)!important;
}
body.himart-wide-test-page #brand .sentiment-block>* ,
body.himart-wide-test-page #brand .conclusion-card>*{
  position:relative!important;
  z-index:1!important;
}
body.himart-wide-test-page #brand .sentiment-graph.is-wide-chart-active .sentiment-block::before,
body.himart-wide-test-page #brand .conclusion-grid.is-wide-chart-active .conclusion-card::before{
  transform:scaleY(1)!important;
}

/* Ring charts must always shrink proportionally instead of stretching into ovals. */
body.himart-wide-test-page #brand .ring-row{
  align-items:start!important;
  justify-items:center!important;
}
body.himart-wide-test-page #brand .ring-card{
  box-sizing:border-box!important;
  width:min(85%,300px)!important;
  max-width:100%!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  aspect-ratio:1 / 1!important;
  align-self:start!important;
  justify-self:center!important;
  flex:none!important;
  --wide-ring-pct:0;
}
@property --wide-ring-pct{
  syntax:'<number>';
  inherits:false;
  initial-value:0;
}
body.himart-wide-test-page #brand .ring-card::before{
  background:conic-gradient(var(--ring) calc(var(--wide-ring-pct)*1%),transparent 0)!important;
  transition:--wide-ring-pct 1.05s cubic-bezier(.2,.8,.2,1)!important;
}
body.himart-wide-test-page #brand .ring-card.is-wide-chart-active{
  --wide-ring-pct:var(--pct);
}

/* 4. UX principles adopts the same card grammar as role-definition cards. */
body.himart-wide-test-page #brand .direction-list{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:18px!important;
  border:0!important;
  background:transparent!important;
}
body.himart-wide-test-page #brand .direction-card,
body.himart-wide-test-page #brand .direction-card:nth-child(odd),
body.himart-wide-test-page #brand .direction-card:nth-last-child(-n+2){
  display:flex!important;
  flex-direction:column!important;
  justify-content:flex-start!important;
  min-height:260px!important;
  height:auto!important;
  padding:26px!important;
  border:1px solid rgba(255,255,255,.14)!important;
  background:transparent!important;
}
body.himart-wide-test-page #brand .direction-card h4,
body.himart-wide-test-page #brand .direction-card h4 .wide-title-index{
  color:#fff!important;
  font-size:22px!important;
  line-height:1.28!important;
  font-weight:300!important;
}
body.himart-wide-test-page #brand .direction-card p{
  margin:12px 0 0!important;
  color:rgba(255,255,255,.58)!important;
  font-size:16px!important;
  line-height:1.55!important;
}

/* ---------- 02 / QUANTITATIVE ---------- */
/* Traffic chart is rendered ONCE by the existing live SVG motion engine.
   v8 no longer leaves a static <img> underneath that live SVG. */
body.himart-wide-test-page #data .wide-unified-traffic{
  display:block!important;
  width:100%!important;
  min-height:0!important;
  margin:0!important;
  overflow:visible!important;
}
body.himart-wide-test-page #data .wide-unified-traffic::before{
  display:none!important;
  content:none!important;
}
body.himart-wide-test-page #data .wide-unified-traffic .wide-traffic-image{
  display:none!important;
}
body.himart-wide-test-page #data .wide-unified-traffic .traffic-v5-live{
  display:block!important;
  width:100%!important;
  height:auto!important;
  aspect-ratio:1160 / 330!important;
  overflow:visible!important;
}
body.himart-wide-test-page #data .wide-traffic-legend{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:16px 28px!important;
  margin-top:18px!important;
  color:rgba(255,255,255,.46)!important;
  font-size:12px!important;
}
body.himart-wide-test-page #data .wide-traffic-legend span{
  display:inline-flex!important;
  align-items:center!important;
  gap:8px!important;
}
body.himart-wide-test-page #data .wide-traffic-legend i{
  display:inline-block!important;
  width:22px!important;
  height:2px!important;
  background:var(--c)!important;
}

/* HOME graph is rebuilt as explicit bars but also keeps the legacy hbars/hbar/fill classes,
   so the original drawing engine can animate it without a second implementation. */
body.himart-wide-test-page #data .wide-home-bars{
  display:grid!important;
  width:100%!important;
  gap:18px!important;
  margin:0!important;
  min-height:0!important;
}
body.himart-wide-test-page #data .wide-home-bar{
  display:grid!important;
  grid-template-columns:110px minmax(0,1fr) 62px!important;
  gap:16px!important;
  align-items:center!important;
  min-height:28px!important;
  margin:0!important;
  padding:0!important;
}
body.himart-wide-test-page #data .wide-home-bar-label,
body.himart-wide-test-page #data .wide-home-bar-value{
  font-size:16px!important;
  line-height:1.3!important;
  color:rgba(255,255,255,.58)!important;
}
body.himart-wide-test-page #data .wide-home-bar-value{
  text-align:right!important;
  color:#fff!important;
  font-family:var(--hm-en)!important;
  font-weight:300!important;
}
body.himart-wide-test-page #data .wide-home-bar-track{
  position:relative!important;
  width:100%!important;
  height:10px!important;
  overflow:hidden!important;
  background:rgba(255,255,255,.08)!important;
}
body.himart-wide-test-page #data .wide-home-bar-fill{
  display:block!important;
  height:100%!important;
  min-width:2px!important;
  background:var(--wide-bar-color,var(--hm-blue))!important;
  box-shadow:none!important;
  transform-origin:left center!important;
}

/* Wide segmented bars were introduced after the legacy motion selector was written.
   Give them their own draw state so ENTRY and LANDING → ACTION animate again. */
body.himart-wide-test-page #data .wide-segmented-bar.wide-draw-motion .wide-segment{
  transform:scaleX(0)!important;
  transform-origin:left center!important;
  transition:transform .82s cubic-bezier(.2,.8,.2,1)!important;
}
body.himart-wide-test-page #data .wide-segmented-bar.wide-draw-motion.is-wide-chart-active .wide-segment{
  transform:scaleX(1)!important;
}
body.himart-wide-test-page #data .wide-segmented-bar.wide-draw-motion .wide-segment:nth-child(2){transition-delay:.08s!important}
body.himart-wide-test-page #data .wide-segmented-bar.wide-draw-motion .wide-segment:nth-child(3){transition-delay:.16s!important}
body.himart-wide-test-page #data .wide-segmented-bar.wide-draw-motion .wide-segment:nth-child(4){transition-delay:.24s!important}
body.himart-wide-test-page #data .wide-segmented-bar.wide-draw-motion .wide-segment:nth-child(5){transition-delay:.32s!important}

/* HOME bars use the same wide observer as a fallback; the legacy chart-motion state also works. */
body.himart-wide-test-page #data .wide-home-bars.wide-draw-motion .wide-home-bar-fill{
  transform:scaleX(0)!important;
  transition:transform .9s cubic-bezier(.2,.8,.2,1)!important;
}
body.himart-wide-test-page #data .wide-home-bars.wide-draw-motion.is-wide-chart-active .wide-home-bar-fill{
  transform:scaleX(1)!important;
}
body.himart-wide-test-page #data .wide-home-bars.wide-draw-motion .wide-home-bar:nth-child(2) .wide-home-bar-fill{transition-delay:.08s!important}
body.himart-wide-test-page #data .wide-home-bars.wide-draw-motion .wide-home-bar:nth-child(3) .wide-home-bar-fill{transition-delay:.16s!important}
body.himart-wide-test-page #data .wide-home-bars.wide-draw-motion .wide-home-bar:nth-child(4) .wide-home-bar-fill{transition-delay:.24s!important}
body.himart-wide-test-page #data .wide-home-bars.wide-draw-motion .wide-home-bar:nth-child(5) .wide-home-bar-fill{transition-delay:.32s!important}
body.himart-wide-test-page #data .wide-home-bars.wide-draw-motion .wide-home-bar:nth-child(6) .wide-home-bar-fill{transition-delay:.40s!important}

/* ---------- 03 / JOURNEY ---------- */
/* Roll the first 03 journey visualization back to the pre-v7 rectangular layout. */
body.himart-wide-test-page #journey .journey-signal-subsection .flow-label{
  display:block!important;
}
body.himart-wide-test-page #journey .journey-signal-subsection .flow-row{
  display:grid!important;
  align-items:stretch!important;
  justify-content:stretch!important;
  gap:0!important;
  width:100%!important;
}
body.himart-wide-test-page #journey .journey-signal-subsection .flow-row.row4{
  grid-template-columns:minmax(0,1fr) 56px minmax(0,1fr) 56px minmax(0,1fr) 56px minmax(0,1fr)!important;
}
body.himart-wide-test-page #journey .journey-signal-subsection .flow-node{
  box-sizing:border-box!important;
  width:100%!important;
  max-width:none!important;
  height:276px!important;
  min-height:0!important;
  max-height:none!important;
  aspect-ratio:auto!important;
  flex:none!important;
  border:1px solid rgba(255,255,255,.14)!important;
  border-radius:0!important;
  padding:26px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:flex-start!important;
  text-align:left!important;
  background:transparent!important;
}
body.himart-wide-test-page #journey .journey-signal-subsection .flow-node .hm-card-no,
body.himart-wide-test-page #journey .journey-signal-subsection .flow-node h4,
body.himart-wide-test-page #journey .journey-signal-subsection .flow-node p{
  text-align:left!important;
}
body.himart-wide-test-page #journey .journey-signal-subsection .flow-node h4{
  margin-top:26px!important;
}
body.himart-wide-test-page #journey .journey-signal-subsection .flow-node p{
  margin-top:18px!important;
  font-size:16px!important;
  line-height:1.55!important;
}
body.himart-wide-test-page #journey .journey-signal-subsection .flow-arrow{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:56px!important;
  color:rgba(255,255,255,.46)!important;
}

/* Only the 2. 끊어진 지점을 기준으로… circles change to white.
   Group/tablet rules are intentionally untouched. */
body.himart-wide-test-page #journey .journey-redesign-subsection .flow-node{
  box-sizing:border-box!important;
  width:clamp(118px,13.2vw,190px)!important;
  max-width:100%!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  aspect-ratio:1 / 1!important;
  flex:0 1 clamp(118px,13.2vw,190px)!important;
  border:1px solid #fff!important;
  border-radius:50%!important;
  box-shadow:none!important;
}
body.himart-wide-test-page #journey .journey-redesign-subsection .flow-node::before,
body.himart-wide-test-page #journey .journey-redesign-subsection .flow-node::after{
  border-color:#fff!important;
  box-shadow:none!important;
}

@media(max-width:1100px){
  body.himart-wide-test-page #brand .direction-list{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  body.himart-wide-test-page #journey .journey-signal-subsection .flow-row.row4{
    grid-template-columns:minmax(0,1fr) 32px minmax(0,1fr) 32px minmax(0,1fr) 32px minmax(0,1fr)!important;
  }
  body.himart-wide-test-page #journey .journey-signal-subsection .flow-node{
    height:248px!important;
    padding:22px!important;
  }
  body.himart-wide-test-page #journey .journey-signal-subsection .flow-arrow{
    width:32px!important;
  }
  body.himart-wide-test-page #journey .journey-redesign-subsection .flow-node{
    width:clamp(112px,18vw,160px)!important;
    flex-basis:clamp(112px,18vw,160px)!important;
  }
}

@media(max-width:780px){
  body.himart-wide-test-page #brand .ring-card{
    width:min(76vw,280px)!important;
    height:auto!important;
    aspect-ratio:1 / 1!important;
  }
  body.himart-wide-test-page #brand .direction-list{
    grid-template-columns:1fr!important;
    gap:14px!important;
  }
  body.himart-wide-test-page #brand .direction-card,
  body.himart-wide-test-page #brand .direction-card:nth-child(odd),
  body.himart-wide-test-page #brand .direction-card:nth-last-child(-n+2){
    min-height:220px!important;
    padding:24px!important;
  }
  body.himart-wide-test-page #data .wide-home-bar{
    grid-template-columns:92px minmax(0,1fr) 52px!important;
    gap:10px!important;
  }
  body.himart-wide-test-page #data .wide-home-bar-label,
  body.himart-wide-test-page #data .wide-home-bar-value{
    font-size:13px!important;
  }
  body.himart-wide-test-page #journey .journey-signal-subsection .flow-row,
  body.himart-wide-test-page #journey .journey-signal-subsection .flow-row.row4{
    grid-template-columns:1fr!important;
    gap:12px!important;
  }
  body.himart-wide-test-page #journey .journey-signal-subsection .flow-node{
    width:100%!important;
    height:auto!important;
    min-height:220px!important;
  }
  body.himart-wide-test-page #journey .journey-signal-subsection .flow-arrow{
    display:none!important;
  }
  body.himart-wide-test-page #journey .journey-redesign-subsection .flow-node{
    width:min(38vw,146px)!important;
    flex-basis:min(38vw,146px)!important;
    aspect-ratio:1 / 1!important;
  }
}

@media(prefers-reduced-motion:reduce){
  body.himart-wide-test-page #brand .sentiment-block::before,
  body.himart-wide-test-page #brand .conclusion-card::before{
    transform:scaleY(1)!important;
    transition:none!important;
  }
  body.himart-wide-test-page #brand .ring-card{
    --wide-ring-pct:var(--pct)!important;
  }
  body.himart-wide-test-page #data .wide-segmented-bar.wide-draw-motion .wide-segment,
  body.himart-wide-test-page #data .wide-home-bars.wide-draw-motion .wide-home-bar-fill{
    transform:none!important;
    transition:none!important;
  }
}

/* --- himart-wide-refine-v9.css --- */
/* Wide Himart refinement v9 — 2026-08-26
   Restores the tablet-cluster journey treatment and provides one isolated chart-motion layer
   after the v5-v8 DOM replacements. */

/* ---------- 01 / SENTIMENT GRADIENT ---------- */
/* Keep the gradient inside the upper 2/3, but fade its final edge to 100% transparent. */
body.himart-wide-test-page #brand .sentiment-block::before,
body.himart-wide-test-page #brand .conclusion-card::before{
  height:66.666%!important;
  box-shadow:none!important;
  filter:none!important;
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 54%,rgba(0,0,0,.84) 70%,rgba(0,0,0,.46) 84%,transparent 100%)!important;
  mask-image:linear-gradient(to bottom,#000 0%,#000 54%,rgba(0,0,0,.84) 70%,rgba(0,0,0,.46) 84%,transparent 100%)!important;
  -webkit-mask-repeat:no-repeat!important;
  mask-repeat:no-repeat!important;
}

/* v9 owns the reveal state even if the older v8 observer also adds its active class. */
body.himart-wide-test-page #brand .sentiment-graph.v9-chart-motion .sentiment-block::before,
body.himart-wide-test-page #brand .conclusion-grid.v9-chart-motion .conclusion-card::before{
  transform:scaleY(0)!important;
  transform-origin:top center!important;
  transition:transform .92s cubic-bezier(.2,.8,.2,1)!important;
}
body.himart-wide-test-page #brand .sentiment-graph.v9-chart-motion.is-v9-chart-active .sentiment-block::before,
body.himart-wide-test-page #brand .conclusion-grid.v9-chart-motion.is-v9-chart-active .conclusion-card::before{
  transform:scaleY(1)!important;
}

/* Ring drawing is also controlled by the v9 state so older observers cannot finish it early. */
body.himart-wide-test-page #brand .ring-card.v9-chart-motion{
  --wide-ring-pct:0!important;
}
body.himart-wide-test-page #brand .ring-card.v9-chart-motion.is-v9-chart-active{
  --wide-ring-pct:var(--pct)!important;
}

/* ---------- 02 / ALL GRAPH MOTION ---------- */
/* Segmented bars: ENTRY and LANDING -> ACTION. */
body.himart-wide-test-page #data .wide-segmented-bar.v9-chart-motion .wide-segment{
  transform:scaleX(0)!important;
  transform-origin:left center!important;
  transition:transform .82s cubic-bezier(.2,.8,.2,1)!important;
}
body.himart-wide-test-page #data .wide-segmented-bar.v9-chart-motion.is-v9-chart-active .wide-segment{
  transform:scaleX(1)!important;
}
body.himart-wide-test-page #data .wide-segmented-bar.v9-chart-motion .wide-segment:nth-child(2){transition-delay:.08s!important}
body.himart-wide-test-page #data .wide-segmented-bar.v9-chart-motion .wide-segment:nth-child(3){transition-delay:.16s!important}
body.himart-wide-test-page #data .wide-segmented-bar.v9-chart-motion .wide-segment:nth-child(4){transition-delay:.24s!important}
body.himart-wide-test-page #data .wide-segmented-bar.v9-chart-motion .wide-segment:nth-child(5){transition-delay:.32s!important}

/* HOME bars. */
body.himart-wide-test-page #data .wide-home-bars.v9-chart-motion .wide-home-bar-fill{
  transform:scaleX(0)!important;
  transform-origin:left center!important;
  transition:transform .9s cubic-bezier(.2,.8,.2,1)!important;
}
body.himart-wide-test-page #data .wide-home-bars.v9-chart-motion.is-v9-chart-active .wide-home-bar-fill{
  transform:scaleX(1)!important;
}
body.himart-wide-test-page #data .wide-home-bars.v9-chart-motion .wide-home-bar:nth-child(2) .wide-home-bar-fill{transition-delay:.08s!important}
body.himart-wide-test-page #data .wide-home-bars.v9-chart-motion .wide-home-bar:nth-child(3) .wide-home-bar-fill{transition-delay:.16s!important}
body.himart-wide-test-page #data .wide-home-bars.v9-chart-motion .wide-home-bar:nth-child(4) .wide-home-bar-fill{transition-delay:.24s!important}
body.himart-wide-test-page #data .wide-home-bars.v9-chart-motion .wide-home-bar:nth-child(5) .wide-home-bar-fill{transition-delay:.32s!important}
body.himart-wide-test-page #data .wide-home-bars.v9-chart-motion .wide-home-bar:nth-child(6) .wide-home-bar-fill{transition-delay:.40s!important}

/* SEARCH comparison: reveal both values and the connecting arrow. */
body.himart-wide-test-page #data .search-slope.v9-chart-motion strong,
body.himart-wide-test-page #data .search-slope.v9-chart-motion .arrow-head{
  opacity:0!important;
  transform:translateY(18px)!important;
  transition:opacity .6s ease,transform .78s cubic-bezier(.2,.8,.2,1)!important;
}
body.himart-wide-test-page #data .search-slope.v9-chart-motion.is-v9-chart-active strong,
body.himart-wide-test-page #data .search-slope.v9-chart-motion.is-v9-chart-active .arrow-head{
  opacity:1!important;
  transform:none!important;
}
body.himart-wide-test-page #data .search-slope.v9-chart-motion>div:last-child strong{transition-delay:.14s!important}

/* Traffic chart must exist only once and draw as an inline SVG. */
body.himart-wide-test-page #data .wide-unified-traffic .chart-svg:not(.traffic-v5-live),
body.himart-wide-test-page #data .wide-unified-traffic .wide-traffic-image{
  display:none!important;
}
body.himart-wide-test-page #data .wide-unified-traffic .traffic-v5-live{
  display:block!important;
  width:100%!important;
  height:auto!important;
  aspect-ratio:1160 / 330!important;
  overflow:visible!important;
}

/* ---------- 03 / JOURNEY ---------- */
/* Restore the v7 tablet-cluster version for '그래서 끊어진 여정을…'.
   Only the circular nodes become white; the tablet shells keep their previous styling. */
body.himart-wide-test-page #journey .journey-signal-subsection .flow-label{
  display:none!important;
}
body.himart-wide-test-page #journey .journey-signal-subsection .flow-row{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:16px!important;
  width:100%!important;
}
body.himart-wide-test-page #journey .journey-signal-subsection .flow-node{
  box-sizing:border-box!important;
  flex:0 1 clamp(118px,13.2vw,190px)!important;
  width:clamp(118px,13.2vw,190px)!important;
  max-width:100%!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  aspect-ratio:1 / 1!important;
  border:1px solid #fff!important;
  border-radius:50%!important;
  padding:28px 22px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  background:#000000!important;
  box-shadow:none!important;
}
body.himart-wide-test-page #journey .journey-signal-subsection .flow-node .hm-card-no,
body.himart-wide-test-page #journey .journey-signal-subsection .flow-node h4,
body.himart-wide-test-page #journey .journey-signal-subsection .flow-node p{
  text-align:center!important;
}
body.himart-wide-test-page #journey .journey-signal-subsection .flow-node h4{
  margin-top:14px!important;
}
body.himart-wide-test-page #journey .journey-signal-subsection .flow-node p{
  margin-top:14px!important;
  font-size:14px!important;
  line-height:1.48!important;
}
body.himart-wide-test-page #journey .journey-signal-subsection .flow-arrow{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex:0 0 28px!important;
  width:28px!important;
  color:rgba(255,255,255,.46)!important;
}

/* Preserve the tablet shell exactly as the v7 treatment; do not turn it white. */
body.himart-wide-test-page #journey .journey-signal-subsection .wide-flow-cluster{
  position:relative!important;
  display:flex!important;
  align-items:center!important;
  flex:0 0 auto!important;
  max-width:100%!important;
  padding:30px 24px 22px!important;
  border:1px solid rgba(255,255,255,.24)!important;
  border-radius:999px!important;
  background:transparent!important;
}
body.himart-wide-test-page #journey .journey-signal-subsection .wide-flow-cluster-inner{
  display:flex!important;
  align-items:center!important;
  gap:14px!important;
  min-width:0!important;
}
body.himart-wide-test-page #journey .journey-signal-subsection .wide-flow-cluster-label{
  position:absolute!important;
  left:30px!important;
  top:0!important;
  transform:translateY(-50%)!important;
  padding:0 10px!important;
  background:#000000!important;
  font-size:12px!important;
  font-weight:400!important;
  line-height:1.4!important;
  white-space:nowrap!important;
}
body.himart-wide-test-page #journey .journey-signal-subsection .wide-flow-cluster--alert .wide-flow-cluster-label{color:var(--hm-red)!important}
body.himart-wide-test-page #journey .journey-signal-subsection .wide-flow-cluster--focus .wide-flow-cluster-label{color:var(--hm-blue)!important}
body.himart-wide-test-page #journey .journey-signal-subsection .wide-flow-cluster .flow-node{
  flex-basis:168px!important;
  width:168px!important;
}
body.himart-wide-test-page #journey .journey-signal-subsection .wide-flow-cluster .flow-arrow{
  flex-basis:22px!important;
  width:22px!important;
}

/* The TO-BE circles stay white as requested previously; tablet/container rules are untouched. */
body.himart-wide-test-page #journey .journey-redesign-subsection .flow-node{
  border:1px solid #fff!important;
  box-shadow:none!important;
}
body.himart-wide-test-page #journey .journey-redesign-subsection .flow-node::before,
body.himart-wide-test-page #journey .journey-redesign-subsection .flow-node::after{
  border-color:#fff!important;
  box-shadow:none!important;
}

@media(max-width:1100px){
  body.himart-wide-test-page #journey .journey-signal-subsection .flow-row{flex-wrap:wrap!important}
  body.himart-wide-test-page #journey .journey-signal-subsection .flow-node{
    width:clamp(112px,18vw,160px)!important;
    flex-basis:clamp(112px,18vw,160px)!important;
  }
}

@media(max-width:780px){
  body.himart-wide-test-page #journey .journey-signal-subsection .flow-node,
  body.himart-wide-test-page #journey .journey-signal-subsection .wide-flow-cluster .flow-node{
    width:min(38vw,146px)!important;
    flex-basis:min(38vw,146px)!important;
    aspect-ratio:1 / 1!important;
  }
  body.himart-wide-test-page #journey .journey-signal-subsection .wide-flow-cluster{
    border-radius:44px!important;
    padding:34px 16px 18px!important;
  }
  body.himart-wide-test-page #journey .journey-signal-subsection .wide-flow-cluster-inner{
    flex-wrap:wrap!important;
    justify-content:center!important;
  }
  body.himart-wide-test-page #journey .journey-signal-subsection .wide-flow-cluster-label{
    white-space:normal!important;
    max-width:80vw!important;
  }
}

@media(prefers-reduced-motion:reduce){
  body.himart-wide-test-page .v9-chart-motion *{transition:none!important}
}

/* --- himart-wide-refine-v11.css --- */
/* Wide Himart refinement v11 — 2026-08-26
   03 journey rollback only: restore the older colored tablet-outline treatment where the label sits in the rule itself. */

/* Broken journey / first cluster: red tablet rule + embedded red label. */
html body.himart-wide-test-page #journey .journey-signal-subsection .wide-flow-cluster.v10-journey-tablet.wide-flow-cluster--alert{
  --v10-tablet-color:var(--hm-red)!important;
  border-color:var(--hm-red)!important;
}
html body.himart-wide-test-page #journey .journey-signal-subsection .wide-flow-cluster.v10-journey-tablet.wide-flow-cluster--alert .wide-flow-cluster-label{
  color:var(--hm-red)!important;
}

/* Second broken-journey cluster keeps the earlier blue focus state. */
html body.himart-wide-test-page #journey .journey-signal-subsection .wide-flow-cluster.v10-journey-tablet.wide-flow-cluster--focus{
  --v10-tablet-color:var(--hm-blue)!important;
  border-color:var(--hm-blue)!important;
}
html body.himart-wide-test-page #journey .journey-signal-subsection .wide-flow-cluster.v10-journey-tablet.wide-flow-cluster--focus .wide-flow-cluster-label{
  color:var(--hm-blue)!important;
}

/* 2. redesign tablets remain blue; circles remain white. */
html body.himart-wide-test-page #journey .journey-redesign-subsection .wide-flow-cluster.v10-journey-tablet{
  --v10-tablet-color:var(--hm-blue)!important;
  border-color:var(--hm-blue)!important;
}
html body.himart-wide-test-page #journey .journey-redesign-subsection .wide-flow-cluster.v10-journey-tablet .wide-flow-cluster-label{
  color:var(--hm-blue)!important;
}

/* Label is physically embedded in the tablet's top line rather than floating above it. */
html body.himart-wide-test-page #journey .wide-flow-cluster.v10-journey-tablet .wide-flow-cluster-label{
  top:0!important;
  left:30px!important;
  transform:translateY(-50%)!important;
  display:inline-flex!important;
  align-items:center!important;
  height:18px!important;
  min-height:18px!important;
  padding:0 10px!important;
  margin:0!important;
  background:#000000!important;
  line-height:18px!important;
  white-space:nowrap!important;
}

/* Keep only the inner circles white; do not whiten the tablet shell. */
html body.himart-wide-test-page #journey .journey-signal-subsection .flow-node,
html body.himart-wide-test-page #journey .journey-redesign-subsection .flow-node{
  border-color:#fff!important;
}

/* --- himart-wide-refine-v12.css --- */
/* Wide Himart refinement v12 — 2026-08-26
   Final overrides for the requested qualitative hierarchy, ring motion, data renumbering and journey tablets. */

/* ---------- GLOBAL / SUBTITLE RHYTHM ---------- */
html body.himart-wide-test-page.himart-v12 .hm-subsection{
  padding-top:30px!important;
}

/* ---------- 01 / QUALITATIVE ---------- */
html body.himart-wide-test-page.himart-v12 #brand .keyword-group{
  border-top:0!important;
  padding-top:0!important;
}
html body.himart-wide-test-page.himart-v12 #brand .keyword-group h3{
  margin:0 0 18px!important;
  font-size:16px!important;
  line-height:1.35!important;
  font-weight:300!important;
}
html body.himart-wide-test-page.himart-v12 #brand .keyword-group:not(.negative) h3{color:var(--hm-blue)!important}
html body.himart-wide-test-page.himart-v12 #brand .keyword-group.negative h3{color:var(--hm-red)!important}
html body.himart-wide-test-page.himart-v12 #brand .keyword-cloud{
  display:block!important;
  padding:0!important;
  margin:0!important;
}
html body.himart-wide-test-page.himart-v12 #brand .wide-keyword-list{
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  font-family:var(--hm-ko)!important;
  font-size:16px!important;
  font-weight:300!important;
  line-height:1.72!important;
  color:rgba(255,255,255,.58)!important;
}

html body.himart-wide-test-page.himart-v12 #brand .voice-group-title{
  margin:0 0 42px!important;
  font-family:var(--hm-ko)!important;
  font-size:28px!important;
  line-height:1.34!important;
  font-weight:300!important;
  letter-spacing:-.035em!important;
}
html body.himart-wide-test-page.himart-v12 #brand .voice-group-title .v12-voice-accent{
  font-family:var(--hm-ko)!important;
  font-weight:300!important;
}
html body.himart-wide-test-page.himart-v12 #brand .voice-group-title .v12-voice-accent.is-positive{color:var(--hm-blue)!important}
html body.himart-wide-test-page.himart-v12 #brand .voice-group-title .v12-voice-accent.is-negative{color:var(--hm-red)!important}
html body.himart-wide-test-page.himart-v12 #brand .voice-group-title .v12-voice-rest{color:#fff!important;font-weight:100!important}

html body.himart-wide-test-page.himart-v12 #brand .ring-row{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:24px!important;
  align-items:start!important;
  justify-items:stretch!important;
  width:100%!important;
}
html body.himart-wide-test-page.himart-v12 #brand .ring-card{
  box-sizing:border-box!important;
  width:100%!important;
  max-width:none!important;
  height:auto!important;
  min-height:0!important;
  aspect-ratio:1 / 1!important;
  justify-self:stretch!important;
  align-self:start!important;
  flex:none!important;
  border:1px solid rgba(255,255,255,.22)!important;
  --v12-ring-pct:0;
  --v12-ring-color:var(--hm-blue);
}
html body.himart-wide-test-page.himart-v12 #brand .voice-group.negative .ring-card{--v12-ring-color:var(--hm-red)}
@property --v12-ring-pct{
  syntax:'<number>';
  inherits:false;
  initial-value:0;
}
html body.himart-wide-test-page.himart-v12 #brand .ring-card::before{
  content:""!important;
  position:absolute!important;
  inset:-1px!important;
  border-radius:50%!important;
  background:conic-gradient(from -90deg,var(--v12-ring-color) 0 calc(var(--v12-ring-pct)*1%),transparent calc(var(--v12-ring-pct)*1%) 100%)!important;
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 6px),#000 calc(100% - 5px))!important;
  mask:radial-gradient(farthest-side,transparent calc(100% - 6px),#000 calc(100% - 5px))!important;
  transition:--v12-ring-pct 1.18s cubic-bezier(.2,.8,.2,1)!important;
}
html body.himart-wide-test-page.himart-v12 #brand .ring-card.is-v12-ring-active{--v12-ring-pct:var(--pct)}
html body.himart-wide-test-page.himart-v12 #brand .ring-card h4{
  font-size:28px!important;
  line-height:1.24!important;
  font-weight:400!important;
}

/* I / II small titles use Pretendard Thin. */
html body.himart-wide-test-page.himart-v12 #brand .sentiment-title,
html body.himart-wide-test-page.himart-v12 #brand .sentiment-conclusion>h4{
  font-family:var(--hm-ko)!important;
  font-size:22px!important;
  line-height:1.3!important;
  font-weight:100!important;
  margin-bottom:20px!important;
}

/* Gradients follow the top rule color: positive blue, negative red. */
html body.himart-wide-test-page.himart-v12 #brand .sentiment-block::before,
html body.himart-wide-test-page.himart-v12 #brand .conclusion-card::before{
  height:66.666%!important;
  background:linear-gradient(to bottom,rgba(0,166,237,.20) 0%,rgba(0,166,237,.12) 44%,rgba(0,166,237,.05) 70%,transparent 100%)!important;
  box-shadow:none!important;
  filter:none!important;
  -webkit-mask-image:none!important;
  mask-image:none!important;
}
html body.himart-wide-test-page.himart-v12 #brand .sentiment-block.negative::before,
html body.himart-wide-test-page.himart-v12 #brand .conclusion-card.negative::before{
  background:linear-gradient(to bottom,rgba(250,72,27,.20) 0%,rgba(250,72,27,.12) 44%,rgba(250,72,27,.05) 70%,transparent 100%)!important;
}
html body.himart-wide-test-page.himart-v12 #brand .sentiment-block{
  display:flex!important;
  flex-direction:column!important;
}
html body.himart-wide-test-page.himart-v12 #brand .sentiment-keywords{
  margin-top:auto!important;
  font-size:16px!important;
  line-height:1.62!important;
}
html body.himart-wide-test-page.himart-v12 #brand .sentiment-keywords b{
  display:block!important;
  margin-bottom:10px!important;
}
html body.himart-wide-test-page.himart-v12 #brand .v12-keyline{display:block!important}

/* 4. UX principles: white 40% top rule, 28px titles, copy anchored to card bottom. */
html body.himart-wide-test-page.himart-v12 #brand .direction-list{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:18px!important;
}
html body.himart-wide-test-page.himart-v12 #brand .direction-card,
html body.himart-wide-test-page.himart-v12 #brand .direction-card:nth-child(odd),
html body.himart-wide-test-page.himart-v12 #brand .direction-card:nth-last-child(-n+2){
  display:flex!important;
  flex-direction:column!important;
  min-height:280px!important;
  height:auto!important;
  padding:26px!important;
  border:1px solid rgba(255,255,255,.14)!important;
  border-top-color:rgba(255,255,255,.40)!important;
  background:transparent!important;
}
html body.himart-wide-test-page.himart-v12 #brand .direction-card h4,
html body.himart-wide-test-page.himart-v12 #brand .direction-card h4 .wide-title-index{
  margin:0!important;
  color:#fff!important;
  font-size:28px!important;
  line-height:1.22!important;
  font-weight:300!important;
}
html body.himart-wide-test-page.himart-v12 #brand .direction-card p{
  margin:auto 0 0!important;
  padding-top:22px!important;
  font-size:16px!important;
  line-height:1.58!important;
  color:rgba(255,255,255,.50)!important;
}

/* ---------- 02 / DATA ---------- */
html body.himart-wide-test-page.himart-v12 #data .data-card.v12-removed-search{display:none!important}

/* ---------- 03 / JOURNEY ---------- */
html body.himart-wide-test-page.himart-v12 #journey .flow-label{display:none!important}
html body.himart-wide-test-page.himart-v12 #journey .journey-signal-subsection .flow-row,
html body.himart-wide-test-page.himart-v12 #journey .journey-redesign-subsection .flow-row{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:18px!important;
  width:100%!important;
  flex-wrap:nowrap!important;
}
html body.himart-wide-test-page.himart-v12 #journey .wide-flow-cluster.v12-journey-tablet{
  position:relative!important;
  display:flex!important;
  align-items:center!important;
  flex:0 0 auto!important;
  width:auto!important;
  max-width:100%!important;
  padding:22px 26px!important;
  border:1px solid var(--v12-tablet-color)!important;
  border-radius:999px!important;
  background:transparent!important;
  box-shadow:none!important;
}
html body.himart-wide-test-page.himart-v12 #journey .journey-signal-subsection .v12-journey-tablet{--v12-tablet-color:var(--hm-red)}
html body.himart-wide-test-page.himart-v12 #journey .journey-redesign-subsection .v12-journey-tablet{--v12-tablet-color:var(--hm-blue)}
html body.himart-wide-test-page.himart-v12 #journey .wide-flow-cluster.v12-journey-tablet .wide-flow-cluster-inner{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:18px!important;
  min-width:0!important;
}
html body.himart-wide-test-page.himart-v12 #journey .wide-flow-cluster.v12-journey-tablet .wide-flow-cluster-label{
  position:absolute!important;
  top:0!important;
  left:50%!important;
  transform:translate(-50%,-50%)!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  height:20px!important;
  min-height:20px!important;
  padding:0 12px!important;
  margin:0!important;
  background:#000000!important;
  color:var(--v12-tablet-color)!important;
  font-family:var(--hm-ko)!important;
  font-size:12px!important;
  font-weight:400!important;
  line-height:20px!important;
  white-space:nowrap!important;
}
html body.himart-wide-test-page.himart-v12 #journey .journey-signal-subsection .flow-node,
html body.himart-wide-test-page.himart-v12 #journey .journey-redesign-subsection .flow-node,
html body.himart-wide-test-page.himart-v12 #journey .wide-flow-cluster.v12-journey-tablet .flow-node{
  box-sizing:border-box!important;
  flex:0 0 218px!important;
  width:218px!important;
  max-width:218px!important;
  height:218px!important;
  min-height:218px!important;
  max-height:218px!important;
  aspect-ratio:1 / 1!important;
  border:1px solid #fff!important;
  border-radius:50%!important;
  padding:28px 22px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  background:#000000!important;
  box-shadow:none!important;
}
html body.himart-wide-test-page.himart-v12 #journey .journey-signal-subsection .flow-node .hm-card-no{
  color:var(--hm-red)!important;
}
html body.himart-wide-test-page.himart-v12 #journey .journey-redesign-subsection .flow-node .hm-card-no{
  color:var(--hm-blue)!important;
}
html body.himart-wide-test-page.himart-v12 #journey .flow-node h4{
  color:#fff!important;
  text-align:center!important;
  margin-top:16px!important;
}
html body.himart-wide-test-page.himart-v12 #journey .flow-node p{
  text-align:center!important;
  margin-top:14px!important;
  font-size:14px!important;
  line-height:1.48!important;
}
html body.himart-wide-test-page.himart-v12 #journey .wide-flow-cluster.v12-journey-tablet .flow-arrow{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex:0 0 24px!important;
  width:24px!important;
  color:rgba(255,255,255,.46)!important;
}

@media(max-width:1100px){
  html body.himart-wide-test-page.himart-v12 #brand .direction-list{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  html body.himart-wide-test-page.himart-v12 #journey .journey-signal-subsection .flow-row,
  html body.himart-wide-test-page.himart-v12 #journey .journey-redesign-subsection .flow-row{flex-wrap:wrap!important}
  html body.himart-wide-test-page.himart-v12 #journey .journey-signal-subsection .flow-node,
  html body.himart-wide-test-page.himart-v12 #journey .journey-redesign-subsection .flow-node,
  html body.himart-wide-test-page.himart-v12 #journey .wide-flow-cluster.v12-journey-tablet .flow-node{
    width:190px!important;
    min-width:190px!important;
    max-width:190px!important;
    height:190px!important;
    min-height:190px!important;
    max-height:190px!important;
    flex-basis:190px!important;
  }
}
@media(max-width:780px){
  html body.himart-wide-test-page.himart-v12 #brand .keyword-grid{grid-template-columns:1fr!important;gap:42px!important}
  html body.himart-wide-test-page.himart-v12 #brand .ring-row{grid-template-columns:1fr!important;gap:28px!important}
  html body.himart-wide-test-page.himart-v12 #brand .ring-card{width:min(82vw,390px)!important;justify-self:center!important}
  html body.himart-wide-test-page.himart-v12 #brand .direction-list{grid-template-columns:1fr!important}
  html body.himart-wide-test-page.himart-v12 #journey .wide-flow-cluster.v12-journey-tablet{
    padding:30px 16px 18px!important;
    border-radius:48px!important;
  }
  html body.himart-wide-test-page.himart-v12 #journey .wide-flow-cluster.v12-journey-tablet .wide-flow-cluster-inner{
    flex-wrap:wrap!important;
    gap:14px!important;
  }
  html body.himart-wide-test-page.himart-v12 #journey .wide-flow-cluster.v12-journey-tablet .wide-flow-cluster-label{
    max-width:82vw!important;
    height:auto!important;
    min-height:20px!important;
    white-space:normal!important;
    text-align:center!important;
    line-height:1.4!important;
  }
  html body.himart-wide-test-page.himart-v12 #journey .journey-signal-subsection .flow-node,
  html body.himart-wide-test-page.himart-v12 #journey .journey-redesign-subsection .flow-node,
  html body.himart-wide-test-page.himart-v12 #journey .wide-flow-cluster.v12-journey-tablet .flow-node{
    width:min(38vw,160px)!important;
    min-width:min(38vw,160px)!important;
    max-width:min(38vw,160px)!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    flex-basis:min(38vw,160px)!important;
    aspect-ratio:1 / 1!important;
    padding:22px 16px!important;
  }
}

/* --- himart-wide-refine-v12-fix.css --- */
/* Wide v12 fine-tune */
html body.himart-wide-test-page.himart-v12 #brand .wide-keyword-list{
  color:#fff!important;
}
html body.himart-wide-test-page.himart-v12 #brand .ring-row{
  justify-items:center!important;
}
html body.himart-wide-test-page.himart-v12 #brand .ring-card{
  width:min(100%,390px)!important;
  max-width:390px!important;
  justify-self:center!important;
}

/* --- himart-wide-refine-v13.css --- */
/* Wide Himart refinement v13 — 2026-08-26
   GNB centering, keyword-pill rollback, ring motion, connected principle/role grids,
   chart label grammar, and journey tablet spacing. Loaded last for Wide Layout Test. */

/* ---------- GNB / viewport centering ---------- */
html body.himart-wide-test-page.himart-v13 .top{
  left:0!important;
  right:0!important;
  width:100%!important;
  display:flex!important;
  justify-content:center!important;
  align-items:flex-start!important;
  grid-template-columns:none!important;
}
html body.himart-wide-test-page.himart-v13 .top .top-center{
  display:flex!important;
  position:static!important;
  left:auto!important;
  right:auto!important;
  transform:none!important;
  margin:0 auto!important;
  justify-content:center!important;
}

/* ---------- 01 / KEYWORDS ---------- */
html body.himart-wide-test-page.himart-v13 #brand .keyword-group h3{
  margin:0 0 26px!important;
  font-size:22px!important;
  line-height:1.35!important;
  font-weight:300!important;
}
html body.himart-wide-test-page.himart-v13 #brand .keyword-cloud{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:10px!important;
  padding:0!important;
  margin:0!important;
}
html body.himart-wide-test-page.himart-v13 #brand .keyword-pill{
  display:inline-flex!important;
  align-items:center!important;
  min-height:42px!important;
  padding:9px 15px!important;
  border:1px solid rgba(255,255,255,.40)!important;
  border-radius:999px!important;
  background:transparent!important;
  color:rgba(255,255,255,.50)!important;
  font-family:var(--hm-ko)!important;
  font-size:13px!important;
  font-weight:300!important;
  line-height:1.25!important;
}
html body.himart-wide-test-page.himart-v13 #brand .keyword-pill.major b{font-weight:500!important}

html body.himart-wide-test-page.himart-v13 #brand .voice-group-title{
  margin-bottom:42px!important;
  font-size:22px!important;
  line-height:1.38!important;
  font-weight:300!important;
}
html body.himart-wide-test-page.himart-v13 #brand .voice-group-title .v12-voice-accent,
html body.himart-wide-test-page.himart-v13 #brand .voice-group-title .v12-voice-rest{
  font-size:22px!important;
  line-height:1.38!important;
}

/* Ring charts: exact 5px draw, 12 o'clock start, and proportional circles. */
html body.himart-wide-test-page.himart-v13 #brand .ring-row{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:24px!important;
  width:100%!important;
  align-items:start!important;
}
html body.himart-wide-test-page.himart-v13 #brand .ring-card{
  position:relative!important;
  width:100%!important;
  max-width:none!important;
  aspect-ratio:1/1!important;
  height:auto!important;
  border:1px solid rgba(255,255,255,.22)!important;
  border-radius:50%!important;
  --v13-ring-pct:0;
  --v13-ring-color:var(--hm-blue);
}
html body.himart-wide-test-page.himart-v13 #brand .voice-group.negative .ring-card{--v13-ring-color:var(--hm-red)}
@property --v13-ring-pct{
  syntax:'<number>';
  inherits:false;
  initial-value:0;
}
html body.himart-wide-test-page.himart-v13 #brand .ring-card::before{
  content:""!important;
  position:absolute!important;
  inset:-1px!important;
  border-radius:50%!important;
  background:conic-gradient(from -90deg,var(--v13-ring-color) 0 calc(var(--v13-ring-pct)*1%),transparent calc(var(--v13-ring-pct)*1%) 100%)!important;
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 6px),#000 calc(100% - 5px))!important;
  mask:radial-gradient(farthest-side,transparent calc(100% - 6px),#000 calc(100% - 5px))!important;
  transition:--v13-ring-pct 1.18s cubic-bezier(.2,.8,.2,1)!important;
  pointer-events:none!important;
}
html body.himart-wide-test-page.himart-v13 #brand .ring-card.is-v13-ring-active{--v13-ring-pct:var(--pct)}

/* I / II gradient is 20% more transparent than v12. */
html body.himart-wide-test-page.himart-v13 #brand .sentiment-block::before,
html body.himart-wide-test-page.himart-v13 #brand .conclusion-card::before{
  background:linear-gradient(to bottom,rgba(0,166,237,.16) 0%,rgba(0,166,237,.096) 44%,rgba(0,166,237,.04) 70%,transparent 100%)!important;
}
html body.himart-wide-test-page.himart-v13 #brand .sentiment-block.negative::before,
html body.himart-wide-test-page.himart-v13 #brand .conclusion-card.negative::before{
  background:linear-gradient(to bottom,rgba(250,72,27,.16) 0%,rgba(250,72,27,.096) 44%,rgba(250,72,27,.04) 70%,transparent 100%)!important;
}

/* ---------- 4. UX POINTS / connected horizontal rule grammar ---------- */
html body.himart-wide-test-page.himart-v13 #brand .direction-list{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:0!important;
  border-top:1px solid rgba(255,255,255,.40)!important;
  border-bottom:1px solid rgba(255,255,255,.14)!important;
}
html body.himart-wide-test-page.himart-v13 #brand .direction-card,
html body.himart-wide-test-page.himart-v13 #brand .direction-card:nth-child(odd),
html body.himart-wide-test-page.himart-v13 #brand .direction-card:nth-last-child(-n+2){
  position:relative!important;
  min-height:280px!important;
  padding:28px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
}
html body.himart-wide-test-page.himart-v13 #brand .direction-card:nth-child(n+4){
  border-top:1px solid rgba(255,255,255,.14)!important;
}
html body.himart-wide-test-page.himart-v13 #brand .direction-card:not(:nth-child(3n))::after{
  content:""!important;
  position:absolute!important;
  right:0!important;
  top:20%!important;
  width:1px!important;
  height:60%!important;
  background:rgba(255,255,255,.16)!important;
}
html body.himart-wide-test-page.himart-v13 #brand .direction-card h4,
html body.himart-wide-test-page.himart-v13 #brand .direction-card h4 .wide-title-index{
  font-size:28px!important;
  line-height:1.22!important;
  font-weight:300!important;
  color:#fff!important;
}

/* ---------- ENTRY / ACTION segmented chart label grammar ---------- */
html body.himart-wide-test-page.himart-v13 #data .wide-entry-bar .wide-segment,
html body.himart-wide-test-page.himart-v13 #data .wide-action-bar .wide-segment{
  justify-content:flex-start!important;
  align-items:flex-end!important;
  text-align:left!important;
  padding:0 0 18px 18px!important;
}
html body.himart-wide-test-page.himart-v13 #data .wide-entry-bar .wide-segment>span,
html body.himart-wide-test-page.himart-v13 #data .wide-action-bar .wide-segment>span{
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:flex-end!important;
  gap:3px!important;
  margin:0!important;
  font-size:22px!important;
  line-height:1.04!important;
  white-space:nowrap!important;
}
html body.himart-wide-test-page.himart-v13 #data .wide-entry-bar .wide-segment>span{
  font-family:var(--hm-en)!important;
  font-weight:300!important;
}
html body.himart-wide-test-page.himart-v13 #data .wide-action-bar .wide-segment>span{
  font-family:var(--hm-ko)!important;
  font-weight:300!important;
}
html body.himart-wide-test-page.himart-v13 #data .wide-entry-bar .wide-segment small,
html body.himart-wide-test-page.himart-v13 #data .wide-action-bar .wide-segment small{
  display:block!important;
  margin:0!important;
  font-family:inherit!important;
  font-size:22px!important;
  line-height:1!important;
  font-weight:400!important;
  opacity:1!important;
}

/* ---------- 03 / JOURNEY ---------- */
/* Remove the separate flow-group top rules; colored tablet is the only group rule. */
html body.himart-wide-test-page.himart-v13 #journey .journey-signal-subsection .flow-group,
html body.himart-wide-test-page.himart-v13 #journey .journey-redesign-subsection .flow-group{
  border-top:0!important;
  padding-top:0!important;
}
html body.himart-wide-test-page.himart-v13 #journey .journey-signal-subsection .flow-group::before,
html body.himart-wide-test-page.himart-v13 #journey .journey-redesign-subsection .flow-group::before{
  display:none!important;
  content:none!important;
}

/* 1440 desktop: four equal circle widths + arrows + tablet padding fit the full row. */
html body.himart-wide-test-page.himart-v13 #journey{
  --v13-node-size:clamp(210px,20vw,292px);
  --v13-arrow-size:24px;
}
html body.himart-wide-test-page.himart-v13 #journey .journey-signal-subsection .flow-row,
html body.himart-wide-test-page.himart-v13 #journey .journey-redesign-subsection .flow-row{
  display:flex!important;
  flex-wrap:nowrap!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:16px!important;
  width:100%!important;
}
html body.himart-wide-test-page.himart-v13 #journey .journey-signal-subsection .flow-node,
html body.himart-wide-test-page.himart-v13 #journey .journey-redesign-subsection .flow-node,
html body.himart-wide-test-page.himart-v13 #journey .wide-flow-cluster.v12-journey-tablet .flow-node{
  flex:0 0 var(--v13-node-size)!important;
  width:var(--v13-node-size)!important;
  min-width:var(--v13-node-size)!important;
  max-width:var(--v13-node-size)!important;
  height:var(--v13-node-size)!important;
  min-height:var(--v13-node-size)!important;
  max-height:var(--v13-node-size)!important;
  aspect-ratio:1/1!important;
  border:1px solid rgba(255,255,255,.20)!important;
  border-radius:50%!important;
  background:#000000!important;
}
html body.himart-wide-test-page.himart-v13 #journey .flow-arrow,
html body.himart-wide-test-page.himart-v13 #journey .wide-flow-cluster.v12-journey-tablet .flow-arrow{
  flex:0 0 var(--v13-arrow-size)!important;
  width:var(--v13-arrow-size)!important;
}
html body.himart-wide-test-page.himart-v13 #journey .wide-flow-cluster.v12-journey-tablet{
  padding:18px!important;
  border-radius:999px!important;
  box-shadow:none!important;
}
html body.himart-wide-test-page.himart-v13 #journey .wide-flow-cluster.v12-journey-tablet .wide-flow-cluster-inner{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:16px!important;
}
html body.himart-wide-test-page.himart-v13 #journey .journey-signal-subsection .wide-flow-cluster.v12-journey-tablet{
  border-color:var(--hm-red)!important;
}
html body.himart-wide-test-page.himart-v13 #journey .journey-signal-subsection .wide-flow-cluster.v12-journey-tablet .wide-flow-cluster-label{
  color:var(--hm-red)!important;
}
html body.himart-wide-test-page.himart-v13 #journey .journey-redesign-subsection .wide-flow-cluster.v12-journey-tablet{
  border-color:var(--hm-blue)!important;
}
html body.himart-wide-test-page.himart-v13 #journey .journey-redesign-subsection .wide-flow-cluster.v12-journey-tablet .wide-flow-cluster-label{
  color:var(--hm-blue)!important;
}
/* Label sits in the tablet rule. */
html body.himart-wide-test-page.himart-v13 #journey .wide-flow-cluster.v12-journey-tablet .wide-flow-cluster-label{
  top:0!important;
  left:30px!important;
  transform:translateY(-50%)!important;
  padding:0 10px!important;
  background:#000000!important;
  white-space:nowrap!important;
}

/* ---------- 3. ROLE DEFINITION / connected top rules + 60% dividers ---------- */
html body.himart-wide-test-page.himart-v13 #journey .role-grid{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:0!important;
  border-top:1px solid rgba(255,255,255,.40)!important;
  border-bottom:1px solid rgba(255,255,255,.14)!important;
}
html body.himart-wide-test-page.himart-v13 #journey .role-card{
  position:relative!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
}
html body.himart-wide-test-page.himart-v13 #journey .role-card:nth-child(n+5){
  border-top:1px solid rgba(255,255,255,.14)!important;
}
html body.himart-wide-test-page.himart-v13 #journey .role-card:not(:nth-child(4n))::after{
  content:""!important;
  position:absolute!important;
  right:0!important;
  top:20%!important;
  width:1px!important;
  height:60%!important;
  background:rgba(255,255,255,.16)!important;
}

@media(max-width:1180px){
  html body.himart-wide-test-page.himart-v13 #journey{--v13-node-size:190px}
  html body.himart-wide-test-page.himart-v13 #journey .journey-signal-subsection .flow-row,
  html body.himart-wide-test-page.himart-v13 #journey .journey-redesign-subsection .flow-row{flex-wrap:wrap!important;justify-content:flex-start!important}
}
@media(max-width:900px){
  html body.himart-wide-test-page.himart-v13 #brand .direction-list{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  html body.himart-wide-test-page.himart-v13 #brand .direction-card:not(:nth-child(3n))::after{display:none!important}
  html body.himart-wide-test-page.himart-v13 #brand .direction-card:not(:nth-child(2n))::after{display:block!important}
  html body.himart-wide-test-page.himart-v13 #journey .role-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  html body.himart-wide-test-page.himart-v13 #journey .role-card:not(:nth-child(4n))::after{display:none!important}
  html body.himart-wide-test-page.himart-v13 #journey .role-card:not(:nth-child(2n))::after{display:block!important}
}
@media(max-width:780px){
  html body.himart-wide-test-page.himart-v13 #brand .ring-row{grid-template-columns:1fr!important}
  html body.himart-wide-test-page.himart-v13 #brand .ring-card{width:min(82vw,390px)!important;justify-self:center!important}
  html body.himart-wide-test-page.himart-v13 #brand .direction-list,
  html body.himart-wide-test-page.himart-v13 #journey .role-grid{grid-template-columns:1fr!important}
  html body.himart-wide-test-page.himart-v13 #brand .direction-card::after,
  html body.himart-wide-test-page.himart-v13 #journey .role-card::after{display:none!important}
  html body.himart-wide-test-page.himart-v13 #data .wide-entry-bar .wide-segment,
  html body.himart-wide-test-page.himart-v13 #data .wide-action-bar .wide-segment{padding:0 0 12px 10px!important}
  html body.himart-wide-test-page.himart-v13 #data .wide-entry-bar .wide-segment>span,
  html body.himart-wide-test-page.himart-v13 #data .wide-action-bar .wide-segment>span,
  html body.himart-wide-test-page.himart-v13 #data .wide-entry-bar .wide-segment small,
  html body.himart-wide-test-page.himart-v13 #data .wide-action-bar .wide-segment small{font-size:14px!important}
}

/* --- himart-wide-refine-v14.css --- */
/* Wide Himart refinement v14 — 2026-08-26
   Ring SVG drawing, card spacing/dividers, entry-label cleanup and journey label/copy alignment. */

/* ---------- 01 / MEANING RINGS ---------- */
html body.himart-wide-test-page.himart-v14 #brand .ring-card::before{
  display:none!important;
  content:none!important;
}
html body.himart-wide-test-page.himart-v14 #brand .ring-card{
  position:relative!important;
  overflow:visible!important;
}
html body.himart-wide-test-page.himart-v14 #brand .v14-ring-svg{
  position:absolute!important;
  inset:-1px!important;
  width:calc(100% + 2px)!important;
  height:calc(100% + 2px)!important;
  pointer-events:none!important;
  overflow:visible!important;
  transform:rotate(-90deg)!important;
  transform-origin:50% 50%!important;
  z-index:3!important;
}
html body.himart-wide-test-page.himart-v14 #brand .v14-ring-progress{
  fill:none!important;
  stroke:var(--hm-blue)!important;
  stroke-width:5px!important;
  stroke-linecap:butt!important;
  vector-effect:non-scaling-stroke!important;
  stroke-dasharray:100 100!important;
  stroke-dashoffset:100!important;
  transition:stroke-dashoffset 1.2s cubic-bezier(.2,.8,.2,1)!important;
}
html body.himart-wide-test-page.himart-v14 #brand .voice-group.negative .v14-ring-progress{
  stroke:var(--hm-red)!important;
}
html body.himart-wide-test-page.himart-v14 #brand .ring-card.is-v14-ring-active .v14-ring-progress{
  stroke-dashoffset:var(--v14-ring-offset,100)!important;
}

/* ---------- 4. UX POINTS ---------- */
html body.himart-wide-test-page.himart-v14 #brand .direction-card,
html body.himart-wide-test-page.himart-v14 #brand .direction-card:nth-child(odd),
html body.himart-wide-test-page.himart-v14 #brand .direction-card:nth-last-child(-n+2){
  padding:32px!important;
}
html body.himart-wide-test-page.himart-v14 #brand .direction-card:not(:nth-child(3n))::after{
  top:0!important;
  height:100%!important;
  background:rgba(255,255,255,.05)!important;
}

/* ---------- 02 / ENTRY ---------- */
/* The 1% yellow tail remains as data color only; its text is intentionally removed. */
html body.himart-wide-test-page.himart-v14 #data .wide-entry-bar .wide-segment:last-child>span{
  display:none!important;
}

/* ---------- 03 / JOURNEY ---------- */
/* No separate line above the colored tablet groups. */
html body.himart-wide-test-page.himart-v14 #journey .journey-signal-subsection .flow-group,
html body.himart-wide-test-page.himart-v14 #journey .journey-redesign-subsection .flow-group{
  border-top:0!important;
  padding-top:0!important;
  box-shadow:none!important;
}
html body.himart-wide-test-page.himart-v14 #journey .journey-signal-subsection .flow-group::before,
html body.himart-wide-test-page.himart-v14 #journey .journey-redesign-subsection .flow-group::before{
  display:none!important;
  content:none!important;
}

/* Every tablet label is centered in the top rule. */
html body.himart-wide-test-page.himart-v14 #journey .wide-flow-cluster.v12-journey-tablet .wide-flow-cluster-label{
  left:50%!important;
  right:auto!important;
  top:0!important;
  transform:translate(-50%,-50%)!important;
  text-align:center!important;
  justify-content:center!important;
  max-width:calc(100% - 72px)!important;
}

/* Balanced two-line inner copy. */
html body.himart-wide-test-page.himart-v14 #journey .flow-node p.v14-balanced-flow-copy{
  width:100%!important;
  max-width:100%!important;
  text-align:center!important;
}
html body.himart-wide-test-page.himart-v14 #journey .flow-node p.v14-balanced-flow-copy .v14-flow-line{
  display:block!important;
  white-space:nowrap!important;
}

/* ---------- 3. ROLE DEFINITION ---------- */
html body.himart-wide-test-page.himart-v14 #journey .role-grid{
  border-top-color:rgba(255,255,255,.40)!important;
}
html body.himart-wide-test-page.himart-v14 #journey .role-card{
  padding-left:32px!important;
  padding-right:32px!important;
}
html body.himart-wide-test-page.himart-v14 #journey .role-card:not(:nth-child(4n))::after{
  top:0!important;
  height:100%!important;
  background:rgba(255,255,255,.05)!important;
}

@media(max-width:900px){
  html body.himart-wide-test-page.himart-v14 #brand .direction-card:not(:nth-child(3n))::after{display:none!important}
  html body.himart-wide-test-page.himart-v14 #brand .direction-card:not(:nth-child(2n))::after{
    display:block!important;
    top:0!important;
    height:100%!important;
    background:rgba(255,255,255,.05)!important;
  }
  html body.himart-wide-test-page.himart-v14 #journey .role-card:not(:nth-child(4n))::after{display:none!important}
  html body.himart-wide-test-page.himart-v14 #journey .role-card:not(:nth-child(2n))::after{
    display:block!important;
    top:0!important;
    height:100%!important;
    background:rgba(255,255,255,.05)!important;
  }
}
@media(max-width:780px){
  html body.himart-wide-test-page.himart-v14 #journey .wide-flow-cluster.v12-journey-tablet .wide-flow-cluster-label{
    max-width:78vw!important;
    white-space:normal!important;
  }
  html body.himart-wide-test-page.himart-v14 #journey .flow-node p.v14-balanced-flow-copy .v14-flow-line{
    white-space:normal!important;
  }
}

/* --- himart-wide-refine-v15.css --- */
/* Wide Himart refinement v15 — 2026-08-26
   Correct ring arc geometry, soften summary gradients, align data bridge with UX-point card grammar,
   and tune shared top rules. Loaded last on Wide Layout Test. */

/* ---------- 01 / MEANING RINGS ---------- */
/* A conic fill is used instead of an SVG dash pattern. CSS conic angles start at 12 o'clock
   and increase clockwise, so each percentage is one exact uninterrupted 5px arc. */
html body.himart-wide-test-page.himart-v15 #brand .v14-ring-svg,
html body.himart-wide-test-page.himart-v15 #brand .v15-ring-svg{
  display:none!important;
}
html body.himart-wide-test-page.himart-v15 #brand .ring-card::before,
html body.himart-wide-test-page.himart-v15 #brand .ring-card::after{
  display:none!important;
  content:none!important;
}
html body.himart-wide-test-page.himart-v15 #brand .ring-card{
  position:relative!important;
  overflow:visible!important;
}
html body.himart-wide-test-page.himart-v15 #brand .v15-ring-arc{
  --v15-ring-angle:0deg;
  --v15-ring-color:var(--hm-blue);
  position:absolute!important;
  inset:-1px!important;
  border-radius:50%!important;
  background:conic-gradient(
    from 0deg,
    var(--v15-ring-color) 0deg,
    var(--v15-ring-color) var(--v15-ring-angle),
    transparent var(--v15-ring-angle),
    transparent 360deg
  )!important;
  -webkit-mask:radial-gradient(
    farthest-side,
    transparent calc(100% - 5px),
    #000 calc(100% - 4.999px)
  )!important;
  mask:radial-gradient(
    farthest-side,
    transparent calc(100% - 5px),
    #000 calc(100% - 4.999px)
  )!important;
  -webkit-mask-repeat:no-repeat!important;
  mask-repeat:no-repeat!important;
  pointer-events:none!important;
  z-index:4!important;
}
html body.himart-wide-test-page.himart-v15 #brand .voice-group.negative .v15-ring-arc{
  --v15-ring-color:var(--hm-red);
}

/* ---------- 01 / SUMMARY GRADIENTS ---------- */
/* 20% less opaque than v13/v14. */
html body.himart-wide-test-page.himart-v15 #brand .sentiment-block::before,
html body.himart-wide-test-page.himart-v15 #brand .conclusion-card::before{
  background:linear-gradient(to bottom,
    rgba(0,166,237,.128) 0%,
    rgba(0,166,237,.0768) 44%,
    rgba(0,166,237,.032) 70%,
    transparent 100%)!important;
}
html body.himart-wide-test-page.himart-v15 #brand .sentiment-block.negative::before,
html body.himart-wide-test-page.himart-v15 #brand .conclusion-card.negative::before{
  background:linear-gradient(to bottom,
    rgba(250,72,27,.128) 0%,
    rgba(250,72,27,.0768) 44%,
    rgba(250,72,27,.032) 70%,
    transparent 100%)!important;
}

/* ---------- 4. UX POINTS ---------- */
/* The connected rule above the principle cards is 30% white. */
html body.himart-wide-test-page.himart-v15 #brand .direction-list{
  border-top-color:rgba(255,255,255,.30)!important;
}

/* ---------- 02 / ACTION BAR ---------- */
html body.himart-wide-test-page.himart-v15 #data .wide-action-bar .wide-segment:first-child .v15-action-label{
  font-family:Pretendard,-apple-system,BlinkMacSystemFont,"Noto Sans KR","Apple SD Gothic Neo",Arial,sans-serif!important;
  font-weight:200!important;
  font-size:22px!important;
  line-height:1.04!important;
}

/* ---------- V / DATA SYNTHESIS ---------- */
/* Match the UX-principle card grammar: connected rules, 32px padding, 280px height, 28px titles. */
html body.himart-wide-test-page.himart-v15 #data .data-bridge{
  padding-top:0!important;
  border-top:0!important;
}
html body.himart-wide-test-page.himart-v15 #data .data-bridge-title{
  margin:0 0 20px!important;
  font-family:var(--hm-ko)!important;
  font-weight:100!important;
  font-size:28px!important;
  line-height:1.22!important;
  letter-spacing:-.035em!important;
}
html body.himart-wide-test-page.himart-v15 #data .data-bridge-grid{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:0!important;
  border-top:1px solid rgba(255,255,255,.30)!important;
  border-bottom:1px solid rgba(255,255,255,.14)!important;
}
html body.himart-wide-test-page.himart-v15 #data .data-bridge-grid article{
  position:relative!important;
  display:flex!important;
  flex-direction:column!important;
  min-height:280px!important;
  height:280px!important;
  padding:32px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
}
html body.himart-wide-test-page.himart-v15 #data .data-bridge-grid article:not(:last-child)::after{
  content:""!important;
  position:absolute!important;
  right:0!important;
  top:0!important;
  width:1px!important;
  height:100%!important;
  background:rgba(255,255,255,.05)!important;
}
html body.himart-wide-test-page.himart-v15 #data .data-bridge-grid article>span{
  display:none!important;
}
html body.himart-wide-test-page.himart-v15 #data .data-bridge-grid article h4{
  margin:0!important;
  font-family:var(--hm-ko)!important;
  font-weight:300!important;
  font-size:28px!important;
  line-height:1.22!important;
  letter-spacing:-.035em!important;
  color:#fff!important;
}
html body.himart-wide-test-page.himart-v15 #data .data-bridge-grid article p{
  margin:auto 0 0!important;
  padding-top:22px!important;
  font-family:var(--hm-ko)!important;
  font-weight:300!important;
  font-size:16px!important;
  line-height:1.58!important;
  color:rgba(255,255,255,.50)!important;
}

/* ---------- 3. ROLE DEFINITION ---------- */
html body.himart-wide-test-page.himart-v15 #journey .role-grid{
  border-top-color:rgba(255,255,255,.30)!important;
}

@media(max-width:1100px){
  html body.himart-wide-test-page.himart-v15 #data .data-bridge-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  html body.himart-wide-test-page.himart-v15 #data .data-bridge-grid article:nth-child(2n)::after{display:none!important}
  html body.himart-wide-test-page.himart-v15 #data .data-bridge-grid article:nth-child(n+3){
    border-top:1px solid rgba(255,255,255,.14)!important;
  }
}
@media(max-width:780px){
  html body.himart-wide-test-page.himart-v15 #data .data-bridge-grid{
    grid-template-columns:1fr!important;
  }
  html body.himart-wide-test-page.himart-v15 #data .data-bridge-grid article{
    height:auto!important;
    min-height:240px!important;
  }
  html body.himart-wide-test-page.himart-v15 #data .data-bridge-grid article::after{display:none!important}
  html body.himart-wide-test-page.himart-v15 #data .data-bridge-grid article+article{
    border-top:1px solid rgba(255,255,255,.14)!important;
  }
}

/* --- himart-production-refine-v16.css --- */
/* Himart production refinement v16 — 2026-08-27
   Production-only adjustments for qualitative synthesis, data evidence, journey conclusion and prototype rows. */

/* ---------- 01 / QUALITATIVE ---------- */
/* Meaning-source line under the negative ring group. */
html body.himart-wide-test-page.himart-prod-v16 #brand .production-meaning-source{
  margin:30px 0 0!important;
  padding:0!important;
  border-top:0!important;
  color:rgba(255,255,255,.38)!important;
  font-family:var(--hm-ko)!important;
  font-size:12px!important;
  font-weight:300!important;
  line-height:1.5!important;
}
html body.himart-wide-test-page.himart-prod-v16 #brand .production-summary-after-source{
  margin-top:100px!important;
}

/* Summary boxes keep horizontal rules only: no outer verticals and no center divider. */
html body.himart-wide-test-page.himart-prod-v16 #brand .sentiment-graph{
  border-left:0!important;
  border-right:0!important;
}
html body.himart-wide-test-page.himart-prod-v16 #brand .sentiment-block.negative{
  border-left:0!important;
}
html body.himart-wide-test-page.himart-prod-v16 #brand .conclusion-grid{
  border-left:0!important;
  border-right:0!important;
}
html body.himart-wide-test-page.himart-prod-v16 #brand .conclusion-card.negative{
  border-left:0!important;
}

/* 10% softer than the current v15 gradients. */
html body.himart-wide-test-page.himart-prod-v16 #brand .sentiment-block::before,
html body.himart-wide-test-page.himart-prod-v16 #brand .conclusion-card::before{
  background:linear-gradient(to bottom,
    rgba(0,166,237,.1152) 0%,
    rgba(0,166,237,.06912) 44%,
    rgba(0,166,237,.0288) 70%,
    transparent 100%)!important;
}
html body.himart-wide-test-page.himart-prod-v16 #brand .sentiment-block.negative::before,
html body.himart-wide-test-page.himart-prod-v16 #brand .conclusion-card.negative::before{
  background:linear-gradient(to bottom,
    rgba(250,72,27,.1152) 0%,
    rgba(250,72,27,.06912) 44%,
    rgba(250,72,27,.0288) 70%,
    transparent 100%)!important;
}

/* Principle title/copy are explicitly left-aligned inside the 32px card inset. */
html body.himart-wide-test-page.himart-prod-v16 #brand .direction-card{
  align-items:flex-start!important;
  text-align:left!important;
}
html body.himart-wide-test-page.himart-prod-v16 #brand .direction-card h4,
html body.himart-wide-test-page.himart-prod-v16 #brand .direction-card p{
  width:100%!important;
  margin-left:0!important;
  margin-right:0!important;
  text-align:left!important;
}
@media(min-width:781px){
  html body.himart-wide-test-page.himart-prod-v16 #brand .direction-card:nth-child(1),
  html body.himart-wide-test-page.himart-prod-v16 #brand .direction-card:nth-child(4){
    padding-left:0!important;
  }
  /* The desktop circles keep their responsive columns but render at exactly 90%. */
  html body.himart-wide-test-page.himart-prod-v16 #brand .ring-card{
    width:90%!important;
    max-width:none!important;
    justify-self:center!important;
  }
}

/* ---------- 02 / QUANTITATIVE ---------- */
/* Entry and landing→action bars use one 160px production height. */
html body.himart-wide-test-page.himart-prod-v16 #data .wide-entry-bar,
html body.himart-wide-test-page.himart-prod-v16 #data .wide-action-bar{
  height:160px!important;
  min-height:160px!important;
}

/* Remove the rule directly above '기획전 시작 후 첫 다음 행동' and tighten the residual top space. */
html body.himart-wide-test-page.himart-prod-v16 #data .landing-chart{
  border-top:0!important;
  padding-top:0!important;
  margin-top:0!important;
}
html body.himart-wide-test-page.himart-prod-v16 #data .landing-chart>h4{
  border-top:0!important;
  padding-top:0!important;
  margin-top:0!important;
  margin-bottom:24px!important;
}
/* Only this synthesis heading uses the requested 22px hierarchy. */
html body.himart-wide-test-page.himart-prod-v16 #data .data-bridge-grid>article>h4{
  font-size:22px!important;
  line-height:1.3!important;
}
/* Remove only the two specified source rules and pull them toward their charts. */
html body.himart-wide-test-page.himart-prod-v16 #data .data-card:first-child .hm-source,
html body.himart-wide-test-page.himart-prod-v16 #data .data-card:last-child .hm-source{
  margin-top:14px!important;
  padding-top:0!important;
  border-top:0!important;
}

/* ---------- 03 / JOURNEY ---------- */
html body.himart-wide-test-page.himart-prod-v16 #journey .production-tobe-conclusion{
  margin:54px 0 0!important;
  padding:0!important;
  border-top:0!important;
  max-width:1120px!important;
  color:rgba(255,255,255,.50)!important;
  font-family:var(--hm-ko)!important;
  font-size:16px!important;
  font-weight:300!important;
  line-height:1.65!important;
}
html body.himart-wide-test-page.himart-prod-v16 #journey .production-tobe-conclusion strong{
  color:var(--hm-blue)!important;
  font-weight:400!important;
}

/* ---------- 04 / PROTOTYPE ---------- */
/* Current production DOM: four full-width rows, each with three wireframes and one copy panel. */
html body.himart-wide-test-page.himart-prod-v16 #direction .prototype-case-list{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:112px!important;
  width:100%!important;
  margin-top:86px!important;
}
html body.himart-wide-test-page.himart-prod-v16 #direction .prototype-case{
  display:grid!important;
  grid-template-columns:minmax(0,3fr) minmax(280px,1fr)!important;
  gap:48px!important;
  align-items:stretch!important;
  width:100%!important;
  min-width:0!important;
  padding:0!important;
  border-top:0!important;
}
html body.himart-wide-test-page.himart-prod-v16 #direction .prototype-case-visual{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:16px!important;
  align-items:start!important;
  justify-items:stretch!important;
  width:100%!important;
  height:auto!important;
  min-width:0!important;
  padding:0!important;
  overflow:visible!important;
  background:transparent!important;
}
html body.himart-wide-test-page.himart-prod-v16 #direction .prototype-case-visual .galaxy-ultra-mockup{
  display:block!important;
  width:100%!important;
  max-width:none!important;
  height:auto!important;
  aspect-ratio:9/19.5!important;
  margin:0!important;
}
html body.himart-wide-test-page.himart-prod-v16 #direction .prototype-case-copy{
  height:auto!important;
  min-height:0!important;
  padding:0!important;
  justify-content:flex-end!important;
  align-self:stretch!important;
}

/* Legacy source fallback. */
 /* Four rows. Each row presents three screens plus their text panel. */
html body.himart-wide-test-page.himart-prod-v16 #direction .phone-gallery.production-prototype-gallery{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:100px!important;
  width:100%!important;
  margin-top:72px!important;
}
html body.himart-wide-test-page.himart-prod-v16 #direction .production-prototype-row{
  display:grid!important;
  grid-template-columns:minmax(0,3fr) minmax(240px,1fr)!important;
  gap:48px!important;
  align-items:stretch!important;
  width:100%!important;
  padding-top:32px!important;
  border-top:1px solid rgba(255,255,255,.14)!important;
}
html body.himart-wide-test-page.himart-prod-v16 #direction .production-prototype-phones{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:18px!important;
  align-items:start!important;
  min-width:0!important;
}
html body.himart-wide-test-page.himart-prod-v16 #direction .production-prototype-phones .phone-card{
  display:block!important;
  width:100%!important;
  min-width:0!important;
  margin:0!important;
}
html body.himart-wide-test-page.himart-prod-v16 #direction .production-prototype-copy{
  display:flex!important;
  flex-direction:column!important;
  justify-content:flex-end!important;
  gap:22px!important;
  min-width:0!important;
  padding-bottom:2px!important;
}
html body.himart-wide-test-page.himart-prod-v16 #direction .production-prototype-copy .phone-meta{
  display:grid!important;
  grid-template-columns:34px minmax(0,1fr)!important;
  column-gap:12px!important;
  row-gap:5px!important;
  width:100%!important;
  margin:0!important;
  padding:14px 0 0!important;
  border-top:1px solid rgba(255,255,255,.10)!important;
}
html body.himart-wide-test-page.himart-prod-v16 #direction .production-prototype-copy .phone-meta span{
  grid-column:1!important;
  grid-row:1 / span 2!important;
  color:var(--hm-blue)!important;
  font-family:var(--hm-en)!important;
  font-size:12px!important;
  font-weight:300!important;
}
html body.himart-wide-test-page.himart-prod-v16 #direction .production-prototype-copy .phone-meta b{
  grid-column:2!important;
  margin:0!important;
  color:#fff!important;
  font-family:var(--hm-en)!important;
  font-size:14px!important;
  font-weight:300!important;
  line-height:1.25!important;
}
html body.himart-wide-test-page.himart-prod-v16 #direction .production-prototype-copy .phone-meta p{
  grid-column:2!important;
  margin:0!important;
  color:rgba(255,255,255,.50)!important;
  font-family:var(--hm-ko)!important;
  font-size:14px!important;
  font-weight:300!important;
  line-height:1.45!important;
}

@media(max-width:1000px){
  html body.himart-wide-test-page.himart-prod-v16 #direction .prototype-case{
    grid-template-columns:1fr!important;
    gap:32px!important;
  }
  html body.himart-wide-test-page.himart-prod-v16 #direction .prototype-case-copy{
    justify-content:flex-start!important;
  }
  html body.himart-wide-test-page.himart-prod-v16 #direction .production-prototype-row{
    grid-template-columns:1fr!important;
    gap:28px!important;
  }
  html body.himart-wide-test-page.himart-prod-v16 #direction .production-prototype-copy{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:18px!important;
  }
}
@media(max-width:780px){
  html body.himart-wide-test-page.himart-prod-v16 #data .wide-entry-bar,
  html body.himart-wide-test-page.himart-prod-v16 #data .wide-action-bar{
    height:128px!important;
    min-height:128px!important;
  }
  html body.himart-wide-test-page.himart-prod-v16 #direction .prototype-case-list{
    gap:78px!important;
    margin-top:58px!important;
  }
  html body.himart-wide-test-page.himart-prod-v16 #direction .prototype-case-visual{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:8px!important;
  }
  html body.himart-wide-test-page.himart-prod-v16 #direction .production-prototype-phones,
  html body.himart-wide-test-page.himart-prod-v16 #direction .production-prototype-copy{
    grid-template-columns:1fr!important;
  }
  html body.himart-wide-test-page.himart-prod-v16 #direction .phone-gallery.production-prototype-gallery{
    gap:72px!important;
  }
}


/* ---------- RESPONSIVE / MOBILE ----------
   Desktop values above 1180px remain untouched. */
@media(min-width:781px) and (max-width:1180px){
  html body.himart-wide-test-page.himart-prod-v16 #journey{
    --v13-node-size:clamp(168px,17.2vw,190px)!important;
    --v13-arrow-size:clamp(18px,2vw,24px)!important;
  }
  html body.himart-wide-test-page.himart-prod-v16 #journey .journey-signal-subsection .flow-row,
  html body.himart-wide-test-page.himart-prod-v16 #journey .journey-redesign-subsection .flow-row{
    gap:clamp(10px,1.35vw,16px)!important;
  }
  html body.himart-wide-test-page.himart-prod-v16 #journey .wide-flow-cluster.v12-journey-tablet{
    padding:clamp(12px,1.55vw,18px)!important;
  }
  html body.himart-wide-test-page.himart-prod-v16 #journey .wide-flow-cluster.v12-journey-tablet .wide-flow-cluster-inner{
    gap:clamp(10px,1.35vw,16px)!important;
  }
  html body.himart-wide-test-page.himart-prod-v16 #journey .flow-node{
    padding:clamp(18px,2vw,24px)!important;
  }
  html body.himart-wide-test-page.himart-prod-v16 #journey .flow-node h4{
    font-size:clamp(18px,2vw,22px)!important;
    line-height:1.24!important;
  }
  html body.himart-wide-test-page.himart-prod-v16 #journey .flow-node p{
    font-size:clamp(12px,1.3vw,14px)!important;
    line-height:1.45!important;
  }
}

@media(max-width:780px){
  /* Voice-group hierarchy. Mobile circle sizing is inherited from the approved pre-v16 rule. */
  html body.himart-wide-test-page.himart-prod-v16 #brand .voice-group-title,
  html body.himart-wide-test-page.himart-prod-v16 #brand .voice-group-title .v12-voice-accent,
  html body.himart-wide-test-page.himart-prod-v16 #brand .voice-group-title .v12-voice-rest{
    font-size:20px!important;
    line-height:1.36!important;
  }
  /* Explicit rollback to the approved mobile circle size. */
  html body.himart-wide-test-page.himart-prod-v16 #brand .ring-card{
    width:min(82vw,320px)!important;
    max-width:320px!important;
    justify-self:center!important;
  }

  /* Mobile journey: one vertical reading path instead of wrapped desktop rows. */
  html body.himart-wide-test-page.himart-prod-v16 #journey{
    --v13-node-size:clamp(142px,42vw,168px)!important;
    --v13-arrow-size:24px!important;
  }
  html body.himart-wide-test-page.himart-prod-v16 #journey .journey-signal-subsection .flow-row,
  html body.himart-wide-test-page.himart-prod-v16 #journey .journey-redesign-subsection .flow-row{
    flex-direction:column!important;
    flex-wrap:nowrap!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:20px!important;
    width:100%!important;
  }
  html body.himart-wide-test-page.himart-prod-v16 #journey .wide-flow-cluster.v12-journey-tablet{
    width:auto!important;
    max-width:100%!important;
    padding:32px 16px 18px!important;
    border-radius:44px!important;
  }
  html body.himart-wide-test-page.himart-prod-v16 #journey .wide-flow-cluster.v12-journey-tablet .wide-flow-cluster-inner{
    flex-direction:column!important;
    flex-wrap:nowrap!important;
    align-items:center!important;
    gap:12px!important;
  }
  html body.himart-wide-test-page.himart-prod-v16 #journey .journey-signal-subsection .flow-node,
  html body.himart-wide-test-page.himart-prod-v16 #journey .journey-redesign-subsection .flow-node,
  html body.himart-wide-test-page.himart-prod-v16 #journey .wide-flow-cluster.v12-journey-tablet .flow-node{
    flex:0 0 var(--v13-node-size)!important;
    flex-basis:var(--v13-node-size)!important;
    width:var(--v13-node-size)!important;
    min-width:var(--v13-node-size)!important;
    max-width:var(--v13-node-size)!important;
    height:var(--v13-node-size)!important;
    min-height:var(--v13-node-size)!important;
    max-height:var(--v13-node-size)!important;
    aspect-ratio:1/1!important;
    padding:18px 14px!important;
  }
  html body.himart-wide-test-page.himart-prod-v16 #journey .flow-node .hm-card-no{
    font-size:10px!important;
  }
  html body.himart-wide-test-page.himart-prod-v16 #journey .flow-node h4{
    margin-top:10px!important;
    font-size:clamp(16px,4.6vw,18px)!important;
    line-height:1.22!important;
  }
  html body.himart-wide-test-page.himart-prod-v16 #journey .flow-node p{
    margin-top:10px!important;
    font-size:clamp(11px,3.1vw,12px)!important;
    line-height:1.42!important;
  }
  html body.himart-wide-test-page.himart-prod-v16 #journey .flow-arrow,
  html body.himart-wide-test-page.himart-prod-v16 #journey .wide-flow-cluster.v12-journey-tablet .flow-arrow{
    display:flex!important;
    flex:0 0 24px!important;
    width:24px!important;
    height:24px!important;
    align-items:center!important;
    justify-content:center!important;
    transform:rotate(90deg)!important;
  }
  html body.himart-wide-test-page.himart-prod-v16 #journey .wide-flow-cluster.v12-journey-tablet .wide-flow-cluster-label{
    left:50%!important;
    max-width:calc(100% - 32px)!important;
    transform:translate(-50%,-50%)!important;
    white-space:normal!important;
    text-align:center!important;
  }
}

@media(max-width:420px){
  html body.himart-wide-test-page.himart-prod-v16 #journey{
    --v13-node-size:clamp(138px,42vw,160px)!important;
  }
  html body.himart-wide-test-page.himart-prod-v16 #journey .flow-node h4{
    font-size:16px!important;
  }
}

/* --- himart-mobile-v17.css --- */
/* Himart mobile system v18 — mobile-only, desktop remains untouched. */
@media (max-width:780px){
  html body.himart-wide-test-page.himart-prod-v16{
    --hm-mobile-display:clamp(32px,8.8vw,38px);
    --hm-mobile-section:clamp(30px,8.4vw,36px);
    --hm-mobile-subsection:clamp(24px,6.8vw,28px);
    --hm-mobile-group:clamp(20px,5.6vw,22px);
    --hm-mobile-body:clamp(14px,3.9vw,16px);
    --hm-mobile-small:clamp(12px,3.35vw,14px);
    max-width:100%!important;
    overflow-x:hidden!important;
    overflow-x:clip!important;
  }
  html{
    max-width:100%!important;
    overflow-x:hidden!important;
    overflow-x:clip!important;
  }
  html body.himart-wide-test-page.himart-prod-v16 #live-main,
  html body.himart-wide-test-page.himart-prod-v16 .hm-hero,
  html body.himart-wide-test-page.himart-prod-v16 .hm-section{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow-x:hidden!important;
    overflow-x:clip!important;
  }
  html body.himart-wide-test-page.himart-prod-v16 .hm-wrap{
    width:calc(100% - 36px)!important;
    max-width:none!important;
    min-width:0!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }

  /* Global rhythm and type hierarchy */
  html body.himart-wide-test-page.himart-prod-v16 .hm-hero{
    min-height:0!important;
    padding:96px 0 76px!important;
  }
  html body.himart-wide-test-page.himart-prod-v16 .hm-kicker{
    margin-bottom:20px!important;
    font-size:10px!important;
    line-height:1.4!important;
  }
  html body.himart-wide-test-page.himart-prod-v16 .hm-title{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin:0!important;
    font-size:var(--hm-mobile-display)!important;
    line-height:1.08!important;
    letter-spacing:-.048em!important;
    word-break:keep-all!important;
    overflow-wrap:break-word!important;
  }
  html body.himart-wide-test-page.himart-prod-v16 .hm-hero-bottom{
    padding-top:34px!important;
  }
  html body.himart-wide-test-page.himart-prod-v16 .hm-lead{
    max-width:100%!important;
    font-size:var(--hm-mobile-body)!important;
    line-height:1.62!important;
    word-break:keep-all!important;
  }
  html body.himart-wide-test-page.himart-prod-v16 .hm-meta{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    margin-top:36px!important;
  }
  html body.himart-wide-test-page.himart-prod-v16 .hm-meta div{
    min-height:68px!important;
    padding:13px 10px 13px 0!important;
  }
  html body.himart-wide-test-page.himart-prod-v16 .hm-meta div:nth-child(even){
    padding-left:14px!important;
    border-left:1px solid var(--hm-line)!important;
  }
  html body.himart-wide-test-page.himart-prod-v16 .hm-meta div:nth-child(3){
    border-left:0!important;
  }
  html body.himart-wide-test-page.himart-prod-v16 .hm-meta span{
    margin-bottom:8px!important;
    font-size:8px!important;
  }
  html body.himart-wide-test-page.himart-prod-v16 .hm-meta b{
    font-size:12px!important;
    line-height:1.35!important;
  }

  html body.himart-wide-test-page.himart-prod-v16 .hm-section{
    padding:92px 0!important;
  }
  html body.himart-wide-test-page.himart-prod-v16 .hm-section-head{
    margin-bottom:64px!important;
  }
  html body.himart-wide-test-page.himart-prod-v16 .hm-section-no{
    margin-bottom:16px!important;
    font-size:16px!important;
    line-height:1!important;
  }
  html body.himart-wide-test-page.himart-prod-v16 .hm-section-title{
    max-width:100%!important;
    font-size:var(--hm-mobile-section)!important;
    line-height:1.16!important;
    letter-spacing:-.045em!important;
    white-space:normal!important;
    word-break:keep-all!important;
    overflow-wrap:normal!important;
  }
  html body.himart-wide-test-page.himart-prod-v16 .hm-section-desc{
    max-width:100%!important;
    margin-top:22px!important;
    font-size:var(--hm-mobile-body)!important;
    line-height:1.6!important;
    word-break:keep-all!important;
  }
  html body.himart-wide-test-page.himart-prod-v16 .hm-subsection{
    margin-top:80px!important;
    padding-top:24px!important;
  }
  html body.himart-wide-test-page.himart-prod-v16 .hm-subsection:first-of-type{
    margin-top:0!important;
  }
  html body.himart-wide-test-page.himart-prod-v16 .hm-subhead{
    margin-bottom:42px!important;
  }
  html body.himart-wide-test-page.himart-prod-v16 .hm-subno{
    margin-bottom:14px!important;
    font-size:10px!important;
  }
  html body.himart-wide-test-page.himart-prod-v16 .hm-subtitle,
  html body.himart-wide-test-page.himart-prod-v16 .forced-redesign-title{
    max-width:100%!important;
    font-size:var(--hm-mobile-subsection)!important;
    line-height:1.24!important;
    letter-spacing:-.04em!important;
    word-break:keep-all!important;
    overflow-wrap:normal!important;
  }
  html body.himart-wide-test-page.himart-prod-v16 .hm-subcopy{
    max-width:100%!important;
    margin-top:16px!important;
    font-size:var(--hm-mobile-body)!important;
    line-height:1.58!important;
  }

  /* 01 / Brand perception */
  html body.himart-wide-test-page.himart-prod-v16 #brand .keyword-grid{
    grid-template-columns:1fr!important;
    gap:48px!important;
  }
  html body.himart-wide-test-page.himart-prod-v16 #brand .keyword-group{
    padding-top:18px!important;
  }
  html body.himart-wide-test-page.himart-prod-v16 #brand .keyword-group h3{
    margin-bottom:24px!important;
    font-size:var(--hm-mobile-group)!important;
    line-height:1.3!important;
  }
  html body.himart-wide-test-page.himart-prod-v16 #brand .keyword-cloud{
    gap:8px!important;
  }
  html body.himart-wide-test-page.himart-prod-v16 #brand .keyword-pill{
    min-height:34px!important;
    padding:7px 11px!important;
    font-size:11px!important;
    line-height:1.25!important;
  }
  html body.himart-wide-test-page.himart-prod-v16 #brand .voice-stack{
    gap:64px!important;
  }
  html body.himart-wide-test-page.himart-prod-v16 #brand .voice-group{
    padding-top:18px!important;
  }
  html body.himart-wide-test-page.himart-prod-v16 #brand .voice-group-title,
  html body.himart-wide-test-page.himart-prod-v16 #brand .voice-group-title .v12-voice-accent,
  html body.himart-wide-test-page.himart-prod-v16 #brand .voice-group-title .v12-voice-rest{
    max-width:100%!important;
    margin-bottom:30px!important;
    font-size:var(--hm-mobile-group)!important;
    line-height:1.38!important;
  }
  html body.himart-wide-test-page.himart-prod-v16 #brand .ring-row{
    grid-template-columns:1fr!important;
    gap:22px!important;
  }
  html body.himart-wide-test-page.himart-prod-v16 #brand .ring-card{
    width:min(82vw,320px)!important;
    max-width:320px!important;
    height:auto!important;
    aspect-ratio:1/1!important;
    margin:0 auto!important;
    padding:42px 30px 66px!important;
  }
  html body.himart-wide-test-page.himart-prod-v16 #brand .ring-card h4{
    font-size:21px!important;
    line-height:1.25!important;
  }
  html body.himart-wide-test-page.himart-prod-v16 #brand .ring-card p{
    max-width:210px!important;
    margin-top:15px!important;
    font-size:13px!important;
    line-height:1.5!important;
  }
  html body.himart-wide-test-page.himart-prod-v16 #brand .ring-card .pct{
    bottom:20px!important;
    font-size:26px!important;
  }
  html body.himart-wide-test-page.himart-prod-v16 #brand .production-meaning-source{
    margin-top:24px!important;
    font-size:10px!important;
    line-height:1.5!important;
  }
  html body.himart-wide-test-page.himart-prod-v16 #brand .production-summary-after-source{
    margin-top:76px!important;
  }
  html body.himart-wide-test-page.himart-prod-v16 #brand .sentiment-title,
  html body.himart-wide-test-page.himart-prod-v16 #brand .sentiment-conclusion>h4{
    margin-bottom:26px!important;
    font-size:var(--hm-mobile-group)!important;
    line-height:1.4!important;
  }
  html body.himart-wide-test-page.himart-prod-v16 #brand .sentiment-graph,
  html body.himart-wide-test-page.himart-prod-v16 #brand .conclusion-grid{
    grid-template-columns:1fr!important;
  }
  html body.himart-wide-test-page.himart-prod-v16 #brand .sentiment-block{
    min-height:250px!important;
    padding:24px!important;
  }
  html body.himart-wide-test-page.himart-prod-v16 #brand .sentiment-number{
    font-size:clamp(46px,14vw,58px)!important;
  }
  html body.himart-wide-test-page.himart-prod-v16 #brand .sentiment-keywords{
    font-size:14px!important;
    line-height:1.6!important;
  }
  html body.himart-wide-test-page.himart-prod-v16 #brand .sentiment-conclusion{
    margin-top:52px!important;
  }
  html body.himart-wide-test-page.himart-prod-v16 #brand .conclusion-card{
    min-height:240px!important;
    padding:24px!important;
  }
  html body.himart-wide-test-page.himart-prod-v16 #brand .conclusion-card h5{
    font-size:23px!important;
    line-height:1.3!important;
  }
  html body.himart-wide-test-page.himart-prod-v16 #brand .conclusion-card p{
    font-size:14px!important;
    line-height:1.58!important;
  }
  html body.himart-wide-test-page.himart-prod-v16 #brand .direction-card{
    display:block!important;
    min-height:0!important;
    padding:25px 0 28px!important;
  }
  html body.himart-wide-test-page.himart-prod-v16 #brand .direction-card .hm-card-no{
    display:block!important;
    margin:0 0 11px!important;
    font-size:10px!important;
  }
  html body.himart-wide-test-page.himart-prod-v16 #brand .direction-card h4{
    margin:0 0 14px!important;
    font-size:var(--hm-mobile-group)!important;
    line-height:1.3!important;
  }
  html body.himart-wide-test-page.himart-prod-v16 #brand .direction-card p{
    margin:0!important;
    font-size:14px!important;
    line-height:1.58!important;
  }

  /* 02 / Quantitative data */
  html body.himart-wide-test-page.himart-prod-v16 #data .data-card{
    padding:54px 0 62px!important;
  }
  html body.himart-wide-test-page.himart-prod-v16 #data .data-card-head{
    grid-template-columns:1fr!important;
    margin-bottom:0!important;
  }
  html body.himart-wide-test-page.himart-prod-v16 #data .data-card-head h3{
    max-width:100%!important;
    font-size:clamp(24px,6.8vw,28px)!important;
    line-height:1.25!important;
    word-break:keep-all!important;
  }
  html body.himart-wide-test-page.himart-prod-v16 #data .data-card .desc{
    max-width:100%!important;
    margin-top:15px!important;
    font-size:14px!important;
    line-height:1.58!important;
  }
  html body.himart-wide-test-page.himart-prod-v16 #data .data-viz{
    width:100%!important;
    min-width:0!important;
    min-height:0!important;
    margin-top:30px!important;
    overflow:hidden!important;
  }
  html body.himart-wide-test-page.himart-prod-v16 #data .wide-entry-bar,
  html body.himart-wide-test-page.himart-prod-v16 #data .wide-action-bar{
    height:112px!important;
    min-height:112px!important;
  }
  html body.himart-wide-test-page.himart-prod-v16 #data .wide-segment span{
    font-size:10px!important;
    line-height:1.25!important;
  }
  html body.himart-wide-test-page.himart-prod-v16 #data .wide-segment small{
    font-size:9px!important;
  }
  html body.himart-wide-test-page.himart-prod-v16 #data .chart-wrap,
  html body.himart-wide-test-page.himart-prod-v16 #data .wide-unified-traffic{
    width:100%!important;
    min-width:0!important;
    overflow:hidden!important;
  }
  html body.himart-wide-test-page.himart-prod-v16 #data .chart-svg{
    width:100%!important;
    height:auto!important;
    min-height:220px!important;
  }
  html body.himart-wide-test-page.himart-prod-v16 #data .wide-traffic-legend{
    grid-template-columns:1fr 1fr!important;
    gap:10px 12px!important;
    font-size:10px!important;
  }
  html body.himart-wide-test-page.himart-prod-v16 #data .number-pair{
    grid-template-columns:1fr!important;
    gap:14px!important;
  }
  html body.himart-wide-test-page.himart-prod-v16 #data .number-panel{
    min-height:180px!important;
    padding:22px!important;
  }
  html body.himart-wide-test-page.himart-prod-v16 #data .number-panel strong{
    font-size:clamp(42px,13vw,54px)!important;
  }
  html body.himart-wide-test-page.himart-prod-v16 #data .hbar{
    grid-template-columns:minmax(88px,34%) minmax(0,1fr) 38px!important;
    gap:8px!important;
  }
  html body.himart-wide-test-page.himart-prod-v16 #data .wide-home-bar-label,
  html body.himart-wide-test-page.himart-prod-v16 #data .wide-home-bar-value{
    font-size:11px!important;
  }
  html body.himart-wide-test-page.himart-prod-v16 #data .landing-chart>h4{
    margin-bottom:18px!important;
    font-size:18px!important;
    line-height:1.35!important;
  }
  html body.himart-wide-test-page.himart-prod-v16 #data .hm-source{
    margin-top:16px!important;
    padding-top:0!important;
    font-size:9px!important;
    line-height:1.5!important;
    overflow-wrap:anywhere!important;
  }
  html body.himart-wide-test-page.himart-prod-v16 #data .data-bridge{
    padding:58px 0 0!important;
  }
  html body.himart-wide-test-page.himart-prod-v16 #data .data-bridge-title{
    max-width:100%!important;
    font-size:var(--hm-mobile-subsection)!important;
    line-height:1.28!important;
  }
  html body.himart-wide-test-page.himart-prod-v16 #data .data-bridge-grid{
    grid-template-columns:1fr!important;
    gap:0!important;
    margin-top:34px!important;
  }
  html body.himart-wide-test-page.himart-prod-v16 #data .data-bridge-grid>article{
    min-height:0!important;
    padding:24px 0 28px!important;
  }
  html body.himart-wide-test-page.himart-prod-v16 #data .data-bridge-grid>article>h4{
    font-size:22px!important;
    line-height:1.32!important;
  }
  html body.himart-wide-test-page.himart-prod-v16 #data .data-bridge-grid>article>p{
    margin-top:12px!important;
    font-size:14px!important;
    line-height:1.55!important;
  }

  /* 03 / Journey */
  html body.himart-wide-test-page.himart-prod-v16 #journey .hm-section-title{
    font-size:var(--hm-mobile-section)!important;
  }
  html body.himart-wide-test-page.himart-prod-v16 #journey .flow-area{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow-x:hidden!important;
    overflow-x:clip!important;
  }
  html body.himart-wide-test-page.himart-prod-v16 #journey .flow-groups{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    gap:54px!important;
  }
  html body.himart-wide-test-page.himart-prod-v16 #journey .flow-group,
  html body.himart-wide-test-page.himart-prod-v16 #journey .flow-row,
  html body.himart-wide-test-page.himart-prod-v16 #journey .role-grid,
  html body.himart-wide-test-page.himart-prod-v16 #direction .prototype-case-list,
  html body.himart-wide-test-page.himart-prod-v16 #direction .prototype-case,
  html body.himart-wide-test-page.himart-prod-v16 #direction .prototype-case-visual{
    max-width:100%!important;
    min-width:0!important;
  }
  html body.himart-wide-test-page.himart-prod-v16 #journey .flow-label{
    max-width:100%!important;
    font-size:12px!important;
    line-height:1.4!important;
    white-space:normal!important;
  }
  html body.himart-wide-test-page.himart-prod-v16 #journey .flow-node .hm-card-no{
    font-size:9px!important;
  }
  html body.himart-wide-test-page.himart-prod-v16 #journey .flow-node h4{
    font-size:16px!important;
    line-height:1.24!important;
  }
  html body.himart-wide-test-page.himart-prod-v16 #journey .flow-node p{
    font-size:11px!important;
    line-height:1.42!important;
  }
  html body.himart-wide-test-page.himart-prod-v16 #journey .flow-conclusion,
  html body.himart-wide-test-page.himart-prod-v16 #journey .production-tobe-conclusion{
    max-width:100%!important;
    margin-top:42px!important;
    padding-top:0!important;
    font-size:14px!important;
    line-height:1.6!important;
  }
  html body.himart-wide-test-page.himart-prod-v16 #journey .role-grid{
    grid-template-columns:1fr!important;
    gap:12px!important;
  }
  html body.himart-wide-test-page.himart-prod-v16 #journey .role-card{
    min-height:280px!important;
    padding:24px!important;
  }
  html body.himart-wide-test-page.himart-prod-v16 #journey .hm-role-name{
    font-size:14px!important;
  }
  html body.himart-wide-test-page.himart-prod-v16 #journey .role-card h4{
    margin:30px 0 14px!important;
    font-size:23px!important;
    line-height:1.28!important;
  }
  html body.himart-wide-test-page.himart-prod-v16 #journey .role-card p{
    font-size:14px!important;
    line-height:1.58!important;
  }
  html body.himart-wide-test-page.himart-prod-v16 #journey .role-card strong{
    padding-top:18px!important;
    font-size:11px!important;
  }

  /* 04 / Prototype */
  html body.himart-wide-test-page.himart-prod-v16 #direction .prototype-case-list{
    grid-template-columns:1fr!important;
    gap:76px!important;
    margin-top:54px!important;
  }
  html body.himart-wide-test-page.himart-prod-v16 #direction .prototype-case{
    grid-template-columns:1fr!important;
    gap:28px!important;
    width:100%!important;
  }
  html body.himart-wide-test-page.himart-prod-v16 #direction .prototype-case-visual{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:8px!important;
    width:100%!important;
    height:auto!important;
    overflow:hidden!important;
  }
  html body.himart-wide-test-page.himart-prod-v16 #direction .prototype-case-visual .galaxy-ultra-mockup{
    width:100%!important;
    max-width:none!important;
    height:auto!important;
    aspect-ratio:9/19.5!important;
    border-radius:18px!important;
    padding:4px!important;
  }
  html body.himart-wide-test-page.himart-prod-v16 #direction .prototype-case-visual .galaxy-ultra-screen{
    border-radius:15px!important;
  }
  html body.himart-wide-test-page.himart-prod-v16 #direction .prototype-case-copy{
    height:auto!important;
    min-height:0!important;
    padding:0!important;
  }
  html body.himart-wide-test-page.himart-prod-v16 #direction .prototype-case-copy h3{
    margin-top:14px!important;
    font-size:var(--hm-mobile-group)!important;
    line-height:1.28!important;
  }
  html body.himart-wide-test-page.himart-prod-v16 #direction .prototype-case-copy p{
    margin-top:13px!important;
    font-size:14px!important;
    line-height:1.58!important;
  }
  html body.himart-wide-test-page.himart-prod-v16 #direction .prototype-case-copy strong{
    margin-top:22px!important;
    padding-top:16px!important;
    font-size:11px!important;
    line-height:1.5!important;
  }

  html body.himart-wide-test-page.himart-prod-v16 .hm-progress{
    display:none!important;
  }
}

@media (max-width:420px){
  html body.himart-wide-test-page.himart-prod-v16{
    --hm-mobile-display:clamp(30px,8.6vw,35px);
    --hm-mobile-section:clamp(29px,8vw,33px);
    --hm-mobile-subsection:clamp(23px,6.5vw,26px);
  }
  html body.himart-wide-test-page.himart-prod-v16 .hm-wrap{
    width:calc(100% - 32px)!important;
  }
  html body.himart-wide-test-page.himart-prod-v16 .hm-hero{
    padding-top:88px!important;
  }
  html body.himart-wide-test-page.himart-prod-v16 #brand .ring-card{
    width:min(82vw,320px)!important;
  }
  html body.himart-wide-test-page.himart-prod-v16 #data .wide-segment span{
    font-size:9px!important;
  }
}

/* --- himart-production-mobile-v17.css --- */
/* Himart production mobile refinement v17 — 2026-08-27
   Mobile-only geometry normalization. Desktop remains untouched. */

@media(max-width:780px){
  /* ---------- MOBILE FRAME ---------- */
  html body.himart-wide-test-page.himart-prod-v16{
    overflow-x:hidden!important;
  }
  html body.himart-wide-test-page.himart-prod-v16 .hm-wrap{
    width:100%!important;
    max-width:100%!important;
    padding-left:24px!important;
    padding-right:24px!important;
    box-sizing:border-box!important;
  }

  /* Give line + title combinations enough air on narrow screens. */
  html body.himart-wide-test-page.himart-prod-v16 .hm-subsection,
  html body.himart-wide-test-page.himart-prod-v16 #data .data-card,
  html body.himart-wide-test-page.himart-prod-v16 #data .data-bridge,
  html body.himart-wide-test-page.himart-prod-v16 #journey .journey-signal-subsection,
  html body.himart-wide-test-page.himart-prod-v16 #journey .journey-redesign-subsection{
    box-sizing:border-box!important;
  }
  html body.himart-wide-test-page.himart-prod-v16 .hm-subhead{
    padding-top:36px!important;
  }
  html body.himart-wide-test-page.himart-prod-v16 .hm-subhead .hm-subtitle + .hm-subcopy,
  html body.himart-wide-test-page.himart-prod-v16 .hm-subhead .forced-redesign-title + .hm-subcopy,
  html body.himart-wide-test-page.himart-prod-v16 #data .data-card-head .desc{
    margin-top:20px!important;
  }
  html body.himart-wide-test-page.himart-prod-v16 .hm-source{
    margin-top:20px!important;
    padding-top:18px!important;
  }

  /* ---------- 01 / CIRCULAR EVIDENCE ---------- */
  /* One proportional circle per row. The wrap supplies 24px side gutters. */
  html body.himart-wide-test-page.himart-prod-v16 #brand .ring-row{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:32px!important;
    width:100%!important;
    justify-items:stretch!important;
  }
  html body.himart-wide-test-page.himart-prod-v16 #brand .ring-card{
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    height:auto!important;
    aspect-ratio:1/1!important;
    justify-self:stretch!important;
    box-sizing:border-box!important;
  }
  html body.himart-wide-test-page.himart-prod-v16 #brand .ring-card .inner{
    width:72%!important;
    max-width:none!important;
    margin:auto!important;
  }

  /* Summary / feedback geometry becomes true full-width mobile blocks. */
  html body.himart-wide-test-page.himart-prod-v16 #brand .sentiment-graph,
  html body.himart-wide-test-page.himart-prod-v16 #brand .conclusion-grid{
    display:grid!important;
    grid-template-columns:1fr!important;
    width:100%!important;
    gap:0!important;
  }
  html body.himart-wide-test-page.himart-prod-v16 #brand .sentiment-block,
  html body.himart-wide-test-page.himart-prod-v16 #brand .conclusion-card{
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    min-height:0!important;
    height:auto!important;
    box-sizing:border-box!important;
  }
  html body.himart-wide-test-page.himart-prod-v16 #brand .sentiment-block + .sentiment-block,
  html body.himart-wide-test-page.himart-prod-v16 #brand .conclusion-card + .conclusion-card{
    border-top:1px solid rgba(255,255,255,.10)!important;
  }

  /* Principle cards fill the available mobile width. */
  html body.himart-wide-test-page.himart-prod-v16 #brand .direction-list{
    grid-template-columns:1fr!important;
    width:100%!important;
  }
  html body.himart-wide-test-page.himart-prod-v16 #brand .direction-card{
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    box-sizing:border-box!important;
    padding:32px 0!important;
  }
  html body.himart-wide-test-page.himart-prod-v16 #brand .direction-card::after{
    display:none!important;
  }
  html body.himart-wide-test-page.himart-prod-v16 #brand .direction-card + .direction-card{
    border-top:1px solid rgba(255,255,255,.05)!important;
  }

  /* ---------- 02 / DATA SHAPES ---------- */
  html body.himart-wide-test-page.himart-prod-v16 #data .data-viz,
  html body.himart-wide-test-page.himart-prod-v16 #data .chart-wrap,
  html body.himart-wide-test-page.himart-prod-v16 #data .landing-chart,
  html body.himart-wide-test-page.himart-prod-v16 #data .wide-segmented-chart,
  html body.himart-wide-test-page.himart-prod-v16 #data .wide-segmented-bar{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    box-sizing:border-box!important;
  }
  html body.himart-wide-test-page.himart-prod-v16 #data .data-bridge-grid{
    grid-template-columns:1fr!important;
    width:100%!important;
  }
  html body.himart-wide-test-page.himart-prod-v16 #data .data-bridge-grid article{
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    height:auto!important;
    min-height:240px!important;
    box-sizing:border-box!important;
  }
  html body.himart-wide-test-page.himart-prod-v16 #data .data-bridge-grid article::after{
    display:none!important;
  }

  /* ---------- 03 / JOURNEY GEOMETRY ---------- */
  html body.himart-wide-test-page.himart-prod-v16 #journey{
    --v13-node-size:auto!important;
    --v13-arrow-size:auto!important;
  }
  html body.himart-wide-test-page.himart-prod-v16 #journey .journey-signal-subsection .flow-row,
  html body.himart-wide-test-page.himart-prod-v16 #journey .journey-redesign-subsection .flow-row,
  html body.himart-wide-test-page.himart-prod-v16 #journey .wide-flow-cluster.v12-journey-tablet .wide-flow-cluster-inner{
    display:flex!important;
    flex-direction:column!important;
    flex-wrap:nowrap!important;
    align-items:stretch!important;
    justify-content:flex-start!important;
    gap:32px!important;
    width:100%!important;
    min-width:0!important;
  }

  /* Tablet wrappers scale to the viewport instead of preserving desktop node widths. */
  html body.himart-wide-test-page.himart-prod-v16 #journey .wide-flow-cluster.v12-journey-tablet{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin:0!important;
    padding:42px 18px 24px!important;
    border-radius:42px!important;
    box-sizing:border-box!important;
  }
  html body.himart-wide-test-page.himart-prod-v16 #journey .wide-flow-cluster.v12-journey-tablet .wide-flow-cluster-label{
    max-width:calc(100% - 40px)!important;
    padding:0 12px!important;
    line-height:1.45!important;
  }

  /* Every circular journey node occupies the full safe inner width and stays perfectly proportional. */
  html body.himart-wide-test-page.himart-prod-v16 #journey .journey-signal-subsection .flow-node,
  html body.himart-wide-test-page.himart-prod-v16 #journey .journey-redesign-subsection .flow-node,
  html body.himart-wide-test-page.himart-prod-v16 #journey .wide-flow-cluster.v12-journey-tablet .flow-node{
    position:relative!important;
    flex:0 0 auto!important;
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    aspect-ratio:1/1!important;
    margin:0!important;
    padding:clamp(30px,9vw,44px)!important;
    box-sizing:border-box!important;
  }

  /* DOM arrows are hidden on mobile. One controlled downward arrow is generated between nodes instead. */
  html body.himart-wide-test-page.himart-prod-v16 #journey .flow-arrow{
    display:none!important;
  }
  html body.himart-wide-test-page.himart-prod-v16 #journey .flow-node::after{
    display:none!important;
    content:none!important;
  }
  html body.himart-wide-test-page.himart-prod-v16 #journey .flow-node:not(:last-of-type)::after{
    display:block!important;
    content:'›'!important;
    position:absolute!important;
    left:50%!important;
    right:auto!important;
    bottom:-28px!important;
    width:auto!important;
    height:auto!important;
    border:0!important;
    background:transparent!important;
    color:rgba(255,255,255,.44)!important;
    font-family:var(--hm-en)!important;
    font-size:28px!important;
    font-weight:300!important;
    line-height:1!important;
    transform:translateX(-50%) rotate(90deg)!important;
    transform-origin:center!important;
    z-index:6!important;
  }
  /* A single connector is also shown between a tablet group and the following standalone node/group. */
  html body.himart-wide-test-page.himart-prod-v16 #journey .wide-flow-cluster.v12-journey-tablet:not(:last-child)::after{
    content:'›'!important;
    display:block!important;
    position:absolute!important;
    left:50%!important;
    bottom:-28px!important;
    color:rgba(255,255,255,.44)!important;
    font-family:var(--hm-en)!important;
    font-size:28px!important;
    font-weight:300!important;
    line-height:1!important;
    transform:translateX(-50%) rotate(90deg)!important;
    z-index:6!important;
  }

  /* Role cards become a stable one-column mobile system. */
  html body.himart-wide-test-page.himart-prod-v16 #journey .role-grid{
    grid-template-columns:1fr!important;
    width:100%!important;
  }
  html body.himart-wide-test-page.himart-prod-v16 #journey .role-card{
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    min-height:0!important;
    height:auto!important;
    padding:32px 0!important;
    box-sizing:border-box!important;
  }
  html body.himart-wide-test-page.himart-prod-v16 #journey .role-card::after{
    display:none!important;
  }
  html body.himart-wide-test-page.himart-prod-v16 #journey .role-card + .role-card{
    border-top:1px solid rgba(255,255,255,.05)!important;
  }

  /* ---------- 04 / PROTOTYPE ---------- */
  /* Desktop keeps three screens per row; mobile gives each visual enough width to be legible. */
  html body.himart-wide-test-page.himart-prod-v16 #direction .prototype-case,
  html body.himart-wide-test-page.himart-prod-v16 #direction .production-prototype-row{
    grid-template-columns:1fr!important;
    width:100%!important;
    gap:32px!important;
  }
  html body.himart-wide-test-page.himart-prod-v16 #direction .prototype-case-visual,
  html body.himart-wide-test-page.himart-prod-v16 #direction .production-prototype-phones,
  html body.himart-wide-test-page.himart-prod-v16 #direction .production-prototype-copy{
    grid-template-columns:1fr!important;
    width:100%!important;
    max-width:100%!important;
    gap:20px!important;
  }
  html body.himart-wide-test-page.himart-prod-v16 #direction .prototype-case-visual .galaxy-ultra-mockup,
  html body.himart-wide-test-page.himart-prod-v16 #direction .production-prototype-phones .phone-card{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin:0!important;
  }

  /* Avoid narrow, squeezed labels alongside rules in the prototype area. */
  html body.himart-wide-test-page.himart-prod-v16 #direction .prototype-case-copy,
  html body.himart-wide-test-page.himart-prod-v16 #direction .production-prototype-copy{
    padding-top:24px!important;
    border-top:1px solid rgba(255,255,255,.10)!important;
  }
}

/* --- himart-production-refine-v18.css --- */
/* Himart production refinement v18 — 2026-08-27
   Source-grounded role definitions, mobile word wrapping, 2-screen prototype rows,
   and flash-free transform loading. Loaded last on production himart.html. */

/* Keep transformed content hidden until every production rewrite has finished.
   This prevents archived English labels / intermediate markup from flashing on first load. */
html body.himart-wide-test-page.himart-v18-loading #live-main{
  opacity:0!important;
  visibility:hidden!important;
}
html body.himart-wide-test-page.himart-v18-ready #live-main{
  opacity:1!important;
  visibility:visible!important;
}

/* ---------- SHARED SUBTITLE SPACING ---------- */
/* All subsection title-to-description spacing uses 8px. */
html body.himart-wide-test-page .hm-subhead .hm-subcopy{
  margin-top:8px!important;
}

/* ---------- V / DATA SYNTHESIS COPY ---------- */
html body.himart-wide-test-page.himart-prod-v18 #data .data-bridge-grid article h4{
  word-break:keep-all!important;
  overflow-wrap:break-word!important;
}

/* ---------- 03 / ROLE DEFINITION ---------- */
html body.himart-wide-test-page.himart-prod-v18 #journey .role-card{
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:flex-start!important;
  text-align:left!important;
}
html body.himart-wide-test-page.himart-prod-v18 #journey .role-card .hm-role-name{
  display:block!important;
  width:100%!important;
  margin:0!important;
  color:#fff!important;
  font-family:Pretendard,-apple-system,BlinkMacSystemFont,"Noto Sans KR","Apple SD Gothic Neo",Arial,sans-serif!important;
  font-size:28px!important;
  font-weight:300!important;
  line-height:1.28!important;
  letter-spacing:-.035em!important;
  white-space:normal!important;
  word-break:keep-all!important;
  overflow-wrap:break-word!important;
}
html body.himart-wide-test-page.himart-prod-v18 #journey .role-card p{
  display:block!important;
  width:100%!important;
  margin:auto 0 0!important;
  padding-top:30px!important;
  color:rgba(255,255,255,.50)!important;
  font-family:var(--hm-ko)!important;
  font-size:16px!important;
  font-weight:300!important;
  line-height:1.6!important;
  text-align:left!important;
  word-break:keep-all!important;
  overflow-wrap:break-word!important;
}

/* ---------- 04 / PROTOTYPE ---------- */
/* Four production cases remain four rows; each row now exposes two screens and a wider copy column. */
html body.himart-wide-test-page.himart-prod-v18 #direction .prototype-case{
  grid-template-columns:minmax(0,1.55fr) minmax(360px,1fr)!important;
  gap:56px!important;
}
html body.himart-wide-test-page.himart-prod-v18 #direction .prototype-case-visual{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:20px!important;
}
html body.himart-wide-test-page.himart-prod-v18 #direction .prototype-case-copy{
  min-width:0!important;
  width:100%!important;
  max-width:none!important;
}

/* Legacy-gallery fallback: two screens + a wider text panel per row. */
html body.himart-wide-test-page.himart-prod-v18 #direction .production-v18-row{
  display:grid!important;
  grid-template-columns:minmax(0,1.55fr) minmax(320px,1fr)!important;
  gap:48px!important;
  align-items:stretch!important;
  width:100%!important;
  padding-top:32px!important;
  border-top:1px solid rgba(255,255,255,.14)!important;
}
html body.himart-wide-test-page.himart-prod-v18 #direction .production-v18-phones{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:18px!important;
  min-width:0!important;
}
html body.himart-wide-test-page.himart-prod-v18 #direction .production-v18-copy{
  display:flex!important;
  flex-direction:column!important;
  justify-content:flex-end!important;
  gap:20px!important;
  min-width:0!important;
}
html body.himart-wide-test-page.himart-prod-v18 #direction .production-v18-copy .phone-meta{
  width:100%!important;
  margin:0!important;
}

/* ---------- MOBILE ---------- */
@media(max-width:780px){
  /* Korean copy wraps only at word/spacing boundaries wherever possible. */
  html body.himart-wide-test-page.himart-prod-v18 #live-main :is(h1,h2,h3,h4,h5,h6,p,li,span,b,strong,em,a){
    word-break:keep-all!important;
    overflow-wrap:break-word!important;
    hyphens:none!important;
  }
  html body.himart-wide-test-page.himart-prod-v18 #journey .role-card .hm-role-name{
    font-size:28px!important;
    line-height:1.3!important;
  }
  html body.himart-wide-test-page.himart-prod-v18 #journey .role-card p{
    padding-top:28px!important;
  }
  /* Preserve the previously approved large mobile prototype treatment. */
  html body.himart-wide-test-page.himart-prod-v18 #direction .prototype-case,
  html body.himart-wide-test-page.himart-prod-v18 #direction .production-v18-row{
    grid-template-columns:1fr!important;
    gap:30px!important;
  }
  html body.himart-wide-test-page.himart-prod-v18 #direction .prototype-case-visual,
  html body.himart-wide-test-page.himart-prod-v18 #direction .production-v18-phones{
    grid-template-columns:1fr!important;
    gap:16px!important;
  }
}

/* --- himart-narrative-v2.css --- */
html body.himart-narrative-test:not(.narrative-v2-ready) #live-main{opacity:0!important;visibility:hidden!important}
html body.himart-narrative-test.narrative-v2-ready #live-main{opacity:1!important;visibility:visible!important}

/* ===== TYPOGRAPHY SYSTEM ===== */
html body.himart-wide-test-page .hm-section-title,
html body.himart-wide-test-page #brand .hm-section-title,
html body.himart-wide-test-page #data .hm-section-title,
html body.himart-wide-test-page #journey .hm-section-title,
html body.himart-wide-test-page #direction .hm-section-title{
  font-size:52px!important;
  line-height:1.12!important;
  font-family:var(--hm-ko)!important;
  font-weight:100!important;
  letter-spacing:-.045em!important;
}
html body.himart-wide-test-page :is(.narrative-title,.hm-subtitle,.forced-redesign-title){
  font-size:42px!important;
  line-height:1.18!important;
  font-family:var(--hm-ko)!important;
  font-weight:100!important;
}
html body.himart-wide-test-page :is(.problem-item h4,.signal-item h4,.principle-item h4,.design-rule h4,.synthesis-card b,.behavior-card h4,.proof-item h4,.data-card-head h3,.data-bridge-title){
  font-size:28px!important;
  line-height:1.32!important;
  font-family:var(--hm-ko)!important;
  font-weight:100!important;
}
html body.himart-wide-test-page :is(.hm-section-desc,.narrative-copy,.problem-item p,.proof-item p,.synthesis-card p,.signal-item p,.principle-item p,.design-rule p,.role-card p,.data-card .desc,.prototype-case-copy p,.behavior-note){
  font-size:16px!important;
  line-height:1.58!important;
}
html body.himart-wide-test-page :is(.hm-source,.narrative-subno,.problem-item small,.proof-label,.proof-compare,.signal-item small,.principle-item small,.design-rule small,.behavior-card>small,.hm-subno,.hm-card-no,.hm-section-no){
  font-size:12px!important;
  line-height:1.5!important;
}
html body.himart-wide-test-page .hm-section-desc{max-width:760px!important;margin-top:24px!important}
html body.himart-wide-test-page .narrative-copy{max-width:820px!important;margin-top:16px!important}

/* ===== MICRO LABEL COLOR SYSTEM ===== */
html body.himart-wide-test-page :is(.narrative-subno,.problem-item small,.proof-label,.signal-item small,.principle-item small,.design-rule small,.hm-subno,.hm-card-no,.hm-section-no,.behavior-card>small){
  color:var(--hm-blue)!important;
}

/* ===== 01.3 / TRANSITION TOUCHPOINT ===== */
html body.himart-wide-test-page .brand-synthesis.narrative-touchpoint-synthesis{
  display:block!important;
  margin-top:88px!important;
  padding:34px 0 0!important;
  border-top:1px solid rgba(255,255,255,.22)!important;
  background:transparent!important;
}
html body.himart-wide-test-page .brand-synthesis.narrative-touchpoint-synthesis .synthesis-subno{
  display:block!important;
  margin:0 0 18px!important;
  color:var(--hm-blue)!important;
}
html body.himart-wide-test-page .brand-synthesis.narrative-touchpoint-synthesis>h4{
  max-width:980px!important;
  margin:0!important;
  color:#fff!important;
  font-family:var(--hm-ko)!important;
  font-size:42px!important;
  line-height:1.18!important;
  font-weight:100!important;
  letter-spacing:-.045em!important;
  word-break:keep-all!important;
}
html body.himart-wide-test-page .brand-synthesis.narrative-touchpoint-synthesis>h4 strong{
  font-weight:100!important;
}
html body.himart-wide-test-page .brand-synthesis.narrative-touchpoint-synthesis .synthesis-list{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:0!important;
  margin-top:58px!important;
}
html body.himart-wide-test-page .brand-synthesis.narrative-touchpoint-synthesis .synthesis-card{
  position:relative!important;
  min-height:280px!important;
  padding:28px 24px 26px!important;
  border-top:2px solid var(--hm-blue)!important;
  display:flex!important;
  flex-direction:column!important;
  overflow:hidden!important;
  background:transparent!important;
}
html body.himart-wide-test-page .brand-synthesis.narrative-touchpoint-synthesis .synthesis-card::before{
  content:"";
  position:absolute;
  inset:0!important;
  background:linear-gradient(to bottom,rgba(0,166,237,.128) 0%,rgba(0,166,237,.078) 42%,rgba(0,166,237,.032) 66%,transparent 66%)!important;
  filter:none!important;
  pointer-events:none!important;
}
html body.himart-wide-test-page .brand-synthesis.narrative-touchpoint-synthesis .synthesis-card.negative{
  border-top-color:var(--hm-red)!important;
}
html body.himart-wide-test-page .brand-synthesis.narrative-touchpoint-synthesis .synthesis-card.negative::before{
  background:linear-gradient(to bottom,rgba(250,72,27,.128) 0%,rgba(250,72,27,.078) 42%,rgba(250,72,27,.032) 66%,transparent 66%)!important;
}
html body.himart-wide-test-page .brand-synthesis.narrative-touchpoint-synthesis .synthesis-card>*{position:relative!important;z-index:1!important}
html body.himart-wide-test-page .brand-synthesis.narrative-touchpoint-synthesis .synthesis-card b{
  display:block!important;
  margin:0!important;
  color:var(--hm-blue)!important;
  font-family:var(--hm-ko)!important;
  font-size:28px!important;
  line-height:1.32!important;
  font-weight:100!important;
  letter-spacing:-.035em!important;
  word-break:keep-all!important;
}
html body.himart-wide-test-page .brand-synthesis.narrative-touchpoint-synthesis .synthesis-card.negative b{
  color:var(--hm-red)!important;
}
html body.himart-wide-test-page .brand-synthesis.narrative-touchpoint-synthesis .synthesis-card p{
  margin:auto 0 0!important;
  padding-top:34px!important;
  color:rgba(255,255,255,.64)!important;
  word-break:keep-all!important;
}

/* ===== 02 / BEHAVIOR ===== */
html body.himart-wide-test-page #data .narrative-signals .behavior-grid,
html body.himart-wide-test-page #data .narrative-signals .signal-grid{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  grid-auto-flow:row!important;
  gap:26px 28px!important;
  margin-top:58px!important;
  width:100%!important;
}
html body.himart-wide-test-page #data .narrative-signals .behavior-card,
html body.himart-wide-test-page #data .narrative-signals .signal-item{
  width:auto!important;
  min-width:0!important;
  max-width:none!important;
  min-height:340px!important;
  padding:24px 24px 22px!important;
  border-top:1px solid rgba(255,255,255,.22)!important;
  display:flex!important;
  flex-direction:column!important;
  background:rgba(255,255,255,.015)!important;
  box-sizing:border-box!important;
}
html body.himart-wide-test-page .behavior-card>small{
  color:var(--hm-blue)!important;
  font-family:var(--hm-en)!important;
  font-size:11px!important;
  letter-spacing:.06em!important;
}
html body.himart-wide-test-page .behavior-card-top{display:flex!important;flex-direction:column!important;align-items:flex-start!important}
html body.himart-wide-test-page #data .narrative-signals .behavior-value,
html body.himart-wide-test-page #data .narrative-signals .behavior-value b,
html body.himart-wide-test-page #data .narrative-signals .signal-item b{
  margin-top:18px!important;
  color:var(--hm-blue)!important;
  font-family:var(--hm-en)!important;
  font-size:84px!important;
  font-weight:300!important;
  line-height:.88!important;
  letter-spacing:-.055em!important;
}
html body.himart-wide-test-page .behavior-value{
  display:flex!important;
  align-items:flex-end!important;
}
html body.himart-wide-test-page .behavior-value span,
html body.himart-wide-test-page #data .narrative-signals .signal-item b small{
  font-size:.38em!important;
  line-height:1!important;
  margin-left:2px!important;
}
html body.himart-wide-test-page .behavior-card h4{
  margin:10px 0 0!important;
  color:#fff!important;
  font-weight:100!important;
  line-height:1.3!important;
  letter-spacing:-.03em!important;
  word-break:keep-all!important;
}
html body.himart-wide-test-page .behavior-note{
  margin:auto 0 0 auto!important;
  max-width:72%!important;
  padding-top:26px!important;
  color:rgba(255,255,255,.62)!important;
  text-align:left!important;
  word-break:keep-all!important;
}
html body.himart-wide-test-page #data .narrative-signals .behavior-rule,
html body.himart-wide-test-page #data .narrative-signals .signal-rule{
  display:none!important;
}
html body.himart-wide-test-page .narrative-bridge p{font-size:28px!important;line-height:1.48!important}

/* ===== 03 / SIX PRINCIPLES ===== */
html body.himart-wide-test-page .principle-grid{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:34px 34px!important;
}
html body.himart-wide-test-page .principle-item{min-height:250px!important}
html body.himart-wide-test-page .principle-item h4{font-family:var(--hm-ko)!important;font-weight:100!important}

/* ===== 04 / PROTOTYPES ===== */
html body.himart-wide-test-page #direction .narrative-prototype-visible{
  visibility:visible!important;
  opacity:1!important;
}

/* ===== THIN WEIGHT / EMPHASIS RESET ===== */
html body.himart-wide-test-page :is(
  .hm-section-title,
  .narrative-title,
  .hm-subtitle,
  .forced-redesign-title,
  .problem-item h4,
  .proof-item h4,
  .signal-item h4,
  .behavior-card h4,
  .principle-item h4,
  .design-rule h4,
  .synthesis-card b,
  .brand-synthesis>h4,
  .data-card-head h3,
  .data-bridge-title
){
  font-family:var(--hm-ko)!important;
  font-weight:100!important;
}
html body.himart-wide-test-page :is(
  .hm-section-title strong,
  .narrative-title strong,
  .hm-subtitle strong,
  .forced-redesign-title strong,
  .problem-item h4 strong,
  .proof-item h4 strong,
  .signal-item h4 strong,
  .behavior-card h4 strong,
  .principle-item h4 strong,
  .design-rule h4 strong,
  .brand-synthesis>h4 strong
){font-weight:100!important}

/* ===== REMOVE METRIC LABELS / MATCH 84PX VALUE SIZE ===== */
html body.himart-wide-test-page .proof-item .proof-label,
html body.himart-wide-test-page .diagnosis-panel>small{
  display:none!important;
}
html body.himart-wide-test-page .proof-item strong,
html body.himart-wide-test-page .diagnosis-big,
html body.himart-wide-test-page .diagnosis-big b{
  font-size:84px!important;
  line-height:.88!important;
  font-weight:300!important;
}
html body.himart-wide-test-page .proof-item strong span,
html body.himart-wide-test-page .diagnosis-big span{
  font-weight:300!important;
}
html body.himart-wide-test-page .proof-item strong{margin-top:0!important}

@media(max-width:1000px){
  html body.himart-wide-test-page .principle-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  html body.himart-wide-test-page .brand-synthesis.narrative-touchpoint-synthesis .synthesis-list{grid-template-columns:1fr!important}
  html body.himart-wide-test-page #data .narrative-signals .behavior-grid,
  html body.himart-wide-test-page #data .narrative-signals .signal-grid{grid-template-columns:1fr!important}
  html body.himart-wide-test-page .behavior-note{max-width:100%!important}
}
@media(max-width:780px){
  html body.himart-wide-test-page .hm-section-title{font-size:44px!important}
  html body.himart-wide-test-page :is(.narrative-title,.hm-subtitle,.forced-redesign-title){font-size:36px!important}
  html body.himart-wide-test-page .principle-grid{grid-template-columns:1fr!important}
  html body.himart-wide-test-page .brand-synthesis.narrative-touchpoint-synthesis>h4{font-size:36px!important}
  html body.himart-wide-test-page .brand-synthesis.narrative-touchpoint-synthesis .synthesis-card{padding:26px 20px 24px!important}
  html body.himart-wide-test-page #data .narrative-signals .behavior-value,
  html body.himart-wide-test-page #data .narrative-signals .behavior-value b,
  html body.himart-wide-test-page #data .narrative-signals .signal-item b,
  html body.himart-wide-test-page .proof-item strong,
  html body.himart-wide-test-page .diagnosis-big,
  html body.himart-wide-test-page .diagnosis-big b{font-size:68px!important}
  html body.himart-wide-test-page .behavior-card{padding:22px 20px 20px!important}
}

/* --- himart-narrative-v2-final.css --- */
/* Narrative V2 final overrides · 2026-08-31 */
:root{--hm-body-60:rgba(255,255,255,.60)}
html body.himart-narrative-test:not(.narrative-v2-final-ready) #live-main{opacity:0!important;visibility:hidden!important}
html body.himart-narrative-test.narrative-v2-final-ready #live-main{opacity:1!important;visibility:visible!important}
html body.himart-wide-test-page #brand,html body.himart-wide-test-page #data,html body.himart-wide-test-page #journey,html body.himart-wide-test-page #direction{padding-top:100px!important}
html body.himart-wide-test-page #live-main p{color:var(--hm-body-60)!important}
html body.himart-wide-test-page .hm-section-title{font-family:var(--hm-ko)!important;font-size:52px!important;font-weight:100!important;line-height:1.12!important;letter-spacing:-.045em!important}
html body.himart-wide-test-page :is(.narrative-title,.hm-subtitle,.forced-redesign-title,.journey-block-title){font-family:var(--hm-ko)!important;font-size:42px!important;font-weight:100!important;line-height:1.18!important;letter-spacing:-.045em!important}
html body.himart-wide-test-page #live-main :is(#brand,#data,#journey,#direction)>.hm-wrap>.hm-section-head .hm-section-no{display:block!important;margin:0 0 16px!important;color:var(--hm-blue)!important;font-family:var(--hm-en)!important;font-size:16px!important;font-weight:300!important;line-height:1.2!important;letter-spacing:.02em!important}
html body.himart-wide-test-page #live-main :is(.narrative-subno,.synthesis-subno,.hm-subno,.hm-card-no,.problem-item small,.proof-label,.proof-compare){font-size:12px!important;line-height:1.5!important}
html body.himart-wide-test-page :is(.problem-item h4,.proof-item h4,.behavior-card h4,.synthesis-card b){font-family:var(--hm-ko)!important;font-weight:100!important}
html body.himart-wide-test-page :is(.hm-section-desc,.narrative-copy,.problem-item p,.proof-item p,.synthesis-card p,.behavior-note,.journey-block-copy){font-size:16px!important;line-height:1.58!important}
html body.himart-wide-test-page :is(.hm-section-title strong,.narrative-title strong,.problem-item h4 strong,.proof-item h4 strong,.behavior-card h4 strong,.brand-synthesis>h4 strong){font-weight:100!important}

html body.himart-wide-test-page .problem-grid{align-items:stretch!important}
html body.himart-wide-test-page .problem-item{display:grid!important;grid-template-rows:auto minmax(118px,auto) auto!important;align-content:start!important;min-height:330px!important}
html body.himart-wide-test-page .problem-item p{margin:40px 0 0!important;padding-top:0!important;align-self:start!important}
html body.himart-wide-test-page .proof-item .proof-label,html body.himart-wide-test-page .diagnosis-panel>small{display:none!important}
html body.himart-wide-test-page .proof-item strong,html body.himart-wide-test-page .diagnosis-big,html body.himart-wide-test-page .diagnosis-big b{font-size:84px!important;line-height:.88!important;font-weight:300!important}
html body.himart-wide-test-page .proof-item p{margin:40px 0 0!important;padding-top:0!important}

html body.himart-wide-test-page .brand-synthesis.narrative-touchpoint-synthesis{display:block!important;margin-top:110px!important;padding:34px 0 0!important;border-top:1px solid rgba(255,255,255,.22)!important;background:transparent!important}
html body.himart-wide-test-page .brand-synthesis.narrative-touchpoint-synthesis .synthesis-subno{display:block!important;margin:0 0 18px!important;color:var(--hm-blue)!important}
html body.himart-wide-test-page .brand-synthesis.narrative-touchpoint-synthesis>h4{margin:0!important;max-width:980px!important;color:#fff!important;font-family:var(--hm-ko)!important;font-size:42px!important;font-weight:100!important;line-height:1.18!important;letter-spacing:-.045em!important}
html body.himart-wide-test-page .synthesis-list{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:0!important;margin-top:58px!important}
html body.himart-wide-test-page .synthesis-card{position:relative!important;min-height:280px!important;padding:28px 24px 26px!important;border-top:2px solid var(--hm-blue)!important;display:flex!important;flex-direction:column!important;overflow:hidden!important;background:transparent!important}
html body.himart-wide-test-page .synthesis-card.negative{border-top-color:var(--hm-red)!important}
html body.himart-wide-test-page .synthesis-card::before{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,166,237,.113) 0%,rgba(0,166,237,.089) 18%,rgba(0,166,237,.065) 40%,rgba(0,166,237,.037) 66%,rgba(0,166,237,.014) 84%,rgba(0,166,237,0) 100%)!important;pointer-events:none}
html body.himart-wide-test-page .synthesis-card.negative::before{background:linear-gradient(to bottom,rgba(250,72,27,.113) 0%,rgba(250,72,27,.089) 18%,rgba(250,72,27,.065) 40%,rgba(250,72,27,.037) 66%,rgba(250,72,27,.014) 84%,rgba(250,72,27,0) 100%)!important}
html body.himart-wide-test-page .synthesis-card>*{position:relative;z-index:1}
html body.himart-wide-test-page .synthesis-card b{color:var(--hm-blue)!important;font-size:28px!important;line-height:1.32!important}
html body.himart-wide-test-page .synthesis-card.negative b{color:var(--hm-red)!important}
html body.himart-wide-test-page .synthesis-card p{margin:auto 0 0!important;padding-top:34px!important}

html body.himart-wide-test-page #data .narrative-signals .behavior-grid{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:28px!important;margin-top:58px!important;width:100%!important}
html body.himart-wide-test-page #data .behavior-card{min-height:390px!important;padding:24px 20px 22px!important;border-top:1px solid rgba(255,255,255,.22)!important;background:transparent!important;display:grid!important;grid-template-rows:auto minmax(104px,auto) auto!important;align-content:start!important;box-sizing:border-box!important}
html body.himart-wide-test-page #data .behavior-value{display:flex!important;align-items:flex-end!important;color:var(--hm-blue)!important;font-family:var(--hm-en)!important;font-size:84px!important;font-weight:300!important;line-height:.88!important;letter-spacing:-.055em!important}
html body.himart-wide-test-page #data .behavior-value b{font:inherit!important;font-weight:300!important}
html body.himart-wide-test-page #data .behavior-value span{font-size:.38em!important;line-height:1!important;margin-left:2px!important}
html body.himart-wide-test-page #data .behavior-card h4{margin:22px 0 0!important;min-height:104px!important;color:#fff!important;font-size:28px!important;line-height:1.3!important;letter-spacing:-.03em!important}
html body.himart-wide-test-page #data .behavior-note{margin:40px 0 0!important;padding:0!important;max-width:100%!important;align-self:start!important}
html body.himart-wide-test-page #data .behavior-rule,html body.himart-wide-test-page #data .signal-rule{display:none!important}
html body.himart-wide-test-page .narrative-bridge p{font-size:28px!important;line-height:1.48!important}

/* 03 / JOURNEY — top flow uses the same fixed 1:1 circle system as production himart.html */
html body.himart-wide-test-page #journey{--v13-node-size:clamp(210px,20vw,292px);--v13-arrow-size:24px}
html body.himart-wide-test-page #journey .journey-flow-block,html body.himart-wide-test-page #journey .journey-role-block{display:block!important;margin-top:110px!important;padding-top:34px!important;border-top:1px solid rgba(255,255,255,.18)!important;opacity:1!important;visibility:visible!important}
html body.himart-wide-test-page #journey .narrative-subno{display:block!important;margin:0 0 18px!important;color:var(--hm-blue)!important;font-family:var(--hm-en)!important}
html body.himart-wide-test-page #journey .journey-block-title{margin:0!important;max-width:1100px!important;color:#fff!important}
html body.himart-wide-test-page #journey .journey-block-copy{margin:20px 0 0!important;max-width:900px!important}
html body.himart-wide-test-page #journey .journey-stage-flow{margin-top:58px!important}
html body.himart-wide-test-page #journey .journey-flow-block .journey-flow-row{position:relative!important;display:flex!important;flex-wrap:nowrap!important;align-items:center!important;justify-content:space-between!important;gap:16px!important;width:100%!important}
html body.himart-wide-test-page #journey .journey-flow-block .journey-flow-row+.journey-flow-row{margin-top:52px!important}
html body.himart-wide-test-page #journey .journey-flow-block .flow-node{position:relative!important;flex:0 0 var(--v13-node-size)!important;width:var(--v13-node-size)!important;min-width:var(--v13-node-size)!important;max-width:var(--v13-node-size)!important;height:var(--v13-node-size)!important;min-height:var(--v13-node-size)!important;max-height:var(--v13-node-size)!important;aspect-ratio:1/1!important;padding:24px!important;border:1px solid rgba(255,255,255,.20)!important;border-radius:50%!important;background:#000000!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;text-align:center!important;box-sizing:border-box!important;z-index:1!important}
html body.himart-wide-test-page #journey .journey-flow-block .flow-node .hm-card-no{margin:0 0 16px!important;color:var(--hm-blue)!important;font-size:12px!important}
html body.himart-wide-test-page #journey .journey-flow-block .flow-node h4{margin:0!important;color:#fff!important;font-family:var(--hm-ko)!important;font-size:28px!important;font-weight:100!important;line-height:1.25!important}
html body.himart-wide-test-page #journey .journey-flow-block .flow-node p{margin:18px 0 0!important;max-width:82%!important;font-size:13px!important;line-height:1.45!important}
html body.himart-wide-test-page #journey .journey-flow-block .flow-arrow{position:relative!important;flex:0 0 var(--v13-arrow-size)!important;width:var(--v13-arrow-size)!important;height:48px!important;font-size:0!important;color:transparent!important}
html body.himart-wide-test-page #journey .journey-flow-block .flow-arrow::before{content:""!important;position:absolute!important;left:50%!important;top:50%!important;width:17px!important;height:17px!important;border-top:1px solid rgba(255,255,255,.56)!important;border-right:1px solid rgba(255,255,255,.56)!important;transform:translate(-62%,-50%) rotate(45deg)!important}
html body.himart-wide-test-page #journey .journey-flow-block .journey-row-group{position:absolute!important;top:-18px!important;height:calc(var(--v13-node-size) + 36px)!important;border:1px solid var(--hm-blue)!important;border-radius:999px!important;pointer-events:none!important;z-index:0!important}
html body.himart-wide-test-page #journey .journey-flow-block .row-top .journey-row-group{left:-18px!important;width:calc(var(--v13-node-size) + var(--v13-node-size) + var(--v13-arrow-size) + 68px)!important}
html body.himart-wide-test-page #journey .journey-flow-block .row-bottom .journey-row-group{left:calc(var(--v13-node-size) + var(--v13-arrow-size) + 14px)!important;width:calc(var(--v13-node-size) + var(--v13-node-size) + var(--v13-arrow-size) + 68px)!important}
html body.himart-wide-test-page #journey .journey-flow-block .group-label{position:absolute!important;top:0!important;left:50%!important;transform:translate(-50%,-50%)!important;padding:0 10px!important;background:#000000!important;color:var(--hm-blue)!important;font-family:var(--hm-ko)!important;font-size:10px!important;font-weight:400!important;line-height:1.2!important;white-space:nowrap!important;text-align:center!important}

html body.himart-wide-test-page #journey .journey-role-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:34px 32px!important;margin-top:64px!important}
html body.himart-wide-test-page #journey .journey-role-grid article{min-height:270px!important;border-top:1px solid rgba(255,255,255,.22)!important;align-content:start!important}
/* ROLE DEFINITION typography and inner layout are owned by portfolio-icons.css. */

/* expanded content is cloned from the production 1 / 2 journey sections without rewriting */
html body.himart-wide-test-page #journey details.hm-more.journey-more{margin-top:110px!important}
html body.himart-wide-test-page #journey .journey-more-inner{padding-top:14px!important}
html body.himart-wide-test-page #journey .journey-more-inner>.v2-production-copy{opacity:1!important;visibility:visible!important;transform:none!important}
html body.himart-wide-test-page #journey .journey-more-inner .wide-rise-target,html body.himart-wide-test-page #journey .journey-more-inner .hm-reveal{opacity:1!important;visibility:visible!important;transform:none!important}

@media(max-width:1180px){
  html body.himart-wide-test-page #data .behavior-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  html body.himart-wide-test-page #journey{--v13-node-size:190px!important}
  html body.himart-wide-test-page #journey .journey-role-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  html body.himart-wide-test-page #journey .journey-flow-block .journey-flow-row{gap:12px!important}
}
@media(max-width:860px){
  html body.himart-wide-test-page #journey .journey-flow-block .journey-row-group{display:none!important}
  html body.himart-wide-test-page #journey .journey-flow-block .journey-flow-row{display:grid!important;grid-template-columns:1fr!important;justify-items:center!important;gap:12px!important}
  html body.himart-wide-test-page #journey .journey-flow-block .flow-arrow{width:100%!important;height:40px!important}
  html body.himart-wide-test-page #journey .journey-flow-block .flow-arrow::before{transform:translate(-50%,-60%) rotate(135deg)!important}
}
@media(max-width:780px){
  html body.himart-wide-test-page .hm-section-title{font-size:44px!important}
  html body.himart-wide-test-page :is(.narrative-title,.hm-subtitle,.forced-redesign-title,.journey-block-title){font-size:36px!important}
  html body.himart-wide-test-page #data .behavior-grid,html body.himart-wide-test-page #journey .journey-role-grid{grid-template-columns:1fr!important}
  html body.himart-wide-test-page .synthesis-list{grid-template-columns:1fr!important}
  html body.himart-wide-test-page #data .behavior-value{font-size:68px!important}
  html body.himart-wide-test-page #journey{--v13-node-size:min(78vw,320px)!important}
}
/* --- himart-narrative-v2-flowfix.css --- */
/* Narrative V2 flow fix · 2026-08-31
   IMPORTANT: 03.1 reuses the current production journey grammar from
   himart-wide-refine-v12/v13/v14. Geometry is intentionally not redesigned here. */

html body.himart-wide-test-page #journey .journey-flow-block .journey-stage-flow{
  margin:58px 0 0!important;
  padding:0!important;
}
html body.himart-wide-test-page #journey .journey-flow-block .flow-groups{
  width:100%!important;
  margin:58px 0 0!important;
  padding:0!important;
  gap:0!important;
}
html body.himart-wide-test-page #journey .journey-flow-block .journey-stage-flow.flow-groups{
  margin-top:58px!important;
}
html body.himart-wide-test-page #journey .journey-flow-block .flow-group{
  margin:0!important;
  border-top:0!important;
  padding:0!important;
  box-shadow:none!important;
}
html body.himart-wide-test-page #journey .journey-flow-block .flow-group::before{
  display:none!important;
  content:none!important;
}
html body.himart-wide-test-page #journey .journey-flow-block .flow-group + .flow-group{
  margin-top:72px!important;
}

/* Production v13: exact desktop circle/arrow geometry. */
html body.himart-wide-test-page #journey{
  --v13-node-size:clamp(210px,20vw,292px);
  --v13-arrow-size:24px;
}
html body.himart-wide-test-page #journey .journey-flow-block.journey-redesign-subsection .flow-row{
  display:flex!important;
  flex-wrap:nowrap!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:16px!important;
  width:100%!important;
}
html body.himart-wide-test-page #journey .journey-flow-block.journey-redesign-subsection .flow-node,
html body.himart-wide-test-page #journey .journey-flow-block .wide-flow-cluster.v12-journey-tablet .flow-node{
  box-sizing:border-box!important;
  flex:0 0 var(--v13-node-size)!important;
  width:var(--v13-node-size)!important;
  min-width:var(--v13-node-size)!important;
  max-width:var(--v13-node-size)!important;
  height:var(--v13-node-size)!important;
  min-height:var(--v13-node-size)!important;
  max-height:var(--v13-node-size)!important;
  aspect-ratio:1/1!important;
  border:1px solid rgba(255,255,255,.20)!important;
  border-radius:50%!important;
  padding:28px 22px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  background:#000000!important;
  box-shadow:none!important;
}
html body.himart-wide-test-page #journey .journey-flow-block .flow-node .hm-card-no{
  color:var(--hm-blue)!important;
  font-size:12px!important;
}
html body.himart-wide-test-page #journey .journey-flow-block .flow-node h4{
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  color:#fff!important;
  text-align:center!important;
  margin:16px 0 0!important;
  font-family:var(--hm-ko)!important;
  font-size:28px!important;
  font-weight:100!important;
  line-height:1.25!important;
}
html body.himart-wide-test-page #journey .journey-flow-block .flow-node p{
  text-align:center!important;
  margin:14px 0 0!important;
  max-width:100%!important;
  color:rgba(255,255,255,.50)!important;
  font-size:14px!important;
  line-height:1.48!important;
}
html body.himart-wide-test-page #journey .journey-flow-block .flow-arrow,
html body.himart-wide-test-page #journey .journey-flow-block .wide-flow-cluster.v12-journey-tablet .flow-arrow{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex:0 0 var(--v13-arrow-size)!important;
  width:var(--v13-arrow-size)!important;
  color:rgba(255,255,255,.46)!important;
  font-size:30px!important;
  font-weight:100!important;
  line-height:1!important;
}
html body.himart-wide-test-page #journey .journey-flow-block .flow-arrow::before,
html body.himart-wide-test-page #journey .journey-flow-block .flow-arrow::after,
html body.himart-wide-test-page #journey .journey-flow-block .wide-flow-cluster.v12-journey-tablet .flow-arrow::before,
html body.himart-wide-test-page #journey .journey-flow-block .wide-flow-cluster.v12-journey-tablet .flow-arrow::after{
  display:none!important;
  content:none!important;
}

/* Production v12/v13 tablet. Only the wrapped node range/text differs from production. */
html body.himart-wide-test-page #journey .journey-flow-block .wide-flow-cluster.v12-journey-tablet{
  --v12-tablet-color:var(--hm-blue);
  position:relative!important;
  display:flex!important;
  align-items:center!important;
  flex:0 0 auto!important;
  width:auto!important;
  max-width:100%!important;
  padding:18px!important;
  border:1px solid var(--v12-tablet-color)!important;
  border-radius:999px!important;
  background:transparent!important;
  box-shadow:none!important;
}
html body.himart-wide-test-page #journey .journey-flow-block .wide-flow-cluster.v12-journey-tablet .wide-flow-cluster-inner{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:16px!important;
  min-width:0!important;
}
html body.himart-wide-test-page #journey .journey-flow-block .wide-flow-cluster.v12-journey-tablet .wide-flow-cluster-label{
  position:absolute!important;
  top:0!important;
  left:50%!important;
  right:auto!important;
  transform:translate(-50%,-50%)!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  height:20px!important;
  min-height:20px!important;
  max-width:calc(100% - 72px)!important;
  padding:0 12px!important;
  margin:0!important;
  background:#000000!important;
  color:var(--v12-tablet-color)!important;
  font-family:var(--hm-ko)!important;
  font-size:10px!important;
  font-weight:400!important;
  line-height:20px!important;
  white-space:nowrap!important;
  text-align:center!important;
}

@media(max-width:1180px){
  html body.himart-wide-test-page #journey{--v13-node-size:190px;--v13-arrow-size:24px}
  html body.himart-wide-test-page #journey .journey-flow-block.journey-redesign-subsection .flow-row{
    flex-wrap:wrap!important;
    justify-content:flex-start!important;
  }
}
@media(max-width:780px){
  html body.himart-wide-test-page #journey .journey-flow-block .wide-flow-cluster.v12-journey-tablet{
    padding:30px 16px 18px!important;
    border-radius:48px!important;
  }
  html body.himart-wide-test-page #journey .journey-flow-block .wide-flow-cluster.v12-journey-tablet .wide-flow-cluster-inner{
    flex-wrap:wrap!important;
    gap:14px!important;
  }
  html body.himart-wide-test-page #journey .journey-flow-block .wide-flow-cluster.v12-journey-tablet .wide-flow-cluster-label{
    max-width:78vw!important;
    height:auto!important;
    min-height:20px!important;
    white-space:normal!important;
    text-align:center!important;
  }
}

/* --- himart-narrative-v2-behavior-proof.css --- */
/* 02.1 / BEHAVIOR SIGNALS — mirror 01.2 / BRAND REALITY proof-card styling exactly */
html body.himart-wide-test-page #data .narrative-signals .behavior-grid{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:28px!important;
  margin-top:66px!important;
  width:100%!important;
  align-items:stretch!important;
}
html body.himart-wide-test-page #data .narrative-signals .behavior-card{
  min-height:255px!important;
  padding:24px 0 0!important;
  border-top:1px solid rgba(255,255,255,.22)!important;
  border-radius:0!important;
  background:transparent!important;
  display:flex!important;
  flex-direction:column!important;
  box-sizing:border-box!important;
}
html body.himart-wide-test-page #data .narrative-signals .behavior-value{
  display:block!important;
  margin-top:16px!important;
  color:var(--hm-blue)!important;
  font-family:var(--hm-en)!important;
  font-size:84px!important;
  font-weight:300!important;
  line-height:.88!important;
  letter-spacing:-.045em!important;
}
html body.himart-wide-test-page #data .narrative-signals .behavior-value b{
  display:inline!important;
  color:inherit!important;
  font:inherit!important;
  font-weight:300!important;
  line-height:inherit!important;
  letter-spacing:inherit!important;
}
html body.himart-wide-test-page #data .narrative-signals .behavior-value span{
  font-size:.46em!important;
  line-height:1!important;
  letter-spacing:-.02em!important;
  margin-left:0!important;
}
html body.himart-wide-test-page #data .narrative-signals .behavior-card h4{
  margin:20px 0 0!important;
  min-height:0!important;
  color:#fff!important;
  font-family:var(--hm-ko)!important;
  font-size:19px!important;
  font-weight:100!important;
  line-height:1.38!important;
  letter-spacing:0!important;
  word-break:keep-all!important;
}
html body.himart-wide-test-page #data .narrative-signals .behavior-note{
  margin:40px 0 0!important;
  padding:0!important;
  color:rgba(255,255,255,.60)!important;
  font-family:var(--hm-ko)!important;
  font-size:14px!important;
  font-weight:300!important;
  line-height:1.58!important;
  word-break:keep-all!important;
}
html body.himart-wide-test-page #data .narrative-signals .behavior-rule,
html body.himart-wide-test-page #data .narrative-signals .signal-rule{display:none!important}
@media(max-width:1000px){
  html body.himart-wide-test-page #data .narrative-signals .behavior-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:780px){
  html body.himart-wide-test-page #data .narrative-signals .behavior-grid{grid-template-columns:1fr!important}
}

/* --- himart-narrative-v2-refine-20260831.css --- */
/* Narrative V2 final refinement · 2026-08-31
   - 03.1/expanded journey circle geometry remains production-aligned
   - proof-card copy aligns on the same baseline
   - body/description copy is standardized to 50% white
   - neutral white lines are standardized to 10% opacity
*/

/* GLOBAL BACKGROUND: use true black across the case while preserving accent lines/graphics. */
html,
body.himart-wide-test-page,
html body.himart-wide-test-page #live-main,
html body.himart-wide-test-page #live-main > header,
html body.himart-wide-test-page #live-main > section,
html body.himart-wide-test-page #live-main > footer,
html body.himart-wide-test-page :is(#brand,#data,#journey,#direction),
html body.himart-wide-test-page :is(#brand,#data,#journey,#direction) > .hm-wrap,
html body.himart-wide-test-page #journey :is(.journey-flow-block,.journey-role-block,.journey-more-inner,.v2-production-copy,.flow-area),
html body.himart-wide-test-page #journey details.hm-more,
html body.himart-wide-test-page #journey details.hm-more > .hm-more-body{
  background:#000!important;
}
html body.himart-wide-test-page{
  --hm-bg:#000;
}

html body.himart-wide-test-page #live-main p,
html body.himart-wide-test-page #live-main .hm-section-desc,
html body.himart-wide-test-page #live-main .narrative-copy,
html body.himart-wide-test-page #live-main .hm-subcopy,
html body.himart-wide-test-page #live-main .journey-block-copy,
html body.himart-wide-test-page #live-main .journey-deep-copy,
html body.himart-wide-test-page #live-main .journey-deep-endnote{
  color:rgba(255,255,255,.50)!important;
}
html body.himart-wide-test-page #live-main p strong,
html body.himart-wide-test-page #live-main p b,
html body.himart-wide-test-page #live-main .hm-section-desc strong,
html body.himart-wide-test-page #live-main .hm-section-desc b,
html body.himart-wide-test-page #live-main .narrative-copy strong,
html body.himart-wide-test-page #live-main .narrative-copy b,
html body.himart-wide-test-page #live-main .hm-subcopy strong,
html body.himart-wide-test-page #live-main .hm-subcopy b,
html body.himart-wide-test-page #live-main .journey-block-copy strong,
html body.himart-wide-test-page #live-main .journey-block-copy b{
  color:inherit!important;
  font-weight:inherit!important;
}

html body.himart-wide-test-page #journey{
  --journey-circle:clamp(230px,19.2vw,300px);
  --journey-arrow:48px;
  --journey-outline-pad:14px;
}

/* 01.2 BRAND REALITY: keep every explanation on the same baseline */
html body.himart-wide-test-page #brand .narrative-reality .proof-grid{
  align-items:stretch!important;
}
html body.himart-wide-test-page #brand .narrative-reality .proof-item{
  min-height:255px!important;
  padding-top:24px!important;
  display:flex!important;
  flex-direction:column!important;
}
html body.himart-wide-test-page #brand .narrative-reality .proof-item h4{
  min-height:52.5px!important;
  margin:20px 0 0!important;
  display:block!important;
}
html body.himart-wide-test-page #brand .narrative-reality .proof-item p{
  margin:40px 0 0!important;
  padding-top:0!important;
  color:rgba(255,255,255,.50)!important;
}

/* 03.1 and expanded journey diagrams share one identical circle rule */
html body.himart-wide-test-page #journey :is(.journey-flow-block,.journey-more-wrap) .journey-diagram-row{
  position:relative!important;
  display:grid!important;
  grid-template-columns:var(--journey-circle) var(--journey-arrow) var(--journey-circle) var(--journey-arrow) var(--journey-circle) var(--journey-arrow) var(--journey-circle)!important;
  align-items:center!important;
  justify-content:space-between!important;
  width:100%!important;
  min-height:calc(var(--journey-circle) + 30px)!important;
  column-gap:0!important;
}
html body.himart-wide-test-page #journey :is(.journey-flow-block,.journey-more-wrap) .journey-diagram-row + .journey-diagram-row{
  margin-top:52px!important;
}
html body.himart-wide-test-page #journey :is(.journey-flow-block,.journey-more-wrap) .journey-diagram-node{
  position:relative!important;
  z-index:2!important;
  width:var(--journey-circle)!important;
  min-width:var(--journey-circle)!important;
  max-width:var(--journey-circle)!important;
  height:var(--journey-circle)!important;
  min-height:var(--journey-circle)!important;
  max-height:var(--journey-circle)!important;
  aspect-ratio:1 / 1!important;
  border:1px solid rgba(255,255,255,.20)!important;
  border-radius:50%!important;
  background:#000!important;
  box-sizing:border-box!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  padding:28px 34px!important;
  overflow:hidden!important;
}
html body.himart-wide-test-page #journey :is(.journey-flow-block,.journey-more-wrap) .journey-diagram-node small{
  display:block!important;
  margin:0!important;
  color:var(--hm-blue)!important;
  font-family:var(--hm-en)!important;
  font-size:12px!important;
  font-weight:400!important;
  line-height:1.5!important;
  letter-spacing:.02em!important;
}
html body.himart-wide-test-page #journey :is(.journey-flow-block,.journey-more-wrap) .journey-diagram-node h5{
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  margin:18px 0 0!important;
  color:#fff!important;
  font-family:var(--hm-ko)!important;
  font-size:20px!important;
  font-weight:300!important;
  line-height:1.35!important;
  letter-spacing:-.04em!important;
  word-break:keep-all!important;
}
html body.himart-wide-test-page #journey :is(.journey-flow-block,.journey-more-wrap) .journey-diagram-node p{
  display:block!important;
  margin:18px 0 0!important;
  max-width:84%!important;
  color:rgba(255,255,255,.50)!important;
  font-size:14px!important;
  line-height:1.58!important;
  word-break:keep-all!important;
}
html body.himart-wide-test-page #journey :is(.journey-flow-block,.journey-more-wrap) .journey-diagram-arrow{
  position:relative!important;
  width:var(--journey-arrow)!important;
  height:48px!important;
  font-size:0!important;
  color:transparent!important;
}
html body.himart-wide-test-page #journey :is(.journey-flow-block,.journey-more-wrap) .journey-diagram-arrow::before{
  content:""!important;
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  width:17px!important;
  height:17px!important;
  border-top:1px solid rgba(255,255,255,.36)!important;
  border-right:1px solid rgba(255,255,255,.36)!important;
  transform:translate(-62%,-50%) rotate(45deg)!important;
}

/* Blue/red tablet outlines use the same spacing grammar as production journey diagrams */
html body.himart-wide-test-page #journey .journey-flow-block .journey-diagram{
  margin-top:58px!important;
  display:flex!important;
  flex-direction:column!important;
  gap:0!important;
}
html body.himart-wide-test-page #journey .journey-flow-block .journey-diagram-group{
  position:absolute!important;
  z-index:1!important;
  top:-10px!important;
  height:calc(var(--journey-circle) + 20px)!important;
  border:1px solid var(--hm-blue)!important;
  border-radius:999px!important;
  pointer-events:none!important;
  color:var(--hm-blue)!important;
}
html body.himart-wide-test-page #journey .journey-flow-block .journey-diagram-group.first-two{
  left:calc(0px - var(--journey-outline-pad))!important;
  width:calc(var(--journey-circle) * 2 + var(--journey-arrow) + var(--journey-outline-pad) * 2)!important;
}
html body.himart-wide-test-page #journey .journey-flow-block .journey-diagram-group.middle-two{
  left:calc(var(--journey-circle) + var(--journey-arrow) - var(--journey-outline-pad))!important;
  width:calc(var(--journey-circle) * 2 + var(--journey-arrow) + var(--journey-outline-pad) * 2)!important;
}
html body.himart-wide-test-page #journey .journey-flow-block .journey-diagram-group-label{
  position:absolute!important;
  top:0!important;
  left:50%!important;
  transform:translate(-50%,-50%)!important;
  padding:0 10px!important;
  background:#000!important;
  color:var(--hm-blue)!important;
  font-family:var(--hm-ko)!important;
  font-size:10px!important;
  font-weight:400!important;
  line-height:1.3!important;
  white-space:nowrap!important;
  text-align:center!important;
}

/* 03.2 production role copy */
html body.himart-wide-test-page #journey .journey-role-grid{
  align-items:stretch!important;
}
/* Expanded production 1/2 flow circles: preserve the original h4 titles. */
html body.himart-wide-test-page #journey details.journey-more .v2-production-copy .flow-node{
  background:#000!important;
}
html body.himart-wide-test-page #journey details.journey-more .v2-production-copy .flow-node h4{
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  position:relative!important;
  width:auto!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  margin:16px 0 0!important;
  padding:0!important;
  overflow:visible!important;
  clip:auto!important;
  clip-path:none!important;
  transform:none!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  font-family:var(--hm-ko)!important;
  font-size:28px!important;
  font-weight:100!important;
  line-height:1.25!important;
  letter-spacing:-.04em!important;
  text-align:center!important;
  white-space:normal!important;
  word-break:keep-all!important;
}
html body.himart-wide-test-page #journey details.journey-more .v2-production-copy .flow-node p{
  margin-top:14px!important;
  color:rgba(255,255,255,.50)!important;
}
html body.himart-wide-test-page #journey details.journey-more .v2-production-copy .flow-label{
  background:#000!important;
}

/* Neutral #fff based dividers = 10%. Exclusions: circles, blue/red synthesis lines, and 04 prototype/mockup lines. */
html body.himart-wide-test-page :is(.narrative-block,.problem-item,.proof-item,.signal-item,.behavior-card,.narrative-bridge,.journey-flow-block,.journey-role-block,.journey-deep-block,.journey-role-grid article,details.hm-more){
  border-color:rgba(255,255,255,.10)!important;
}
html body.himart-wide-test-page details.hm-more{
  border-top-color:rgba(255,255,255,.10)!important;
  border-bottom-color:rgba(255,255,255,.10)!important;
}
html body.himart-wide-test-page .synthesis-card.positive{
  border-top-color:var(--hm-blue)!important;
}
html body.himart-wide-test-page .synthesis-card.negative{
  border-top-color:var(--hm-red,#FA481B)!important;
}
html body.himart-wide-test-page #direction :is(.prototype-case,.production-v18-row,.production-prototype-row,.phone-gallery,.production-device,.prototype-frame,.mockup-frame){
  border-color:revert-layer!important;
}

@media(max-width:1500px){
  html body.himart-wide-test-page #journey{--journey-circle:clamp(210px,18.5vw,280px);--journey-arrow:40px}
}
@media(max-width:1180px){
  html body.himart-wide-test-page #journey{--journey-circle:clamp(168px,19vw,210px);--journey-arrow:32px}
  html body.himart-wide-test-page #journey :is(.journey-flow-block,.journey-more-wrap) .journey-diagram-node h5{font-size:18px!important}
  html body.himart-wide-test-page #journey :is(.journey-flow-block,.journey-more-wrap) .journey-diagram-node p{font-size:12px!important}
  html body.himart-wide-test-page #journey details.journey-more .v2-production-copy .flow-node h4{font-size:22px!important}
}

/* --- himart-narrative-v2-title-bridge-fix.css --- */
/* Narrative V2 title + bridge fix · 2026-08-31
   - remove legacy pseudo-title overlay and return chapter titles to normal DOM text
   - chapter titles use 52px on desktop
   - highlighted bridge quotes use Pretendard Light / white 100%
*/

/* The old wide system creates an additional visual title with ::before.
   V2 uses the real H2 text instead so DevTools, selection, sizing and motion all target one element. */
html body.himart-wide-test-page #live-main .hm-section-title::before,
html body.himart-wide-test-page #live-main .hm-section-title::after,
html body.himart-wide-test-page #journey > .hm-wrap > .hm-section-head .hm-section-title::before,
html body.himart-wide-test-page #journey > .hm-wrap > .hm-section-head .hm-section-title::after{
  content:none!important;
  display:none!important;
  visibility:hidden!important;
  opacity:0!important;
}

html body.himart-wide-test-page #live-main :is(#brand,#data,#journey,#direction) > .hm-wrap > .hm-section-head .hm-section-title{
  display:block!important;
  position:static!important;
  width:auto!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  margin:0!important;
  padding:0!important;
  overflow:visible!important;
  clip:auto!important;
  clip-path:none!important;
  transform:none!important;
  visibility:visible!important;
  opacity:1!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  font-family:var(--hm-ko)!important;
  font-size:52px!important;
  font-weight:100!important;
  line-height:1.12!important;
  letter-spacing:-.045em!important;
  white-space:normal!important;
  word-break:keep-all!important;
}

/* Bridge base copy stays white 50%, but the element itself must not be opacity-reduced.
   Otherwise a child can never visually reach 100% white. */
html body.himart-wide-test-page #live-main #data .narrative-signals .narrative-bridge,
html body.himart-wide-test-page #live-main #data .narrative-signals .narrative-bridge p{
  opacity:1!important;
}
html body.himart-wide-test-page #live-main #data .narrative-signals .narrative-bridge p{
  color:rgba(255,255,255,.50)!important;
  -webkit-text-fill-color:rgba(255,255,255,.50)!important;
  font-family:Pretendard,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
  font-weight:100!important;
}

/* Requested highlighted phrases. Kept as spans instead of strong/b so global strong-reset rules cannot neutralize them. */
html body.himart-wide-test-page #live-main #data .narrative-signals .narrative-bridge p > .bridge-quote:not(.bridge-quote-excluded),
html body.himart-wide-test-page #live-main #data .narrative-signals .narrative-bridge .bridge-quote-1,
html body.himart-wide-test-page #live-main #data .narrative-signals .narrative-bridge .bridge-quote-2,
html body.himart-wide-test-page #live-main #data .narrative-signals .narrative-bridge .bridge-quote-4{
  display:inline!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  opacity:1!important;
  font-family:Pretendard,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
  font-weight:300!important;
  font-style:normal!important;
}

/* '화면을 새로 만든다' intentionally remains body-copy styling. */
html body.himart-wide-test-page #live-main #data .narrative-signals .narrative-bridge p > .bridge-quote.bridge-quote-excluded{
  display:inline!important;
  color:rgba(255,255,255,.50)!important;
  -webkit-text-fill-color:rgba(255,255,255,.50)!important;
  opacity:1!important;
  font-family:Pretendard,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
  font-weight:100!important;
  font-style:normal!important;
}

/* 03.1 tablet labels: keep existing geometry, only increase the label type from 10px to 12px. */
html body.himart-wide-test-page #live-main #journey .journey-flow-block .wide-flow-cluster.v12-journey-tablet .wide-flow-cluster-label,
html body.himart-wide-test-page #live-main #journey .journey-flow-block .wide-flow-cluster-label{
  font-size:12px!important;
}

/* 03.1 arrows: copy the production arrow grammar used by the current journey analysis.
   Hide the literal › character and draw one 17px CSS chevron only. */
html body.himart-wide-test-page #live-main #journey .journey-flow-block .flow-arrow,
html body.himart-wide-test-page #live-main #journey .journey-flow-block .wide-flow-cluster.v12-journey-tablet .flow-arrow{
  position:relative!important;
  display:block!important;
  flex:0 0 var(--v13-arrow-size,24px)!important;
  width:var(--v13-arrow-size,24px)!important;
  min-width:var(--v13-arrow-size,24px)!important;
  max-width:var(--v13-arrow-size,24px)!important;
  height:48px!important;
  font-size:0!important;
  line-height:0!important;
  color:transparent!important;
  background:none!important;
  overflow:visible!important;
}
html body.himart-wide-test-page #live-main #journey .journey-flow-block .flow-arrow::before,
html body.himart-wide-test-page #live-main #journey .journey-flow-block .wide-flow-cluster.v12-journey-tablet .flow-arrow::before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  width:17px!important;
  height:17px!important;
  border:0!important;
  border-top:1px solid rgba(255,255,255,.56)!important;
  border-right:1px solid rgba(255,255,255,.56)!important;
  transform:translate(-62%,-50%) rotate(45deg)!important;
  box-sizing:border-box!important;
}
html body.himart-wide-test-page #live-main #journey .journey-flow-block .flow-arrow::after,
html body.himart-wide-test-page #live-main #journey .journey-flow-block .wide-flow-cluster.v12-journey-tablet .flow-arrow::after{
  content:none!important;
  display:none!important;
}

@media(max-width:780px){
  html body.himart-wide-test-page #live-main :is(#brand,#data,#journey,#direction) > .hm-wrap > .hm-section-head .hm-section-title{
    font-size:44px!important;
  }
}

/* --- narrative test inline layer --- */

body.himart-narrative-loading #live-main{opacity:0!important;visibility:hidden!important}
body.himart-narrative-ready #live-main{opacity:1!important;visibility:visible!important}
.himart-wide-test-page .wide-rise-target{opacity:0;transform:translateY(28px);transition:opacity .62s ease,transform .82s cubic-bezier(.2,.8,.2,1);will-change:opacity,transform}
.himart-wide-test-page .wide-rise-target.is-wide-rise-in{opacity:1;transform:none}
html body.himart-wide-test-page .narrative-block{margin-top:120px;padding-top:34px;border-top:1px solid var(--hm-line)}
html body.himart-wide-test-page .narrative-block:first-of-type{margin-top:0}
html body.himart-wide-test-page .narrative-subno{display:block;margin:0 0 18px;color:var(--hm-blue);font-family:var(--hm-en);font-size:12px;font-weight:500;letter-spacing:.05em}
html body.himart-wide-test-page .narrative-title{margin:0;max-width:1040px;color:#fff;font-family:var(--hm-ko);font-size:clamp(34px,3vw,48px);font-weight:100;line-height:1.18;letter-spacing:-.045em;word-break:keep-all}
html body.himart-wide-test-page .narrative-copy{margin:20px 0 0;max-width:900px;color:rgba(255,255,255,.68);font-family:var(--hm-ko);font-size:17px;font-weight:300;line-height:1.62;word-break:keep-all}
html body.himart-wide-test-page .narrative-copy strong{color:#fff;font-weight:500}
html body.himart-wide-test-page .problem-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px;margin-top:64px}
html body.himart-wide-test-page .problem-item{min-height:240px;padding:26px 0 0;border-top:1px solid rgba(255,255,255,.22);display:flex;flex-direction:column}
html body.himart-wide-test-page .problem-item small{color:var(--hm-blue);font-family:var(--hm-en);font-size:11px;letter-spacing:.06em}
html body.himart-wide-test-page .problem-item h4{margin:18px 0 0;color:#fff;font-family:var(--hm-ko);font-size:29px;font-weight:300;line-height:1.28;letter-spacing:-.04em;word-break:keep-all}
html body.himart-wide-test-page .problem-item p{margin:auto 0 0;padding-top:34px;color:rgba(255,255,255,.56);font-size:16px;line-height:1.62;word-break:keep-all}
html body.himart-wide-test-page .proof-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;margin-top:66px}
html body.himart-wide-test-page .proof-item{min-height:255px;padding-top:24px;border-top:1px solid rgba(255,255,255,.22);display:flex;flex-direction:column}
html body.himart-wide-test-page .proof-item .proof-label{color:rgba(255,255,255,.44);font-family:var(--hm-en);font-size:10px;letter-spacing:.06em}
html body.himart-wide-test-page .proof-item strong{display:block;margin-top:16px;color:var(--hm-blue);font-family:var(--hm-en);font-size:clamp(44px,4.5vw,72px);font-weight:300;line-height:.98;letter-spacing:-.045em}
html body.himart-wide-test-page .proof-item strong span{font-size:.46em;letter-spacing:-.02em}
html body.himart-wide-test-page .proof-item h4{margin:20px 0 0;color:#fff;font-size:19px;font-weight:400;line-height:1.38;word-break:keep-all}
html body.himart-wide-test-page .proof-item p{margin:auto 0 0;padding-top:24px;color:rgba(255,255,255,.52);font-size:14px;line-height:1.58;word-break:keep-all}
html body.himart-wide-test-page .proof-item .proof-compare{display:block;margin-top:8px;color:rgba(255,255,255,.42);font-size:12px;line-height:1.5}
html body.himart-wide-test-page .brand-synthesis{margin-top:64px;padding:28px 0 0;border-top:1px solid rgba(255,255,255,.22);display:grid;grid-template-columns:minmax(280px,.75fr) minmax(0,1.25fr);gap:70px;align-items:start}
html body.himart-wide-test-page .brand-synthesis h4{margin:0;color:#fff;font-size:31px;font-weight:300;line-height:1.35;letter-spacing:-.04em;word-break:keep-all}
html body.himart-wide-test-page .brand-synthesis h4 strong{color:var(--hm-blue);font-weight:500}
html body.himart-wide-test-page .synthesis-list{display:grid;grid-template-columns:1fr 1fr;gap:30px}
html body.himart-wide-test-page .synthesis-col{padding-top:18px;border-top:1px solid rgba(255,255,255,.18)}
html body.himart-wide-test-page .synthesis-col b{display:block;color:#fff;font-size:16px;font-weight:500;margin-bottom:12px}
html body.himart-wide-test-page .synthesis-col p{margin:0;color:rgba(255,255,255,.58);font-size:15px;line-height:1.65;word-break:keep-all}
html body.himart-wide-test-page .signal-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;margin-top:62px}
html body.himart-wide-test-page .signal-item{min-height:255px;padding-top:24px;border-top:1px solid rgba(255,255,255,.22);display:flex;flex-direction:column}
html body.himart-wide-test-page .signal-item b{color:var(--hm-blue);font-family:var(--hm-en);font-size:clamp(42px,4vw,68px);font-weight:300;line-height:.98;letter-spacing:-.04em}
html body.himart-wide-test-page .signal-item b small{font-size:.42em;color:var(--hm-blue)}
html body.himart-wide-test-page .signal-item h4{margin:20px 0 0;color:#fff;font-size:20px;font-weight:400;line-height:1.38;word-break:keep-all}
html body.himart-wide-test-page .signal-item p{margin:auto 0 0;padding-top:22px;color:rgba(255,255,255,.52);font-size:14px;line-height:1.6;word-break:keep-all}
html body.himart-wide-test-page .signal-item .signal-rule{height:3px;margin-top:20px;background:rgba(255,255,255,.10);overflow:hidden}
html body.himart-wide-test-page .signal-item .signal-rule i{display:block;width:var(--w);height:100%;background:var(--hm-blue);transform:scaleX(0);transform-origin:left;transition:transform 1s cubic-bezier(.2,.8,.2,1)}
html body.himart-wide-test-page .hm-reveal.is-in .signal-item .signal-rule i{transform:scaleX(1)}
html body.himart-wide-test-page .narrative-bridge{margin-top:72px;padding:34px 0 0;border-top:1px solid rgba(255,255,255,.24)}
html body.himart-wide-test-page .narrative-bridge p{margin:0;max-width:1100px;color:#fff;font-size:clamp(26px,2.3vw,36px);font-weight:100;line-height:1.46;letter-spacing:-.04em;word-break:keep-all}
html body.himart-wide-test-page .narrative-bridge p strong{color:var(--hm-blue);font-weight:500}
html body.himart-wide-test-page .principle-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px;margin:58px 0 112px}
html body.himart-wide-test-page .principle-item{min-height:250px;padding-top:24px;border-top:1px solid rgba(255,255,255,.22);display:flex;flex-direction:column}
html body.himart-wide-test-page .principle-item small{color:var(--hm-blue);font-family:var(--hm-en);font-size:11px;letter-spacing:.06em}
html body.himart-wide-test-page .principle-item h4{margin:20px 0 0;color:#fff;font-size:31px;font-weight:300;line-height:1.3;letter-spacing:-.04em;word-break:keep-all}
html body.himart-wide-test-page .principle-item p{margin:auto 0 0;padding-top:34px;color:rgba(255,255,255,.56);font-size:16px;line-height:1.62;word-break:keep-all}
html body.himart-wide-test-page .design-rule{display:grid;grid-template-columns:1fr 1fr;gap:54px;margin:0 0 108px;padding-top:30px;border-top:1px solid rgba(255,255,255,.22)}
html body.himart-wide-test-page .design-rule article{min-height:230px;display:flex;flex-direction:column}
html body.himart-wide-test-page .design-rule small{color:var(--hm-blue);font-family:var(--hm-en);font-size:11px;letter-spacing:.06em}
html body.himart-wide-test-page .design-rule h4{margin:18px 0 0;color:#fff;font-size:32px;font-weight:300;line-height:1.3;letter-spacing:-.04em;word-break:keep-all}
html body.himart-wide-test-page .design-rule p{margin:auto 0 0;padding-top:30px;color:rgba(255,255,255,.56);font-size:16px;line-height:1.62;word-break:keep-all}
html body.himart-wide-test-page details.hm-more{margin-top:96px;border-top:1px solid rgba(255,255,255,.22);border-bottom:1px solid rgba(255,255,255,.12)}
html body.himart-wide-test-page details.hm-more>summary{list-style:none;display:flex;align-items:center;gap:18px;min-height:86px;padding:0;color:#fff;cursor:pointer;user-select:none;font-size:17px;font-weight:400;line-height:1.4}
html body.himart-wide-test-page details.hm-more>summary::-webkit-details-marker{display:none}
html body.himart-wide-test-page details.hm-more>summary::before{content:"+";width:32px;color:var(--hm-blue);font-family:var(--hm-en);font-size:28px;font-weight:300;line-height:1}
html body.himart-wide-test-page details.hm-more[open]>summary::before{content:"−"}
html body.himart-wide-test-page details.hm-more>summary span{margin-left:auto;color:rgba(255,255,255,.36);font-family:var(--hm-en);font-size:10px;letter-spacing:.07em}
html body.himart-wide-test-page .hm-more-body{padding:14px 0 86px}
html body.himart-wide-test-page details.hm-more[open] .hm-more-body{animation:hmMoreIn .45s ease both}
@keyframes hmMoreIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
html body.himart-wide-test-page .hm-more-body>.hm-subsection:first-child,html body.himart-wide-test-page .hm-more-body>.data-list:first-child,html body.himart-wide-test-page .hm-more-body>.flow-area:first-child{margin-top:18px!important}
@media(max-width:1000px){html body.himart-wide-test-page .proof-grid,html body.himart-wide-test-page .signal-grid{grid-template-columns:repeat(2,minmax(0,1fr))}html body.himart-wide-test-page .brand-synthesis{grid-template-columns:1fr;gap:42px}}
@media(max-width:780px){html body.himart-wide-test-page .narrative-block{margin-top:94px}html body.himart-wide-test-page .problem-grid,html body.himart-wide-test-page .proof-grid,html body.himart-wide-test-page .signal-grid,html body.himart-wide-test-page .principle-grid,html body.himart-wide-test-page .design-rule,html body.himart-wide-test-page .synthesis-list{grid-template-columns:1fr}html body.himart-wide-test-page details.hm-more{margin-top:72px}}
@media (prefers-reduced-motion:reduce){.himart-wide-test-page .wide-rise-target{opacity:1!important;transform:none!important;transition:none!important}html body.himart-wide-test-page .signal-item .signal-rule i{transform:none!important;transition:none!important}html body.himart-wide-test-page details.hm-more[open] .hm-more-body{animation:none!important}}

/* --- narrative V2 critical layer --- */
html,body,html body.himart-wide-test-page #live-main,html body.himart-wide-test-page #brand,html body.himart-wide-test-page #data,html body.himart-wide-test-page #journey,html body.himart-wide-test-page #direction{background:#000!important}html body.himart-wide-test-page #brand,html body.himart-wide-test-page #data,html body.himart-wide-test-page #journey,html body.himart-wide-test-page #direction{padding-top:100px!important}html body.himart-wide-test-page #live-main p,html body.himart-wide-test-page #live-main .hm-section-desc,html body.himart-wide-test-page #live-main .narrative-copy,html body.himart-wide-test-page #live-main .hm-subcopy,html body.himart-wide-test-page #live-main .journey-block-copy{color:rgba(255,255,255,.50)!important}html body.himart-wide-test-page #live-main p strong,html body.himart-wide-test-page #live-main p b,html body.himart-wide-test-page #live-main .hm-section-desc strong,html body.himart-wide-test-page #live-main .hm-section-desc b,html body.himart-wide-test-page #live-main .narrative-copy strong,html body.himart-wide-test-page #live-main .narrative-copy b{font-weight:inherit!important;color:inherit!important}html body.himart-wide-test-page #live-main #data .narrative-signals .narrative-bridge,html body.himart-wide-test-page #live-main #data .narrative-signals .narrative-bridge p{opacity:1!important}html body.himart-wide-test-page #live-main #data .narrative-signals .narrative-bridge p>.bridge-quote:not(.bridge-quote-excluded){color:#fff!important;-webkit-text-fill-color:#fff!important;opacity:1!important;font-family:Pretendard,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;font-weight:300!important}html body.himart-wide-test-page #live-main #data .narrative-signals .narrative-bridge p>.bridge-quote.bridge-quote-excluded{color:rgba(255,255,255,.50)!important;-webkit-text-fill-color:rgba(255,255,255,.50)!important;opacity:1!important;font-family:Pretendard,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;font-weight:100!important}html body.himart-wide-test-page :is(#brand,#data,#journey,#direction)>.hm-wrap>.hm-section-head .hm-section-no{font-size:16px!important;margin:0 0 16px!important}html body.himart-wide-test-page :is(.narrative-subno,.synthesis-subno,.hm-subno,.hm-card-no){font-size:12px!important}html body.himart-wide-test-page #data .behavior-card{background:transparent!important}html body.himart-wide-test-page .synthesis-card::before{background:linear-gradient(to bottom,rgba(0,166,237,.113) 0%,rgba(0,166,237,.089) 18%,rgba(0,166,237,.065) 40%,rgba(0,166,237,.037) 66%,rgba(0,166,237,.014) 84%,rgba(0,166,237,0) 100%)!important}html body.himart-wide-test-page .synthesis-card.negative::before{background:linear-gradient(to bottom,rgba(250,72,27,.113) 0%,rgba(250,72,27,.089) 18%,rgba(250,72,27,.065) 40%,rgba(250,72,27,.037) 66%,rgba(250,72,27,.014) 84%,rgba(250,72,27,0) 100%)!important}