html,body{min-height:100%}
body{background:#151a36}
.storyPage{
  position:relative;
  width:100%;
  min-height:calc(100vh - 118px);
  overflow:hidden;
  padding:42px 24px 72px;
  background:#151a36;
}
.storyBackground{
  position:absolute;
  inset:0;
  background-image:url('./assets/story-bg.png');
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
  transform:scale(1.015);
}
.storyOverlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg,rgba(21,28,64,.16),rgba(25,20,58,.26)),
    radial-gradient(circle at 50% 15%,rgba(255,255,255,.08),transparent 38%);
  pointer-events:none;
}
.storyContent{
  position:relative;
  z-index:2;
  width:min(1180px,calc(100% - 16px));
  margin:0 auto;
  display:grid;
  gap:16px;
}
.storyIntroCard,.storyPhilosophyCard,.storyFlowCard,.storyClosingCard{
  border:1px solid rgba(255,255,255,.72);
  background:rgba(255,255,255,.78);
  backdrop-filter:blur(18px) saturate(112%);
  -webkit-backdrop-filter:blur(18px) saturate(112%);
  box-shadow:0 18px 44px rgba(31,27,72,.18);
}
.storyIntroCard{
  padding:28px 30px 26px;
  border-radius:28px;
  text-align:center;
  color:#24385f;
}
.storyKicker{display:block;color:#775bd4;font-size:11px;font-weight:900;letter-spacing:.16em}
.storyIntroCard h1{margin:7px 0 8px;font-size:clamp(38px,4.6vw,62px);line-height:1.05;letter-spacing:-.055em}
.storyLead{margin:0;color:#31476f;font-size:20px;font-weight:850;letter-spacing:-.03em}
.storySub{margin:10px 0 0;color:#6e7c98;font-size:13px;line-height:1.6;font-weight:650}
.storySub strong{color:#6448c8}
.storyPhilosophyCard,.storyFlowCard,.storyClosingCard{padding:23px 26px;border-radius:25px}
.storySectionTitle{display:flex;align-items:center;gap:9px;color:#253a61;font-size:18px;font-weight:900}
.storySectionTitle>span{color:#a77ae6}
.storyPhilosophyGrid{display:grid;grid-template-columns:.8fr 1.2fr;gap:26px;align-items:center;margin-top:18px}
.storyPhilosophyGrid blockquote{
  margin:0;padding:6px 22px 6px 8px;border-right:1px solid rgba(107,90,164,.22);
  color:#25385e;font-family:"Noto Serif KR","Nanum Myeongjo","AppleMyungjo","Batang",serif;
  font-size:clamp(25px,3vw,38px);line-height:1.35;font-weight:700;letter-spacing:-.04em
}
.storyPhilosophyGrid blockquote em{font-style:normal;color:#a74286}
.storyPhilosophyText p{margin:0 0 9px;color:#66748e;font-size:13px;line-height:1.7;font-weight:650}
.storyPeopleFirst{display:block;margin-top:8px;color:#2b3e63;font-size:13px}
.storyFlowCard{padding-bottom:26px}
.storyFlow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:center;gap:12px;margin-top:20px}
.storyFlowNode{
  min-height:150px;padding:20px 16px;border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  border:1px solid rgba(255,255,255,.86);box-shadow:0 12px 28px rgba(66,54,116,.10)
}
.storyFlowNode.love{background:linear-gradient(145deg,rgba(255,231,242,.96),rgba(255,255,255,.86))}
.storyFlowNode.art{background:linear-gradient(145deg,rgba(235,228,255,.96),rgba(255,255,255,.86))}
.storyFlowNode.discovery{background:linear-gradient(145deg,rgba(227,242,255,.96),rgba(255,255,255,.86))}
.storyFlowIcon{font-size:30px;line-height:1;margin-bottom:8px}
.storyFlowNode.love .storyFlowIcon{color:#dc6397}
.storyFlowNode.art .storyFlowIcon{color:#7859d6}
.storyFlowNode.discovery .storyFlowIcon{color:#5188d4}
.storyFlowNode strong{color:#273c62;font-size:17px}
.storyFlowNode p{margin:6px 0 0;color:#7b879f;font-size:11px;font-weight:650}
.storyFlowArrow{color:#8f78dc;font-size:28px;font-weight:800}
.storyFlowArrow.second{color:#6f9bd9}
.storyFlowLoop{
  margin:17px auto 0;width:max-content;max-width:100%;padding:9px 16px;border-radius:999px;
  background:rgba(250,248,255,.82);color:#6b5aa8;font-size:12px;font-weight:850
}
.storyFlowLoop b{margin:0 6px;color:#b267a8}
.storyClosingCard{display:grid;grid-template-columns:1.15fr .85fr;gap:26px;align-items:center}
.storySectionEyebrow{display:block;margin-bottom:8px;color:#7b61cf;font-size:12px;font-weight:900}
.storyClosingCard p{margin:0;color:#66748e;font-size:13px;line-height:1.72;font-weight:650}
.storyClosingCard blockquote{
  margin:0;padding-left:24px;border-left:1px solid rgba(111,88,165,.22);
  color:#2d4065;font-family:"Noto Serif KR","Nanum Myeongjo","AppleMyungjo","Batang",serif;
  font-size:clamp(20px,2.4vw,31px);line-height:1.45;font-weight:700;letter-spacing:-.035em
}
.storyClosingCard blockquote em{font-style:normal;color:#a74487}
.isMoreActive{background:#f0ebff!important;color:#6747cf!important;border-color:#ded3ff!important}
@media(max-width:880px){
  .storyPage{min-height:calc(100vh - 166px);padding:24px 12px 50px}
  .storyPhilosophyGrid,.storyClosingCard{grid-template-columns:1fr}
  .storyPhilosophyGrid blockquote{border-right:0;border-bottom:1px solid rgba(107,90,164,.22);padding:0 0 18px}
  .storyClosingCard blockquote{border-left:0;border-top:1px solid rgba(111,88,165,.22);padding:18px 0 0}
  .storyFlow{grid-template-columns:1fr;justify-items:center}
  .storyFlowArrow{transform:rotate(90deg)}
  .storyFlowNode{width:min(250px,80vw)}
}
@media(max-width:560px){
  .storyContent{width:100%}
  .storyIntroCard,.storyPhilosophyCard,.storyFlowCard,.storyClosingCard{border-radius:21px;padding:18px}
  .storyLead{font-size:17px}
  .storyFlowLoop{width:100%;text-align:center;border-radius:17px;line-height:1.8}
}