@charset "utf-8";
/* ETHER 홍보사이트 (index.html) · 02 ELEMENTS · 스포트라이트 무대 · 원화 스페시멘 — index.html 에 적힌 순서대로 불러온다 */
/* ============ ELEMENTS ============ */
.elements{padding:var(--sp-9) 0;background:var(--bg-2);transition:background .5s}

/* ---- 02 스포트라이트 무대 (+ 기의 장) ----
   판 높이를 꽉 채우는 3단 : 제목 / 무대(큰 그래픽 + 설명) / 레일. 스크롤 없이 한 화면.
   --elc = 지금 무대에 선 오행 색. @property 로 등록해 두어 색이 바뀔 때 배경·받침·그림자가 함께 번져 바뀐다 */
@property --elc{syntax:'<color>';inherits:true;initial-value:#5E7A3C}
#pg-elements{container-type:size}
#elements.el-stage{--elc:var(--wood);height:100%;min-height:560px;
  padding:clamp(12px,3cqh,40px) 0 clamp(14px,3.6cqh,44px);
  background:radial-gradient(60% 70% at 32% 56%,color-mix(in srgb,var(--elc) 16%,#fff) 0%,color-mix(in srgb,var(--elc) 6%,var(--sf2)) 55%,var(--sf2) 100%);
  transition:--elc .8s ease}
.el-in{height:100%;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:clamp(8px,2cqh,24px)}
.el-stage .el-sec-head{text-align:left;max-width:none;margin:0}
.el-stage .el-sec-head .sec-title{margin:0;font-size:min(var(--fd-t),6.4cqh)}
.el-stage .el-sec-head .sec-sub{margin:clamp(4px,1cqh,12px) 0 0;font-size:clamp(13px,2.2cqh,16px)}

/* 무대 : 왼쪽 큰 그래픽 / 오른쪽 설명 */
.el-show{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);align-items:center;gap:clamp(16px,3vw,56px);min-height:0}
.el-art{position:relative;height:100%;min-height:0;display:grid;place-items:center}
.el-pt{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.el-spot{position:absolute;width:62%;aspect-ratio:3/1;bottom:5%;border-radius:50%;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--elc) 22%,transparent),transparent);filter:blur(6px)}
.el-mover{position:relative;width:100%;height:100%;display:grid;place-items:center;animation:elFloat 7s ease-in-out infinite}
@keyframes elFloat{50%{transform:translateY(-8px)}}
/* --fit : 木 기준 시각 보정 배율 (js/main/elements.js 의 EL_FIT). 원본이 모두 약 310px 이고 그래픽이 캔버스를 채우는 비율이 달라
   같은 상자에 넣으면 水·土·金 이 크고 무거워 보인다. transform 은 등장 애니메이션이 쓰므로 scale 속성으로 건다 */
.el-mover img{width:auto;height:min(92%,520px);max-width:100%;aspect-ratio:1;object-fit:contain;
  scale:var(--fit,1);transition:scale .6s cubic-bezier(.22,.61,.36,1);
  filter:drop-shadow(0 30px 40px color-mix(in srgb,var(--elc) 30%,transparent))}
.el-mover img.enter{animation:elEnter .8s cubic-bezier(.22,.61,.36,1)}
@keyframes elEnter{from{opacity:0;transform:translateX(var(--from,40px)) scale(.92) rotate(-6deg)}}

.el-no{font-family:var(--mono);font-size:var(--fs-2);letter-spacing:.2em;color:var(--ink-3)}
.el-no b{color:var(--elc);font-weight:500}
.el-hz{display:flex;align-items:baseline;gap:14px;margin:10px 0 6px}
.el-hz b{font-family:"Noto Serif KR",serif;font-weight:400;font-size:clamp(48px,11cqh,104px);line-height:1;color:var(--elc)}
.el-hz span{font-family:var(--mono);font-size:13px;letter-spacing:.24em;color:var(--ink-3)}
.el-kw2{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;color:var(--ink-3)}
.el-body{margin:clamp(10px,2.6cqh,26px) 0;font-size:clamp(15px,2.1cqh,18px);line-height:1.75;max-width:440px;word-break:keep-all}
.el-tags{display:flex;flex-wrap:wrap;gap:8px;max-width:480px}
.el-tags span{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--ink-2);border:1px solid var(--line);border-radius:var(--r-full);padding:6px 12px;background:rgba(255,255,255,.7)}
.el-tx.enter > *{animation:elRise .6s cubic-bezier(.22,.61,.36,1) backwards}
.el-tx.enter > *:nth-child(2){animation-delay:.05s}.el-tx.enter > *:nth-child(3){animation-delay:.1s}
.el-tx.enter > *:nth-child(4){animation-delay:.15s}.el-tx.enter > *:nth-child(5){animation-delay:.2s}
@keyframes elRise{from{opacity:0;transform:translateY(10px)}}

