@charset "UTF-8";

:root {
  --bg: #f4f1eb;
  --ink: #111;
  --muted: #72706c;
  --line: rgba(17,17,17,.16);
  --accent: #ff4f19;
  --dark: #0c0c0c;
  --white: #f8f7f3;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  background:var(--bg);
  color:var(--ink);
  font-family:Arial, "Noto Sans KR", sans-serif;
  overflow-x:hidden;
}
a { color:inherit; text-decoration:none; }
button, input, textarea, select { font:inherit; }
button { cursor:pointer; }
img { max-width:100%; }

.header {
  position:fixed;
  z-index:1000;
  top:0;
  left:0;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:22px 4vw;
  mix-blend-mode:normal;
  color:#fff;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background .35s ease, color .35s ease, border-color .35s ease, box-shadow .35s ease, padding .35s ease;
}

.header.header-scrolled {
  background:rgba(255,255,255,.96);
  color:#111;
  border-bottom-color:rgba(17,17,17,.08);
  box-shadow:0 8px 30px rgba(0,0,0,.055);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  padding-top:17px;
  padding-bottom:17px;
}
.brand { display:flex; flex-direction:column; gap:3px; }
.brand strong { font-size:18px; letter-spacing:.14em; }
.brand span { font-size:9px; letter-spacing:.12em; opacity:.7; }

.gnb { display:flex; gap:34px; font-size:14px; letter-spacing:.12em; }
.gnb a { position:relative; padding-bottom:5px; }
.gnb a::after {
  content:"";
  position:absolute;
  left:0; bottom:0;
  width:0; height:1px;
  background:currentColor;
  transition:.3s;
}
.gnb a:hover::after { width:100%; }

.menu-btn {
  display:none;
  width:38px;
  height:38px;
  border:0;
  background:none;
}
.menu-btn span {
  display:block;
  width:24px;
  height:1px;
  background:currentColor;
  margin:6px auto;
}

.mobile-menu {
  display:none;
  position:fixed;
  z-index:900;
  inset:0;
  background:#111;
  color:#fff;
  padding:120px 8vw;
}
.mobile-menu nav { display:flex; flex-direction:column; }
.mobile-menu a {
  font-size:11vw;
  line-height:1;
  border-bottom:1px solid rgba(255,255,255,.2);
  padding:18px 0;
}

.hero {
  position:relative;
  min-height:100vh;
  background:#111;
  color:#fff;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:120px 4vw 50px;
  overflow:hidden;
}
.hero::before {
  content:"";
  position:absolute;
  width:55vw;
  height:55vw;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,79,25,.27), transparent 68%);
  right:-12vw;
  top:-10vw;
}
.hero-noise {
  position:absolute;
  inset:0;
  opacity:.17;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:38px 38px;
}
.hero-copy { position:relative; z-index:2; }
.eyebrow {
  margin-bottom:28px;
  margin-left: 12px;
  font-size:14px;
  letter-spacing:.21em;
  color:rgba(255,255,255,.65);
}
.hero h1 {
  font-size:clamp(62px, 9.2vw, 170px);
  letter-spacing:-.07em;
  line-height:.76;
  font-weight:800;
}
.hero h1 span { display:block; }
.hero h1 .accent { color:var(--accent); }
.hero-desc {
  margin:42px 0 0 10px;
  max-width:650px;
  font-size:clamp(15px, 1.25vw, 21px);
  line-height:1.75;
  color:rgba(255,255,255,.72);
}
.hero-meta {
  position:relative;
  z-index:2;
  margin-top:70px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:1px solid rgba(255,255,255,.18);
}
.hero-meta > div {
  padding:24px 0 0;
}
.hero-meta strong {
  font-size:clamp(30px,3vw,58px);
  letter-spacing:-.05em;
}
.hero-meta div:first-child span {
  color:var(--accent);
  font-size:30px;
}
.hero-meta p {
  margin-top:7px;
  color:rgba(255,255,255,.45);
  font-size:9px;
  letter-spacing:.15em;
}
.scroll-guide {
  position:absolute;
  right:4vw;
  bottom:38px;
  z-index:3;
  font-size:9px;
  letter-spacing:.14em;
  color:rgba(255,255,255,.55);
}
.scroll-guide i {
  display:inline-block;
  width:34px;
  height:1px;
  background:currentColor;
  margin-left:10px;
  vertical-align:middle;
}

.section { padding:140px 4vw; }
.section-head {
  display:grid;
  grid-template-columns:1fr 2.6fr 1.2fr;
  gap:4vw;
  align-items:start;
  padding-bottom:80px;
  border-bottom:1px solid var(--line);
}
.section-index {
  font-size:10px;
  letter-spacing:.18em;
  color:var(--muted);
}
.section-head h2 {
  font-size:clamp(54px, 7vw, 128px);
  line-height:.82;
  letter-spacing:-.065em;
}
.section-head h2 span { color:var(--accent); }
.section-head > p:last-child {
  font-size:20px;
  line-height:1.8;
  color:var(--muted);
}
.section-head.light { border-color:rgba(255,255,255,.18); }
.section-head.light .section-index,
.section-head.light > p:last-child { color:rgba(255,255,255,.5); }