/* 레일 : 흰 받침 하나가 레일 위를 살짝 튕기듯 미끄러져 고른 자리로 간다. 가는 동안 테두리 색도 새 오행 색으로 */
.el-rail{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:6px;
  padding:6px;border-radius:22px;background:rgba(255,255,255,.45);border:1px solid var(--line);backdrop-filter:blur(6px)}
.el-pill{position:absolute;top:6px;bottom:6px;left:0;width:0;border-radius:16px;background:#fff;
  border:1.5px solid color-mix(in srgb,var(--elc) 55%,transparent);
  box-shadow:0 12px 28px -14px color-mix(in srgb,var(--elc) 70%,transparent),0 0 0 4px color-mix(in srgb,var(--elc) 10%,transparent);
  transition:transform .6s cubic-bezier(.34,1.3,.5,1),width .6s cubic-bezier(.34,1.3,.5,1)}
/* 그래픽 + 한자·이름 묶음을 버튼 가운데에 둔다 (묶음 안 글자는 왼쪽 정렬 그대로) */
.el-thumb{position:relative;z-index:1;display:grid;grid-template-columns:auto auto;justify-content:center;align-items:center;gap:10px;padding:8px 14px;text-align:left;
  border:0;border-radius:16px;background:none;cursor:pointer;font:inherit;color:inherit}
.el-thumb img{width:clamp(36px,6cqh,52px);aspect-ratio:1;object-fit:contain;scale:var(--fit,1);
  transition:scale .5s cubic-bezier(.34,1.56,.64,1),filter .4s,opacity .4s}
.el-thumb b{display:block;font-family:"Noto Serif KR",serif;font-weight:400;font-size:20px;line-height:1.1;color:var(--tc)}
.el-thumb i{display:block;font-style:normal;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;color:var(--ink-3);margin-top:3px}
.el-thumb:not(.on) img{filter:saturate(.4);opacity:.75}
.el-thumb:not(.on):hover img{filter:none;opacity:1}
.el-thumb.on img{scale:calc(var(--fit,1) * 1.14)}   /* 받침이 도착하면 그래픽이 톡 커진다 */
.el-thumb:focus-visible{outline:2px solid var(--cobalt);outline-offset:-2px}

/* 판이 보이지 않을 땐 떠다니는 움직임도 멈춘다 (입자는 JS 가 멈춘다) */
.elements:not(.is-live) .el-mover{animation-play-state:paused}
@media(max-width:860px){
  .el-show{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto;gap:8px}
  .el-body{font-size:14px;margin:8px 0}.el-tags{display:none}.el-hz b{font-size:44px}.el-hz{margin:4px 0}
  .el-thumb{grid-template-columns:1fr;justify-items:center;padding:8px}.el-thumb i{display:none}
}
@media(prefers-reduced-motion:reduce){
  .el-pt{display:none}.el-mover,.el-mover img.enter,.el-tx.enter > *{animation:none}
  #elements.el-stage,.el-pill,.el-thumb img{transition:none}
}
/* elements header: left text + right 240x240 specimen */
.el-head-row{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-7);margin-bottom:40px}
.el-head-row .el-sec-head{text-align:left;max-width:none;margin:0;flex:1 1 auto}
.el-head-row .el-sec-head .eyebrow{justify-content:flex-start;margin-bottom:var(--sp-5)}
.el-head-row .el-sec-head .sec-title{margin:0}
.el-head-row .el-sec-head .sec-sub{margin-left:0}
.el-specimen{flex:0 0 240px;width:240px;height:240px;position:relative}
#elementSpecimen{display:block;width:240px;height:240px}
.el-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--sp-4)}
.el-card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);
  padding:var(--sp-5) var(--sp-5);cursor:pointer;transition:.3s;position:relative;overflow:hidden;
}
.el-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.el-card.active{border-color:var(--ec);box-shadow:0 0 0 1px var(--ec), var(--shadow-lg)}
.el-viz svg{width:100%;height:100%}

/* ---- ELEMENT SPECIMEN (목화토금수 원화) ---------------------------------
   레이어 구조
   el-viz ─ 표면(단색+그레인) / el-shadow 접지 그림자
     el-orb-wrap  : 무중력 유영 드리프트 + perspective
       el-orb-pick: 카드 선택 시 1회성 모션 (원소별로 다름)
         el-orb-tilt : rotateX/rotateY 3D 텀블
           el-orb-spin : rotateZ 360°
             el-orb   : 본체 (속성별 내부 움직임)
             el-lines : 내부 능선 마스크 위로 흐르는 원소색 빛
             el-rim   : 명암 셰이딩(입체) — soft-light
             el-sheen : 광택 / 열 / 발광
------------------------------------------------------------------------ */
.el-viz{
  position:relative;width:100%;aspect-ratio:4/5;margin-bottom:var(--sp-4);
  border-radius:var(--r-s);overflow:hidden;background:var(--plate-bg);isolation:isolate;
  transition:transform .6s cubic-bezier(.22,1,.36,1);
}
.el-viz::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:9;
  box-shadow:inset 0 0 0 1px rgba(7,20,47,.07);transition:box-shadow .45s ease;
}
.el-card.active .el-viz::after{box-shadow:inset 0 0 0 1px var(--ec),inset 0 0 0 5px rgba(255,255,255,.6)}
.el-card:hover .el-viz{transform:scale(1.015)}
.el-grain{
  position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.55;
  background-image:var(--grain);background-size:96px 96px;mix-blend-mode:soft-light;
}
.el-shadow{
  position:absolute;left:52%;top:53%;width:54%;height:58%;z-index:1;pointer-events:none;
  transform:translate(-50%,-50%);border-radius:50%;filter:blur(7px);
  background:radial-gradient(50% 50% at 50% 50%,rgba(28,20,70,.22),rgba(28,20,70,.07) 62%,rgba(28,20,70,0) 78%);
}
.el-orb-wrap{position:absolute;inset:0;z-index:2;display:grid;place-items:center;perspective:520px}
.el-orb-pick{position:relative;width:70%;height:70%;transform-style:preserve-3d}
.el-orb-tilt{position:absolute;inset:0;transform-style:preserve-3d}
.el-orb-spin{position:absolute;inset:0;filter:url(#elAlphaClip)}   /* 이미지 바깥 옅은 사각 잔상 제거 */
/* 접지 그림자(회색 블러 타원) 제거 — 흰 플레이트 위에서 그래픽 뒤에 회색 얼룩으로 남는다 */
.el-shadow{display:none}
.el-orb,.el-lines,.el-rim,.el-sheen{
  position:absolute;inset:0;pointer-events:none;
  background-repeat:no-repeat;background-position:center;
}
.el-orb{background-size:contain;backface-visibility:hidden;z-index:1}
/* 내부 라인 발광 — 원소색 그라데이션이 능선 마스크를 타고 흐른다 */
.el-lines{
  z-index:2;opacity:.92;mix-blend-mode:screen;
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}
/* 입체 셰이딩 : 좌상단 광원 + 우하단 음영 */
.el-rim{
  z-index:3;mix-blend-mode:soft-light;
  background-image:
    radial-gradient(115% 115% at 27% 20%,rgba(255,255,255,.62),rgba(255,255,255,0) 47%),
    radial-gradient(115% 115% at 74% 83%,rgba(16,12,44,.42),rgba(16,12,44,0) 54%);
  background-size:contain;
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}
.el-sheen{
  z-index:4;opacity:0;mix-blend-mode:screen;
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}

.el-card[data-el="wood"] .el-orb,.el-detail[data-el="wood"] .el-orb{background-image:var(--orb-wood)}
.el-card[data-el="wood"] .el-lines,.el-detail[data-el="wood"] .el-lines{background-image:linear-gradient(180deg,rgba(56,170,116,0) 39%,rgba(84,214,148,.32) 44.5%,rgba(188,255,222,.92) 48.4%,rgba(255,255,255,1) 50%,rgba(168,252,208,.9) 51.8%,rgba(56,170,116,.30) 56%,rgba(56,170,116,0) 61%);-webkit-mask-image:var(--line-wood);mask-image:var(--line-wood)}
.el-card[data-el="wood"] .el-rim,.el-detail[data-el="wood"] .el-rim{-webkit-mask-image:var(--orb-wood);mask-image:var(--orb-wood)}
.el-card[data-el="fire"] .el-orb,.el-detail[data-el="fire"] .el-orb{background-image:var(--orb-fire)}
.el-card[data-el="fire"] .el-lines,.el-detail[data-el="fire"] .el-lines{background-image:linear-gradient(180deg,rgba(196,48,24,0) 39%,rgba(255,104,56,.36) 44%,rgba(255,178,88,.95) 48%,rgba(255,246,214,1) 50%,rgba(255,150,72,.92) 52%,rgba(214,58,28,.32) 56.5%,rgba(214,58,28,0) 62%);-webkit-mask-image:var(--line-fire);mask-image:var(--line-fire)}
.el-card[data-el="fire"] .el-rim,.el-detail[data-el="fire"] .el-rim{-webkit-mask-image:var(--orb-fire);mask-image:var(--orb-fire)}
.el-card[data-el="earth"] .el-orb,.el-detail[data-el="earth"] .el-orb{background-image:var(--orb-earth)}
.el-card[data-el="earth"] .el-lines,.el-detail[data-el="earth"] .el-lines{background-image:linear-gradient(180deg,rgba(122,84,40,0) 38%,rgba(176,124,51,.34) 44%,rgba(226,180,116,.90) 48%,rgba(255,238,205,1) 50%,rgba(214,164,100,.88) 52%,rgba(122,84,40,.30) 57%,rgba(122,84,40,0) 62%);-webkit-mask-image:var(--line-earth);mask-image:var(--line-earth)}
.el-card[data-el="earth"] .el-rim,.el-detail[data-el="earth"] .el-rim{-webkit-mask-image:var(--orb-earth);mask-image:var(--orb-earth)}
.el-card[data-el="metal"] .el-orb,.el-detail[data-el="metal"] .el-orb{background-image:var(--orb-metal)}
.el-card[data-el="metal"] .el-lines,.el-detail[data-el="metal"] .el-lines{background-image:linear-gradient(135deg,rgba(150,166,186,0) 0%,rgba(186,200,220,.34) 22%,rgba(232,240,250,.92) 42%,rgba(255,255,255,1) 50%,rgba(214,226,240,.76) 60%,rgba(140,156,176,.22) 80%,rgba(140,156,176,0) 100%);-webkit-mask-image:var(--line-metal);mask-image:var(--line-metal)}
.el-card[data-el="metal"] .el-rim,.el-detail[data-el="metal"] .el-rim{-webkit-mask-image:var(--orb-metal);mask-image:var(--orb-metal)}
.el-card[data-el="water"] .el-orb,.el-detail[data-el="water"] .el-orb{background-image:var(--orb-water)}
.el-card[data-el="water"] .el-lines,.el-detail[data-el="water"] .el-lines{background-image:linear-gradient(178deg,rgba(20,61,130,0) 39%,rgba(84,132,255,.34) 44%,rgba(148,214,255,.92) 48%,rgba(238,251,255,1) 50%,rgba(112,186,255,.90) 52%,rgba(24,70,150,.30) 56.5%,rgba(24,70,150,0) 62%);-webkit-mask-image:var(--line-water);mask-image:var(--line-water)}
.el-card[data-el="water"] .el-rim,.el-detail[data-el="water"] .el-rim{-webkit-mask-image:var(--orb-water);mask-image:var(--orb-water)}
.el-card[data-el="fire"] .el-sheen,.el-detail[data-el="fire"] .el-sheen{-webkit-mask-image:var(--orb-fire);mask-image:var(--orb-fire)}
.el-card[data-el="metal"] .el-sheen,.el-detail[data-el="metal"] .el-sheen{-webkit-mask-image:var(--orb-metal);mask-image:var(--orb-metal)}
.el-card[data-el="water"] .el-sheen,.el-detail[data-el="water"] .el-sheen{-webkit-mask-image:var(--orb-water);mask-image:var(--orb-water)}
/* 능선 마스크(--line-*)는 엣지 검출로 만들어 이미지 테두리까지 선으로 잡혀 있다 → 사각 프레임이 회전하며 보인다.
   그래픽 실루엣(--orb-*)과 교집합으로 마스킹해 빛이 그래픽 안에서만 흐르게 한다 */
.el-lines{-webkit-mask-composite:source-in;mask-composite:intersect}
.el-card[data-el="wood"] .el-lines,.el-detail[data-el="wood"] .el-lines{-webkit-mask-image:var(--line-wood),var(--orb-wood);mask-image:var(--line-wood),var(--orb-wood)}
.el-card[data-el="fire"] .el-lines,.el-detail[data-el="fire"] .el-lines{-webkit-mask-image:var(--line-fire),var(--orb-fire);mask-image:var(--line-fire),var(--orb-fire)}
.el-card[data-el="earth"] .el-lines,.el-detail[data-el="earth"] .el-lines{-webkit-mask-image:var(--line-earth),var(--orb-earth);mask-image:var(--line-earth),var(--orb-earth)}
.el-card[data-el="metal"] .el-lines,.el-detail[data-el="metal"] .el-lines{-webkit-mask-image:var(--line-metal),var(--orb-metal);mask-image:var(--line-metal),var(--orb-metal)}
.el-card[data-el="water"] .el-lines,.el-detail[data-el="water"] .el-lines{-webkit-mask-image:var(--line-water),var(--orb-water);mask-image:var(--line-water),var(--orb-water)}

.el-head{display:flex;align-items:baseline;gap:var(--sp-2);margin-bottom:var(--sp-2)}
.el-hanja{font-weight:var(--fw-d3);font-family:var(--serif);font-size:var(--fs-8);line-height:1;color:var(--ec);letter-spacing:var(--ls-d3)}
.el-en{font-family:var(--mono);font-size:var(--fs-2);letter-spacing:.12em;color:var(--ink-2)}
.el-kw{font-family:var(--mono);font-size:var(--fs-1);letter-spacing:.00em;color:var(--ink-3);margin-bottom:var(--sp-3);white-space:nowrap;white-space:normal;letter-spacing:.06em;line-height:1.5}
.el-line{font-size:var(--fs-3);line-height:1.55;color:var(--ink-2);word-break:keep-all}   /* "깊/은" 처럼 낱말 중간에서 끊기지 않게 */

.el-detail{
  margin-top:var(--sp-4);background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);
  padding:var(--sp-7);display:grid;grid-template-columns:224px 1fr;gap:var(--sp-7);align-items:center;
  box-shadow:var(--shadow);
}
.el-detail .d-viz{
  position:relative;width:100%;aspect-ratio:4/5;border-radius:var(--r-s);
  overflow:hidden;background:var(--plate-bg);isolation:isolate;
  box-shadow:var(--shadow-lg);
}
.el-detail .d-viz::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:4;
  box-shadow:inset 0 0 0 1px var(--dc),inset 0 0 0 5px rgba(255,255,255,.6);
}
.d-hanja{font-weight:var(--fw-d2);font-family:var(--serif);font-size:var(--fg-0);color:var(--dc);line-height:1;margin-bottom:var(--sp-2);letter-spacing:var(--ls-d2)}
.d-kw{font-family:var(--mono);font-size:var(--fs-2);letter-spacing:.14em;color:var(--ink-2);margin-bottom:var(--sp-5)}
.d-body{font-size:var(--fs-5);line-height:1.75;max-width:798px}
.d-tags{display:flex;gap:var(--sp-2);margin-top:var(--sp-5);flex-wrap:wrap}
.d-tags span{font-family:var(--mono);font-size:var(--fs-2);letter-spacing:.06em;padding:var(--sp-2) var(--sp-3);border-radius:var(--r-full);border:1px solid var(--line);color:var(--ink-2)}