.career-showcase {
  display:grid;
  grid-template-columns:1.22fr .92fr;
  gap:24px;
  padding-top:80px;
}
.career-panel {
  position:relative;
  overflow:hidden;
  border:1px solid var(--line);
  padding:34px;
  min-height:100%;
}
.career-panel::after {
  content:"";
  position:absolute;
  width:180px;
  height:180px;
  border-radius:50%;
  right:-85px;
  top:-85px;
  background:rgba(255,79,25,.12);
}
.career-panel-primary {
  grid-row:span 2;
  background:#ebe6dc;
}
.career-panel-dark {
  background:#111;
  color:#fff;
  border-color:#111;
}
.career-panel-awards {
  background:var(--accent);
  border-color:var(--accent);
}
.career-panel-head {
  position:relative;
  z-index:2;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:30px;
  padding-bottom:28px;
  border-bottom:1px solid currentColor;
}
.career-panel-dark .career-panel-head { border-color:rgba(255,255,255,.22); }
.career-kicker {
  display:block;
  margin-bottom:10px;
  font-size:9px;
  letter-spacing:.18em;
  opacity:.55;
}
.career-panel-head h3 {
  font-size:clamp(28px,3vw,52px);
  letter-spacing:-.055em;
}
.career-panel-head h3 em {
  font-family:Georgia, serif;
  font-weight:400;
  font-size:.55em;
  letter-spacing:0;
  opacity:.55;
}
.career-panel-head > strong {
  font-size:clamp(44px,5vw,78px);
  line-height:.8;
  letter-spacing:-.08em;
  opacity:.15;
}
.history-list {
  list-style:none;
  position:relative;
  z-index:2;
}
.history-list li {
  display:grid;
  grid-template-columns:44px 1fr;
  gap:14px;
  align-items:start;
  padding:18px 0;
  border-bottom:1px solid rgba(17,17,17,.12);
}
.career-panel-dark .history-list li {
  border-color:rgba(255,255,255,.13);
}
.career-panel-awards .history-list li {
  border-color:rgba(17,17,17,.22);
}
.history-list li > span {
  font-size:9px;
  letter-spacing:.14em;
  opacity:.4;
  padding-top:4px;
}
.history-list li p {
  font-size:15px;
  line-height:1.55;
}
.history-list li b {
  font-weight:700;
  color:var(--accent);
}
.career-panel-awards .history-list li b { color:#111; }
.career-panel-primary .history-list li:hover,
.career-panel-awards .history-list li:hover {
  padding-left:10px;
}
.career-panel-dark .history-list li:hover {
  padding-left:10px;
  color:var(--accent);
}
.history-list li { transition:.25s; }

.section-dark { background:var(--dark); color:var(--white); }
.works {
  display:grid;
  gap:20px;
  padding-top:80px;
}
.works-4 {
  grid-template-columns:repeat(4,1fr);
}
.work-card {
  display:block;
  min-width:0;
}
.work-thumb {
  aspect-ratio:6 / 3;
  min-height:0;
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:flex-end;
  
}
/*.work-thumb::before {
  content:"";
  position:absolute;
  inset:-8%;
  transition:transform .7s cubic-bezier(.2,.7,.2,1), filter .5s;
}*/
.thumb-01::before { background:linear-gradient(135deg,#d7d2c6,#4a6c77); }
.thumb-02::before { background:linear-gradient(135deg,#cd603f,#301e27); }
.thumb-03::before { background:linear-gradient(135deg,#87a7d0,#16212c); }
.thumb-04::before { background:linear-gradient(135deg,#cec2aa,#8a6e52); }
.thumb-05::before { background:linear-gradient(135deg,#746c88,#d2a48d); }
.thumb-06::before { background:linear-gradient(135deg,#476b57,#c1c2a7); }
.thumb-07::before { background:linear-gradient(135deg,#c1a063,#523f31); }
.thumb-08::before { background:linear-gradient(135deg,#626d7a,#2c2730); }
.work-card:hover .work-thumb::before {
  transform:scale(1.08) rotate(.8deg);
  filter:brightness(.76);
}
.work-thumb span {
  position:relative;
  z-index:2;
  font-size:9px;
  letter-spacing:.14em;
  background:rgba(0,0,0,.58);
  padding:7px 9px;
}
.work-info {
  padding:16px 0 30px;
  border-bottom:1px solid rgba(255,255,255,.14);
}
.work-info p {
  font-size:8px;
  letter-spacing:.14em;
  color:rgba(255,255,255,.38);
}
.work-info h3 {
  margin:7px 0 10px;
  font-size:clamp(17px,1.45vw,24px);
  letter-spacing:-.035em;
}
.work-info span {
  font-size:10px;
  color:rgba(255,255,255,.5);
}
.work-card:hover .work-info span { color:var(--accent); }


.course-list { padding-top:70px; }
.course-item {
  display:grid;
  grid-template-columns:80px 1.2fr 1fr;
  align-items:center;
  gap:30px;
  min-height:104px;
  border-bottom:1px solid var(--line);
  transition:.3s;
}
.course-item span { color:var(--muted); font-size:10px; }
.course-item h3 {
  font-size:clamp(25px,3vw,48px);
  letter-spacing:-.05em;
}
.course-item p { color:var(--muted); font-size:13px; }
.course-item:hover {
  background:var(--accent);
  padding:0 20px;
  color:#111;
}
.course-item:hover span,
.course-item:hover p { color:#111; }

.section-accent {
  background:var(--accent);
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:10vw;
}
.contact-copy h2 {
  margin:20px 0 30px;
  font-size:clamp(65px,8vw,145px);
  line-height:.77;
  letter-spacing:-.07em;
}
.contact-copy > p:last-child {
  max-width:460px;
  line-height:1.8;
  font-size:16px;
}
.contact-form {
  background:#111;
  color:#fff;
  padding:45px;
}
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.contact-form label { display:block; margin-bottom:26px; }
.contact-form label > span {
  display:block;
  margin-bottom:10px;
  font-size:15px;
  letter-spacing:.12em;
  color:rgba(255,255,255,.48);
}
.contact-form input,
.contact-form textarea,
.contact-form select {
  width:100%;
  color:#fff;
  background:transparent;
  border:0;
  border-bottom:1px solid rgba(255,255,255,.25);
  border-radius:0;
  padding:10px 0 14px;
  outline:none;
}
.contact-form textarea { resize:vertical; }
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus { border-color:var(--accent); }
.contact-form select option { color:#111; }
.contact-form .agree {
  display:flex;
  align-items:center;
  gap:9px;
}
.contact-form .agree input { width:auto; }
.contact-form .agree span { margin:0; }
.contact-form button {
  width:100%;
  border:1px solid rgba(255,255,255,.3);
  background:#fff;
  padding:18px 20px;
  display:flex;
  justify-content:space-between;
  font-weight:700;
  transition:.3s;
}
.contact-form button:hover { background:var(--accent); }
.form-status { margin-top:16px; font-size:12px; color:rgba(255,255,255,.65); }

.footer {
  min-height:150px;
  padding:38px 4vw;
  background:#111;
  color:#fff;
  display:grid;
  grid-template-columns:1fr 1fr auto;
  align-items:end;
  gap:30px;
}
.footer strong { font-size:13px; letter-spacing:.12em; }
.footer p { font-size:10px; color:rgba(255,255,255,.42); margin-top:5px; }
.footer > p { text-align:center; }
.footer a { font-size:9px; letter-spacing:.15em; opacity:.4; }

.reveal {
  opacity:0;
  transform:translateY(40px);
  transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1);
}
.reveal.is-visible { opacity:1; transform:none; }

@media (max-width: 1100px) {
  .section-head { grid-template-columns:1fr 2fr; }
  .section-head > p:last-child { grid-column:2; }
  .career-showcase { grid-template-columns:1fr; }
  .career-panel-primary { grid-row:auto; }
  .works-4 { grid-template-columns:repeat(2,1fr); }
  .section-accent { grid-template-columns:1fr; }
}

@media (max-width: 760px) {
  .gnb { display:none; }
  .menu-btn { display:block; }
  .hero { padding:110px 5vw 40px; }
  .hero h1 { font-size:18vw; line-height:.82; }
  .hero-meta { grid-template-columns:1fr; gap:18px; }
  .hero-meta > div { border-bottom:1px solid rgba(255,255,255,.12); padding-bottom:18px; }
  .scroll-guide { display:none; }

  .section { padding:95px 5vw; }
  .section-head { display:block; }
  .section-head h2 { margin:24px 0 28px; font-size:15vw; }
  .career-showcase { padding-top:50px; }
  .career-panel { padding:24px 18px; }
  .career-panel-head { gap:15px; }
  .history-list li { grid-template-columns:32px 1fr; gap:8px; padding:15px 0; }
  .history-list li p { font-size:13px; }
  .works-4 { grid-template-columns:1fr 1fr; gap:14px; }
  .work-thumb img {width: 100% !important;}
  .work-info { padding-bottom:20px; }
  .course-item { grid-template-columns:40px 1fr; gap:10px; padding:20px 0; }
  .course-item p { grid-column:2; }
  .form-row { grid-template-columns:1fr; gap:0; }
  .contact-form { padding:30px 22px; }
  .footer { grid-template-columns:1fr; }
  .footer > p { text-align:left; }
}


.profile {
  position:relative;
  overflow:hidden;
  background:#e9e4da;
}
.profile::before {
  content:"PROFILE";
  position:absolute;
  right:-1vw;
  top:15px;
  font-size:clamp(90px,16vw,260px);
  line-height:1;
  font-weight:800;
  letter-spacing:-.08em;
  color:rgba(17,17,17,.035);
  pointer-events:none;
}
.profile-wrap {
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:9vw;
  align-items:center;
}
.profile-visual {
  position:relative;
}
.profile-photo {
  width:100%;
  aspect-ratio:4 / 5;
  overflow:hidden;
  /*background:#161616;*/
}
.profile-photo img {
  width:100%;
  height:100%;
  object-fit:cover;
  filter:grayscale(100%);
  transition:transform .8s cubic-bezier(.2,.7,.2,1), filter .5s;
}
.profile-photo:hover img {
  transform:scale(1.035);
  filter:grayscale(0%);
}
.profile-photo-placeholder {
  width:100%;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:9px;
  border:1px solid rgba(255,255,255,.1);
  color:rgba(255,255,255,.6);
  background: url(img/seohoseok.jpg) no-repeat 0 0 / contain;

    
}
.profile-photo-placeholder span {
  font-size:13px;
  letter-spacing:.18em;
}
.profile-photo-placeholder small {
  font-size:10px;
  opacity:.45;
}
.profile-caption {
  margin-top:12px;
  font-size:14px;
  letter-spacing:.13em;
  color:var(--muted);
}
.profile-copy h2 {
  margin:22px 0 30px;
  font-size:clamp(58px,7vw,120px);
  line-height:.82;
  letter-spacing:-.065em;
}
.profile-copy h2 span { color:var(--accent); }
.profile-lead {
  max-width:740px;
  color:var(--muted);
  font-size:21px;
  line-height:1.8;
}
.profile-points {
  margin-top:50px;
  border-top:1px solid var(--line);
}
.profile-points > div {
  display:grid;
  grid-template-columns:150px 1fr;
  align-items:center;
  padding:20px 0;
  border-bottom:1px solid var(--line);
}
.profile-points strong {
  font-size:clamp(30px,3vw,52px);
  letter-spacing:-.05em;
}
.profile-points span {
  font-size:10px;
  letter-spacing:.15em;
  color:var(--muted);
}



/* =========================
   HERO MOTION / INTRO
========================= */
.hero {
  isolation:isolate;
}
.hero-copy,
.hero-meta,
.scroll-guide {
  z-index:5;
}
.hero-intro-eyebrow {
  overflow:hidden;
}
.hero-intro-eyebrow span {
  display:block;
  opacity:0;
  transform:translateY(130%);
  animation:heroEyebrowIn .8s .15s cubic-bezier(.16,1,.3,1) forwards;
}
.hero-title-line {
  display:block;
  overflow:hidden;
  padding-bottom:.08em;
}
.hero-title-line b {
  display:block;
  font:inherit;
  opacity:0;
  transform:translateY(115%) skewY(5deg);
  transform-origin:left bottom;
  animation:heroTitleIn 1.05s cubic-bezier(.16,1,.3,1) forwards;
}
.hero-title-line:nth-child(1) b { animation-delay:.28s; }
.hero-title-line:nth-child(2) b { animation-delay:.42s; }
.hero-title-line:nth-child(3) b { animation-delay:.56s; }

.hero-desc {
  opacity:0;
  transform:translateY(24px);
  animation:heroFadeIn .8s .82s ease forwards;
}
.hero-meta {
  opacity:0;
  transform:translateY(28px);
  animation:heroFadeIn .9s 1s ease forwards;
}
.scroll-guide {
  opacity:0;
  animation:heroFadeOnly .8s 1.25s ease forwards;
}
.scroll-guide i {
  animation:scrollLine 1.8s ease-in-out infinite;
  transform-origin:left center;
}

.hero-grid-motion {
  position:absolute;
  z-index:0;
  inset:-15%;
  opacity:.22;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:54px 54px;
  transform:perspective(700px) rotateX(62deg) translateY(18%);
  transform-origin:center 70%;
  animation:gridDrift 18s linear infinite;
}
.hero-orbit {
  position:absolute;
  z-index:1;
  border:1px solid rgba(255,255,255,.08);
  border-radius:50%;
  pointer-events:none;
}
.hero-orbit::before {
  content:"";
  position:absolute;
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 28px rgba(255,79,25,.9);
}
.hero-orbit-01 {
  width:46vw;
  height:46vw;
  right:-8vw;
  top:-12vw;
  animation:orbitRotate 17s linear infinite;
}
.hero-orbit-01::before {
  left:15%;
  top:12%;
}
.hero-orbit-02 {
  width:30vw;
  height:30vw;
  right:9vw;
  top:4vw;
  border-color:rgba(255,255,255,.05);
  animation:orbitRotateReverse 12s linear infinite;
}
.hero-orbit-02::before {
  right:6%;
  bottom:28%;
  width:6px;
  height:6px;
}
.hero-glow {
  position:absolute;
  z-index:0;
  border-radius:50%;
  filter:blur(18px);
  pointer-events:none;
  will-change:transform;
}
.hero-glow-01 {
  width:44vw;
  height:44vw;
  right:-8vw;
  top:-10vw;
  background:radial-gradient(circle, rgba(255,79,25,.28), rgba(255,79,25,0) 68%);
  animation:glowFloatA 8s ease-in-out infinite alternate;
}
.hero-glow-02 {
  width:32vw;
  height:32vw;
  left:18vw;
  bottom:-17vw;
  background:radial-gradient(circle, rgba(86,115,255,.12), rgba(86,115,255,0) 68%);
  animation:glowFloatB 11s ease-in-out infinite alternate;
}
.hero-particles {
  position:absolute;
  z-index:2;
  inset:0;
  pointer-events:none;
  overflow:hidden;
}
.hero-particles i {
  position:absolute;
  display:block;
  width:3px;
  height:3px;
  border-radius:50%;
  background:rgba(255,255,255,.48);
  animation:particleFloat 7s ease-in-out infinite;
}
.hero-particles i:nth-child(1){left:8%;top:20%;animation-delay:-1s}
.hero-particles i:nth-child(2){left:21%;top:71%;animation-delay:-3s;width:5px;height:5px;opacity:.35}
.hero-particles i:nth-child(3){left:43%;top:16%;animation-delay:-5s}
.hero-particles i:nth-child(4){left:57%;top:78%;animation-delay:-2s;width:4px;height:4px}
.hero-particles i:nth-child(5){left:72%;top:34%;animation-delay:-4s}
.hero-particles i:nth-child(6){left:84%;top:67%;animation-delay:-6s;width:5px;height:5px;opacity:.3}
.hero-particles i:nth-child(7){left:92%;top:18%;animation-delay:-2.5s}
.hero-particles i:nth-child(8){left:36%;top:49%;animation-delay:-4.5s;width:2px;height:2px}

@keyframes heroEyebrowIn {
  to { opacity:1; transform:translateY(0); }
}
@keyframes heroTitleIn {
  0% { opacity:0; transform:translateY(115%) skewY(5deg); }
  100% { opacity:1; transform:translateY(0) skewY(0); }
}
@keyframes heroFadeIn {
  to { opacity:1; transform:translateY(0); }
}
@keyframes heroFadeOnly {
  to { opacity:.7; }
}
@keyframes scrollLine {
  0%,100% { transform:scaleX(.35); opacity:.35; }
  50% { transform:scaleX(1); opacity:1; }
}
@keyframes orbitRotate {
  to { transform:rotate(360deg); }
}
@keyframes orbitRotateReverse {
  to { transform:rotate(-360deg); }
}
@keyframes gridDrift {
  0% { background-position:0 0,0 0; }
  100% { background-position:0 108px,108px 0; }
}
@keyframes glowFloatA {
  0% { transform:translate3d(-3%,1%,0) scale(.96); }
  100% { transform:translate3d(5%,7%,0) scale(1.08); }
}
@keyframes glowFloatB {
  0% { transform:translate3d(0,0,0) scale(.9); }
  100% { transform:translate3d(-7%,-5%,0) scale(1.08); }
}
@keyframes particleFloat {
  0%,100% { transform:translate3d(0,0,0); opacity:.2; }
  50% { transform:translate3d(18px,-26px,0); opacity:.8; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-intro-eyebrow span,
  .hero-title-line b,
  .hero-desc,
  .hero-meta,
  .scroll-guide {
    animation:none!important;
    opacity:1!important;
    transform:none!important;
  }
  .hero-grid-motion,
  .hero-orbit,
  .hero-glow,
  .hero-particles i,
  .scroll-guide i {
    animation:none!important;
  }
}


/* =========================
   SOFT / JELLY HERO MOTION
   맑음 사이트 상담하기의 "말랑한" 인상만 참고해
   유기적인 blob / ring으로 재해석
========================= */
.hero-soft-motion {
  position:absolute;
  z-index:1;
  inset:0;
  pointer-events:none;
  overflow:hidden;
  mix-blend-mode:screen;
}

.soft-blob,
.soft-ring,
.soft-dot {
  position:absolute;
  display:block;
  will-change:transform, border-radius;
}

.soft-blob {
  filter:blur(.2px);
  opacity:.72;
}

.soft-blob-01 {
  width:280px;
  height:240px;
  right:8%;
  top:19%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,.28), transparent 19%),
    linear-gradient(135deg, rgba(255,111,55,.42), rgba(255,79,25,.08));
  border:1px solid rgba(255,151,105,.18);
  box-shadow:
    inset 18px 16px 55px rgba(255,255,255,.05),
    0 0 90px rgba(255,79,25,.09);
  animation:
    softBlobMorphA 8.5s ease-in-out infinite alternate,
    softBlobFloatA 7s ease-in-out infinite alternate;
}

.soft-blob-02 {
  width:190px;
  height:175px;
  right:28%;
  bottom:12%;
  background:
    radial-gradient(circle at 70% 25%, rgba(255,255,255,.19), transparent 20%),
    linear-gradient(145deg, rgba(94,119,255,.18), rgba(255,79,25,.13));
  border:1px solid rgba(255,255,255,.08);
  animation:
    softBlobMorphB 7.5s ease-in-out infinite alternate,
    softBlobFloatB 9s ease-in-out infinite alternate;
}

.soft-blob-03 {
  width:120px;
  height:105px;
  left:5%;
  bottom:17%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,.24), transparent 18%),
    rgba(255,79,25,.18);
  border:1px solid rgba(255,255,255,.07);
  animation:
    softBlobMorphC 6.8s ease-in-out infinite alternate,
    softBlobFloatC 8.5s ease-in-out infinite alternate;
}

.soft-ring {
  border:1px solid rgba(255,255,255,.12);
  opacity:.55;
}

.soft-ring-01 {
  width:112px;
  height:112px;
  left:11%;
  top:20%;
  border-radius:46% 54% 62% 38% / 55% 44% 56% 45%;
  animation:softRingA 7s ease-in-out infinite alternate;
}

.soft-ring-02 {
  width:72px;
  height:72px;
  right:4%;
  bottom:21%;
  border-color:rgba(255,92,35,.28);
  border-radius:60% 40% 46% 54% / 45% 57% 43% 55%;
  animation:softRingB 5.8s ease-in-out infinite alternate;
}

.soft-dot {
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 28px rgba(255,79,25,.45);
}

.soft-dot-01 {
  width:10px;
  height:10px;
  right:42%;
  top:24%;
  animation:softDotA 4.5s ease-in-out infinite;
}

.soft-dot-02 {
  width:6px;
  height:6px;
  left:28%;
  bottom:18%;
  opacity:.65;
  animation:softDotB 5.8s ease-in-out infinite;
}

@keyframes softBlobMorphA {
  0%   { border-radius:42% 58% 66% 34% / 48% 40% 60% 52%; }
  35%  { border-radius:61% 39% 47% 53% / 39% 58% 42% 61%; }
  70%  { border-radius:35% 65% 57% 43% / 59% 43% 57% 41%; }
  100% { border-radius:54% 46% 34% 66% / 44% 61% 39% 56%; }
}
@keyframes softBlobMorphB {
  0%   { border-radius:55% 45% 37% 63% / 50% 62% 38% 50%; }
  50%  { border-radius:38% 62% 58% 42% / 64% 35% 65% 36%; }
  100% { border-radius:66% 34% 44% 56% / 42% 52% 48% 58%; }
}
@keyframes softBlobMorphC {
  0%   { border-radius:48% 52% 62% 38% / 57% 38% 62% 43%; }
  100% { border-radius:63% 37% 43% 57% / 39% 61% 39% 61%; }
}

@keyframes softBlobFloatA {
  0%   { transform:translate3d(-10px,-5px,0) rotate(-5deg) scale(.96); }
  100% { transform:translate3d(34px,26px,0) rotate(8deg) scale(1.08); }
}
@keyframes softBlobFloatB {
  0%   { transform:translate3d(0,12px,0) rotate(8deg) scale(.9); }
  100% { transform:translate3d(-38px,-32px,0) rotate(-10deg) scale(1.07); }
}
@keyframes softBlobFloatC {
  0%   { transform:translate3d(-4px,0,0) rotate(-7deg) scale(.9); }
  100% { transform:translate3d(27px,-38px,0) rotate(12deg) scale(1.12); }
}

@keyframes softRingA {
  0% {
    transform:translate3d(0,0,0) rotate(0deg) scale(.9);
    border-radius:46% 54% 62% 38% / 55% 44% 56% 45%;
  }
  100% {
    transform:translate3d(25px,35px,0) rotate(115deg) scale(1.15);
    border-radius:63% 37% 41% 59% / 38% 61% 39% 62%;
  }
}
@keyframes softRingB {
  0% {
    transform:translate3d(0,0,0) rotate(0deg) scale(1);
  }
  100% {
    transform:translate3d(-26px,-30px,0) rotate(-135deg) scale(1.18);
  }
}
@keyframes softDotA {
  0%,100% { transform:translate3d(0,0,0) scale(.75); opacity:.35; }
  50% { transform:translate3d(28px,-22px,0) scale(1.35); opacity:1; }
}
@keyframes softDotB {
  0%,100% { transform:translate3d(0,0,0) scale(.7); opacity:.25; }
  50% { transform:translate3d(-22px,-31px,0) scale(1.4); opacity:.85; }
}

/* hero의 기존 grid는 말랑한 모션이 주인공이 되도록 조금 약화 */
.hero-grid-motion { opacity:.11; }
.hero-orbit { opacity:.55; }
.hero-particles { opacity:.65; }

/* 마우스가 hero에 들어오면 blob 자체가 살짝 탄성 있게 반응 */
.hero:hover .soft-blob-01 { animation-duration:7.3s, 5.8s; }
.hero:hover .soft-blob-02 { animation-duration:6.4s, 7.8s; }

@media (max-width:760px) {
  .soft-blob-01 {
    width:180px;
    height:160px;
    right:-7%;
    top:26%;
  }
  .soft-blob-02 {
    width:115px;
    height:105px;
    right:18%;
    bottom:17%;
  }
  .soft-blob-03 {
    width:82px;
    height:76px;
    left:-2%;
    bottom:25%;
  }
  .soft-ring-01 { width:76px; height:76px; left:5%; top:15%; }
  .soft-ring-02 { width:52px; height:52px; right:3%; bottom:30%; }
}

@media (prefers-reduced-motion:reduce) {
  .soft-blob,
  .soft-ring,
  .soft-dot {
    animation:none!important;
  }
}


/* =========================
   HERO TITLE CONTINUOUS GLOW
========================= */
.hero-title-line {
  position:relative;
}
.hero-title-line b {
  position:relative;
  display:inline-block;
  color:#fff;
  text-shadow:
    0 0 0 rgba(255,255,255,0),
    0 0 0 rgba(255,79,25,0);
  animation:
    heroTitleIn 1.05s cubic-bezier(.16,1,.3,1) forwards,
    titleBreath 4.8s 1.7s ease-in-out infinite;
}
.hero-title-line:nth-child(1) b {
  animation-delay:.28s, 1.7s;
}
.hero-title-line:nth-child(2) b {
  animation-delay:.42s, 1.95s;
}
.hero-title-line:nth-child(3) b {
  animation-delay:.56s, 2.2s;
}

/* INSTRUCTOR는 포인트 컬러 유지 + 더 강한 광택 */
.hero-title-line.accent b {
  color:var(--accent);
  text-shadow:
    0 0 12px rgba(255,79,25,.10),
    0 0 28px rgba(255,79,25,.08);
}

/* 글자 위를 지나가는 유리광택 */
.hero-title-line b::after {
  content:"";
  position:absolute;
  top:-18%;
  bottom:-18%;
  left:-28%;
  width:16%;
  pointer-events:none;
  opacity:0;
  transform:skewX(-18deg);
  background:linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.06) 24%,
    rgba(255,255,255,.75) 50%,
    rgba(255,255,255,.08) 76%,
    rgba(255,255,255,0) 100%
  );
  filter:blur(1px);
  animation:titleShine 5.6s 1.9s cubic-bezier(.4,0,.2,1) infinite;
}
.hero-title-line:nth-child(2) b::after {
  animation-delay:2.55s;
}
.hero-title-line:nth-child(3) b::after {
  background:linear-gradient(
    90deg,
    rgba(255,160,120,0) 0%,
    rgba(255,180,145,.10) 24%,
    rgba(255,235,220,.88) 50%,
    rgba(255,165,125,.12) 76%,
    rgba(255,160,120,0) 100%
  );
  animation-delay:3.15s;
}

/* 약하게 번지는 주변광 */
.hero-title::after {
  content:"";
  position:absolute;
  z-index:-1;
  left:-3%;
  top:12%;
  width:84%;
  height:70%;
  border-radius:50%;
  background:radial-gradient(
    ellipse at center,
    rgba(255,255,255,.035) 0%,
    rgba(255,79,25,.025) 35%,
    transparent 72%
  );
  filter:blur(28px);
  opacity:.45;
  animation:titleAura 6.5s ease-in-out infinite alternate;
  pointer-events:none;
}

@keyframes titleShine {
  0%, 10% {
    left:-30%;
    opacity:0;
  }
  16% {
    opacity:.9;
  }
  31% {
    left:112%;
    opacity:0;
  }
  100% {
    left:112%;
    opacity:0;
  }
}

@keyframes titleBreath {
  0%,100% {
    filter:brightness(1);
    text-shadow:
      0 0 0 rgba(255,255,255,0),
      0 0 0 rgba(255,79,25,0);
  }
  50% {
    filter:brightness(1.08);
    text-shadow:
      0 0 12px rgba(255,255,255,.06),
      0 0 28px rgba(255,79,25,.04);
  }
}

@keyframes titleAura {
  0% {
    transform:translate3d(-2%,1%,0) scale(.96);
    opacity:.28;
  }
  100% {
    transform:translate3d(3%,-1%,0) scale(1.06);
    opacity:.58;
  }
}

/* 너무 번쩍이지 않도록 모바일은 강도 완화 */
@media (max-width:760px) {
  .hero-title-line b::after {
    width:20%;
    opacity:.75;
  }
  .hero-title::after {
    width:96%;
    height:75%;
    opacity:.32;
  }
}

@media (prefers-reduced-motion:reduce) {
  .hero-title-line b,
  .hero-title-line b::after,
  .hero-title::after {
    animation:none!important;
  }
}


/* =========================
   HERO TITLE - EDGE LIGHT
   이전 유리광택 효과 제거
   글자 외곽을 따라 빛이 맴도는 느낌으로 변경
========================= */

.hero-title-line b::after {
  content:none !important;
}

.hero-title::after {
  opacity:.22;
}

/* 기본 글자 */
.hero-title-line b {
  position:relative;
  isolation:isolate;
  overflow:visible;
}

/*
  동일 텍스트를 한 겹 복제해 fill은 투명하게 두고,
  stroke에 밝은 외곽선을 준 뒤 glow를 천천히 변화시킵니다.
*/
.hero-title-line b::before {
  content:attr(data-text);
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  color:transparent;
  -webkit-text-fill-color:transparent;
  -webkit-text-stroke:1px rgba(255,255,255,.16);
  text-stroke:1px rgba(255,255,255,.16);
  filter:
    drop-shadow(0 0 2px rgba(255,255,255,.06))
    drop-shadow(0 0 7px rgba(255,255,255,.04));
  opacity:.75;
  animation:edgeGlowBreath 3.8s ease-in-out infinite;
}

/* INSTRUCTOR는 오렌지 외곽 */
.hero-title-line.accent b::before {
  -webkit-text-stroke:1px rgba(255,154,111,.34);
  text-stroke:1px rgba(255,154,111,.34);
  filter:
    drop-shadow(0 0 3px rgba(255,110,55,.20))
    drop-shadow(0 0 10px rgba(255,79,25,.10));
  animation:edgeGlowOrange 3.2s ease-in-out infinite;
}

/*
  타이틀 위에 작은 광원이 외곽을 스캔하는 듯한 느낌.
  mask-image를 사용해 가운데 fill은 거의 건드리지 않고
  외곽 쪽에만 빛이 퍼지게 합니다.
*/
.hero-title-line {
  --edge-pos:-28%;
}

.hero-title-line::after {
  content:"";
  position:absolute;
  z-index:4;
  top:-13%;
  bottom:-13%;
  left:var(--edge-pos);
  width:18%;
  pointer-events:none;
  opacity:0;
  transform:skewX(-14deg);
  border-radius:50%;
  background:
    radial-gradient(
      ellipse at center,
      rgba(255,255,255,.98) 0%,
      rgba(255,255,255,.58) 15%,
      rgba(255,255,255,.12) 34%,
      rgba(255,255,255,0) 68%
    );
  filter:blur(5px);
  mix-blend-mode:screen;
  animation:edgeLightTravel 5.2s cubic-bezier(.45,0,.2,1) infinite;
}

.hero-title-line:nth-child(2)::after {
  animation-delay:1.25s;
}

.hero-title-line:nth-child(3)::after {
  background:
    radial-gradient(
      ellipse at center,
      rgba(255,245,236,1) 0%,
      rgba(255,164,122,.76) 17%,
      rgba(255,79,25,.24) 38%,
      rgba(255,79,25,0) 70%
    );
  animation-delay:2.45s;
}

/* 글자 자체도 정적으로 멈춰 보이지 않도록 아주 미세한 외곽 pulse */
.hero-title-line:nth-child(1) b::before { animation-delay:0s; }
.hero-title-line:nth-child(2) b::before { animation-delay:.55s; }
.hero-title-line:nth-child(3) b::before { animation-delay:1.1s; }

@keyframes edgeLightTravel {
  0%, 5% {
    left:-24%;
    opacity:0;
  }
  13% {
    opacity:.14;
  }
  24% {
    opacity:.62;
  }
  39% {
    left:105%;
    opacity:.08;
  }
  43%, 100% {
    left:105%;
    opacity:0;
  }
}

@keyframes edgeGlowBreath {
  0%,100% {
    opacity:.42;
    -webkit-text-stroke-color:rgba(255,255,255,.11);
    filter:
      drop-shadow(0 0 1px rgba(255,255,255,.03))
      drop-shadow(0 0 4px rgba(255,255,255,.025));
  }
  48% {
    opacity:.92;
    -webkit-text-stroke-color:rgba(255,255,255,.34);
    filter:
      drop-shadow(0 0 3px rgba(255,255,255,.18))
      drop-shadow(0 0 10px rgba(255,255,255,.08));
  }
}

@keyframes edgeGlowOrange {
  0%,100% {
    opacity:.48;
    -webkit-text-stroke-color:rgba(255,130,78,.20);
    filter:
      drop-shadow(0 0 2px rgba(255,79,25,.10))
      drop-shadow(0 0 7px rgba(255,79,25,.06));
  }
  50% {
    opacity:1;
    -webkit-text-stroke-color:rgba(255,207,184,.62);
    filter:
      drop-shadow(0 0 4px rgba(255,165,120,.38))
      drop-shadow(0 0 13px rgba(255,79,25,.18));
  }
}

/* 외곽선이 살아 있도록 기존 breathing은 약하게 */
@keyframes titleBreath {
  0%,100% {
    filter:brightness(1);
  }
  50% {
    filter:brightness(1.035);
  }
}

@media (max-width:760px) {
  .hero-title-line b::before {
    -webkit-text-stroke-width:.7px;
  }
  .hero-title-line::after {
    width:24%;
    filter:blur(4px);
  }
}

@media (prefers-reduced-motion:reduce) {
  .hero-title-line b::before,
  .hero-title-line::after {
    animation:none!important;
  }
}


/* =========================
   HERO TITLE EFFECT RESET
   외곽광 / 스캔광 제거
========================= */
.hero-title-line b::before,
.hero-title-line b::after,
.hero-title-line::after,
.hero-title::after {
  content:none !important;
  display:none !important;
  animation:none !important;
}
.hero-title-line b {
  text-shadow:none !important;
  filter:none !important;
}
.hero-title-line.accent b {
  color:var(--accent);
  text-shadow:none !important;
}

/* =========================
   PROFILE POINTS - 겹침 수정
========================= */
.profile-points > div {
  grid-template-columns:minmax(120px, 180px) 1fr;
  column-gap:28px;
  align-items:center;
}
.profile-points strong {
  display:block;
  min-width:0;
  line-height:1;
  white-space:nowrap;
}
.profile-points span {
  display:block;
  min-width:0;
  line-height:1.45;
  word-break:keep-all;
}

@media (max-width:1100px) {
  .profile-points > div {
    grid-template-columns:140px 1fr;
    column-gap:22px;
  }
}
@media (max-width:760px) {
  .profile-points > div {
    grid-template-columns:1fr;
    row-gap:8px;
    align-items:start;
  }
  .profile-points strong {
    font-size:34px;
  }
}