@charset "utf-8";

/* =========================================================
   main.css : 히어로, 소개, 작업, 디자인, 연락처
   ========================================================= */

/* ---------- 공통 측정 칩 (히어로·작업 이미지 너비 표시) ---------- */
.measure_chip,
.shot_label {display: inline-flex; align-items: center; gap: 3px; padding: 3px 7px; border-radius: 3px; background: var(--select); color: var(--select-ink); font-family: var(--font-kr); font-size: 12px; font-weight: 600; line-height: 1.4; font-variant-numeric: tabular-nums; white-space: nowrap;}
.measure_chip b {font-weight: 600;}

/* ---------- hero ---------- */
.hero {padding: 112px 0 136px;}
.hero_role {margin-bottom: 28px; font-size: 18px; font-weight: 500; color: var(--muted);}

.select_frame {position: relative; display: inline-block; max-width: 100%; padding: 0.02em 0.06em 0.06em;}
.select_frame::before {content: ""; position: absolute; inset: 0; border: 1.5px solid var(--select); pointer-events: none; animation: frame_draw .7s cubic-bezier(.6,0,.2,1) .15s both;}

.hero_name {font-family: var(--font-display); font-size: clamp(54px, 12.4vw, 184px); font-weight: 800; line-height: .94; letter-spacing: -0.025em; white-space: nowrap;}

.handle {position: absolute; width: 9px; height: 9px; background: var(--surface); border: 1.5px solid var(--select); animation: handle_pop .25s ease-out .8s both;}
.handle.tl {top: -4px; left: -4px;}
.handle.tr {top: -4px; right: -4px;}
.handle.bl {bottom: -4px; left: -4px;}
.handle.br {bottom: -4px; right: -4px;}

.measure_chip {position: absolute; top: 100%; left: 50%; transform: translate(-50%, 10px); animation: chip_in .3s ease-out 1s both;}

.hero_lead {max-width: 42em; margin-top: 64px; font-size: 21px; line-height: 1.65;}
.hero_actions {display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px;}

@keyframes frame_draw {
  from {clip-path: inset(0 100% 0 0);}
  to {clip-path: inset(0 0 0 0);}
}
@keyframes handle_pop {
  from {transform: scale(0);}
  to {transform: scale(1);}
}
@keyframes chip_in {
  from {opacity: 0; transform: translate(-50%, 2px);}
  to {opacity: 1; transform: translate(-50%, 10px);}
}

/* ---------- 섹션 머리 ---------- */
.split {display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 48px;}
.section_title {font-size: clamp(26px, 3vw, 34px); font-weight: 700; letter-spacing: -0.01em;}
.section_head.row {display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 24px;}
.section_note {font-size: 14px; color: var(--muted);}

/* ---------- about ---------- */
.about{--about-transition-bg:#fff;--ink:#16202A;--muted:#5A6774;--line:#D8DFE6;background-color:var(--about-transition-bg);color:var(--ink);color-scheme:light;}
.about_text {font-size: 20px; line-height: 1.8; word-break: break-all;}
.about_group {margin-top: 64px;}
.group_title {margin-bottom: 8px; font-size: 15px; font-weight: 600; color: var(--muted);}

.career_item {display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 24px; padding: 22px 0; border-top: 1px solid var(--line);}
.career_period {font-size: 15px; color: var(--muted); font-variant-numeric: tabular-nums;}
.career_company {display: inline; font-size: 18px; font-weight: 700;}
.career_role {margin-left: 10px; font-size: 15px; color: var(--muted);}
.career_desc {margin-top: 6px; font-size: 16px;}

.skill_row {display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 24px; padding: 14px 0; border-top: 1px solid var(--line);}
.skill_row dt {font-size: 15px; font-weight: 600;}
.skill_row dd {font-size: 16px;}

/* ---------- work ---------- */
.work_item {display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; align-items: start; padding: 72px 0; border-top: 1px solid var(--line);}
.work_item:first-of-type {border-top: none; padding-top: 32px;}
.work_item:last-of-type {padding-bottom: 0;}

.work_media {position: relative; padding: 0 9% 9% 0;}
.shot {position: relative;}
.shot img {width: 100%; background: var(--surface); border: 1px solid var(--line);}
.shot_pc img {border-radius: 6px;}
.shot_mo {position: absolute; right: 0; bottom: 0; width: 23%;}
.shot_mo img {border-radius: 12px; box-shadow: 0 0 0 6px var(--paper);}
.shot_label {position: absolute; top: -11px; left: 12px;}
.shot_mo .shot_label {left: 8px;}

.work_title {font-size: 26px; letter-spacing: -0.01em;}
.work_summary {margin-top: 10px; font-size: 17px; color: var(--muted); word-break: break-all;}

.work_meta {margin-top: 28px; border-top: 1px solid var(--line);}
.work_meta > div {display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 15px;}
.work_meta dt {color: var(--muted);}

.point_title {margin-top: 28px; font-size: 15px; font-weight: 600; color: var(--muted);}
.point_list {margin-top: 10px;}
.point_list li {position: relative; padding-left: 18px; font-size: 16px; line-height: 1.65;}
.point_list li + li {margin-top: 8px;}
.point_list li::before {content: ""; position: absolute; top: .62em; left: 1px; width: 7px; height: 7px; background: var(--surface); border: 1.5px solid var(--select);}

.work_links {display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px;}

/* ---------- design ---------- */
.design_grid {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 32px; margin-top: 32px;}
.design_link {display: block;}
.design_figure {position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; transition: border-color .2s;}
.design_figure img {width: 100%; height: 100%; object-fit: cover; object-position: top center;}
.design_figure.is_empty {border-style: dashed;}
.design_figure.is_empty img {display: none;}
.design_figure.is_empty::after {content: attr(data-empty); position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 20px; text-align: center; font-size: 14px; color: var(--muted);}
.design_info {margin-top: 16px;}
.design_title {font-size: 19px; transition: color .2s;}
.design_desc {margin-top: 4px; font-size: 15px; color: var(--muted);}
.design_link:hover .design_figure {border-color: var(--select);}
.design_link:hover .design_title {color: var(--select);}

/* ---------- contact ---------- */
.contact_text {max-width: 30em; font-size: 20px; line-height: 1.75;}
.contact_mail {display: flex; flex-wrap: wrap; align-items: center; gap: 16px 20px; margin: 32px 0 48px;}
.mail_link {font-family: var(--font-display); font-size: clamp(28px, 4.6vw, 52px); font-weight: 600; letter-spacing: -0.01em; line-height: 1.15; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 8px; text-decoration-color: var(--line); overflow-wrap: anywhere; transition: text-decoration-color .2s, color .2s;}
.mail_link:hover {color: var(--select); text-decoration-color: var(--select);}

.contact_list > div {display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 24px; padding: 14px 0; border-top: 1px solid var(--line); font-size: 16px;}
.contact_list > div:last-child {border-bottom: 1px solid var(--line);}
.contact_list dt {font-weight: 600;}
.contact_list a {text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--line);}
.contact_list a:hover {color: var(--select); text-decoration-color: var(--select);}

/* ---------- responsive ---------- */
@media screen and (max-width: 1024px) {
  .split {grid-template-columns: minmax(0, 1fr); gap: 28px;}
  .work_item {grid-template-columns: minmax(0, 1fr); gap: 40px;}
  .work_body {max-width: 640px;}
}

@media screen and (max-width: 768px) {
  .hero {padding: 64px 0 88px;}
  .hero_role {margin-bottom: 20px; font-size: 16px;}
  .hero_lead {margin-top: 52px; font-size: 18px;}
  .hero_actions .btn {flex: 1 1 auto;}

  .section_head.row {flex-direction: column; align-items: flex-start; gap: 6px;}

  .about_text, .contact_text {font-size: 18px;}
  .about_group {margin-top: 48px;}
  .career_item {grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 18px 0;}
  .career_role {display: block; margin: 2px 0 0;}
  .skill_row, .contact_list > div {grid-template-columns: 84px minmax(0, 1fr); gap: 16px;}

  .work_item {padding: 56px 0; gap: 32px;}
  .work_title {font-size: 22px;}
  .shot_mo {width: 27%;}
  .shot_mo img {border-radius: 8px; box-shadow: 0 0 0 4px var(--paper);}
  .work_links .btn {flex: 1 1 auto;}

  .design_grid {grid-template-columns: minmax(0, 1fr); gap: 40px;}
  .mail_link {text-underline-offset: 6px;}
}

/* Animated mesh gradient hero */
.hero{--hero-blend-space:220px;position:relative;width:100%;height:calc(100vh + var(--hero-blend-space));min-height:calc(760px + var(--hero-blend-space));max-height:calc(1080px + var(--hero-blend-space));padding:0 0 var(--hero-blend-space);overflow:hidden;isolation:isolate;background:#7293E6;}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:var(--hero-blend-space);z-index:3;pointer-events:none;background:linear-gradient(to bottom,transparent 0%,var(--about-transition-bg,#fff) 100%);}
.hero + .about{border-top:0;}
.gradient-bg{position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(120deg,#7293E6,#B6A7FF,#FFE38A);}
.gradient-bg canvas{display:block;width:100%;height:100%;}
.hero-shade{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;background:linear-gradient(to bottom,rgb(13 19 35 / 10%) 0%,rgb(13 19 35 / 45%) 48%,rgb(13 19 35 / 95%) 100%);will-change:opacity;}
@media(prefers-reduced-motion:reduce){.hero-shade{display:none;will-change:auto;}}
.hero-content{position:relative;z-index:2;width:90%;height:100%;margin:30px auto 0;padding-top:100px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:30px;}
.eyebrow{font-family:var(--font-display);color:#0030E7;font-size:14px;font-weight:700;letter-spacing:3px;}
.hero-title{font-family:var(--font-kr);font-size:clamp(90px,9.1vw,174px);line-height:.91;font-weight:900;letter-spacing:-.085em;color:#171717;}
.hero-title span{font-family:var(--font-display);display:block;}
.hero-title .accent{color:#0030E7;}
.hero-desc{font-size:20px;line-height:1.8;font-weight:500;letter-spacing:-.5px;word-break:keep-all;color:#171717;}
.hero-bottom{font-family:var(--font-display);width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px;}
.hero-tags{--tag-gap:16px;display:flex;flex-wrap:wrap;align-items:center;gap:var(--tag-gap);font-size:12px;letter-spacing:1.5px;color:#fff;font-weight:600;text-shadow:0 0 3px rgb(0 0 0 / 65%),0 2px 8px rgb(0 0 0 / 35%);}
.hero-tags li{display:flex;align-items:center;gap:var(--tag-gap);}
.hero-tags li+li::before{content:"·";}
.scroll{display:flex;flex-direction:column;align-items:center;gap:13px;color:#0030E7;font-size:11px;font-weight:700;letter-spacing:2px;white-space:nowrap;transition:color .3s ease;animation:scroll-float 2s ease-in-out infinite;will-change:transform;}
.scroll:hover{color:#fff;}
.scroll-label{writing-mode:vertical-rl;text-orientation:mixed;}
.scroll-line{position:relative;display:block;width:1px;height:55px;flex-shrink:0;overflow:hidden;background:currentColor;}
.scroll-line::before{content:"";position:absolute;inset:0;background:currentColor;}
@keyframes scroll-float{0%,100%{transform:translateY(0);}50%{transform:translateY(10px);}}
@media(prefers-reduced-motion:reduce){.scroll{animation:none;transition:none;}}
@media(max-width:1100px){.hero-title{font-size:clamp(76px,10vw,120px);}}
@media(max-width:768px){.hero{--hero-blend-space:140px;min-height:calc(720px + var(--hero-blend-space));}.hero-content{width:88%;padding-top:110px;padding-bottom:80px;}.eyebrow{font-size:11px;letter-spacing:2px;}.hero-title{font-size:clamp(55px,12vw,92px);letter-spacing:-.075em;}.hero-desc{font-size:15px;}.hero-tags{--tag-gap:12px;font-size:9px;}.scroll{font-size:9px;}}
@media(max-width:480px){.hero-title{font-size:clamp(42px,11.4vw,60px);}.hero-tags{max-width:65%;line-height:1.5;}}

/* Project archive */
.archive-list{list-style:none;margin:32px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;}
.archive-item{min-width:0;overflow:hidden;border:1px solid var(--line);border-radius:12px;background:var(--surface);}
.archive-item[hidden]{display:none;}
.archive-thumb{aspect-ratio:16/10;overflow:hidden;background:#e9edf8;border-bottom:1px solid var(--line);}
.archive-thumb img{display:block;width:100%;height:100%;object-fit:cover;object-position:top;}
.archive-content{padding:24px;}
.archive-content h3{font-size:18px;line-height:1.5;word-break:keep-all;overflow-wrap:anywhere;}
.archive-content dl{margin-top:20px;display:grid;gap:10px;font-size:13px;}
.archive-content dl>div{display:grid;grid-template-columns:60px minmax(0,1fr);gap:10px;}
.archive-content dt{color:var(--muted);}
.archive-content dd{word-break:keep-all;overflow-wrap:anywhere;}
.archive-actions{margin-top:36px;text-align:center;}
.archive-more[hidden]{display:none;}
.archive-progress{margin-top:12px;font-size:13px;color:var(--muted);}
@media(max-width:1024px){.archive-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;}}
@media(max-width:600px){.archive-list{grid-template-columns:1fr;}.archive-content{padding:20px;}}
/* Archive destinations and image previews */
.archive-open{display:block;width:100%;text-align:left;}
.archive-open:focus-visible,.archive-content h3 a:focus-visible{outline:2px solid var(--select);outline-offset:-2px;}
.archive-content h3 a:hover{color:var(--select);}
.archive-card-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;}
.archive-card-actions .btn{min-height:40px;padding:0 14px;font-size:13px;}
.archive-preview{width:90vw;max-width:1200px;height:90dvh;max-height:90dvh;margin:auto;padding:0;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);overflow:hidden;}
.archive-preview::backdrop{background:rgb(15 21 27 / 65%);}
.archive-preview-header{height:64px;display:flex;align-items:center;gap:16px;padding:12px 20px;border-bottom:1px solid var(--line);}
.archive-preview-header h2{font-size:17px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.archive-preview-close{margin-left:auto;flex-shrink:0;width:40px;height:40px;font-size:28px;}
.archive-preview-body{height:calc(100% - 64px);overflow:auto;}
.archive-preview-image{display:block;width:100%;height:auto;}
.archive-preview-image[hidden]{display:none;}
.archive-preview-message:not(:empty){padding:40px 24px;text-align:center;line-height:1.8;}
@media(max-width:600px){.archive-preview{width:94vw;}.archive-preview-header{padding:10px 14px;}.archive-preview-header h2{font-size:14px;}}

/* Six reusable thumbnail compositions; the original screens stay unmodified. */
.mockup{position:relative;isolation:isolate;background:#edf1f6;}
.mockup-backdrop{position:absolute;inset:0;z-index:-1;}
.mockup-screen{position:absolute;display:block;left:9%;top:13%;width:82%;height:74%;border-radius:6px;background:#fff;box-shadow:0 12px 24px #14213b30;overflow:hidden;}
.mockup-screen>img{width:100%;height:100%;object-fit:cover;object-position:top;}
.mockup-phone{position:absolute;display:block;width:19%;height:62%;right:7%;bottom:8%;padding:4px;border-radius:10px;background:#20242a;box-shadow:0 8px 16px #0004;overflow:hidden;}
.mockup-phone img{width:100%;height:100%;object-fit:cover;object-position:top;border-radius:7px;}
.mockup-pending{position:absolute;left:0;right:0;bottom:4%;text-align:center;font-size:11px;color:#59677a;}
.mockup--browser .mockup-screen{padding-top:14px;}
.mockup--browser .mockup-screen::before{content:'● ● ●';position:absolute;top:0;left:0;right:0;height:14px;padding-left:8px;text-align:left;background:#f6f7fa;color:#b8c1d0;font-size:7px;line-height:14px;letter-spacing:1px;}
.mockup--browser .mockup-phone{display:none;}
.mockup--devices{background:#e8f0f0;}
.mockup--devices .mockup-screen{left:9%;top:12%;width:75%;height:65%;border:5px solid #25282c;border-bottom:14px solid #cbd0d4;border-radius:7px;overflow:visible;}
.mockup--devices .mockup-screen img{border-radius:2px;}
.mockup--devices .mockup-screen::after{content:'';position:absolute;left:36%;bottom:-20%;width:28%;height:17%;background:linear-gradient(#a4aab0,#d8dcdf);clip-path:polygon(24% 0,76% 0,88% 80%,100% 90%,100% 100%,0 100%,0 90%,12% 80%);}
.mockup--monitor{background:#eef0f3;}
.mockup--monitor .mockup-screen{left:13%;top:10%;width:74%;height:67%;border:6px solid #282b30;border-bottom:16px solid #cbd0d4;overflow:visible;}
.mockup--monitor .mockup-screen::after{content:'';position:absolute;left:32%;bottom:-24%;width:36%;height:20%;background:linear-gradient(#a7abb0,#dddfe2);clip-path:polygon(30% 0,70% 0,80% 75%,100% 90%,100% 100%,0 100%,0 90%,20% 75%);}
.mockup--monitor .mockup-phone{display:none;}
.mockup--floating{background:#dce5f4;}
.mockup--floating .mockup-screen{left:11%;top:13%;width:76%;height:73%;transform:perspective(900px) rotateY(-9deg) rotateX(3deg);box-shadow:14px 18px 25px #1a2c5040;}
.mockup--floating .mockup-phone{right:6%;bottom:7%;width:18%;height:58%;}
.mockup--layered{background:#071321;}
.mockup--layered .mockup-backdrop{background:linear-gradient(#061322ba,#061322d9),var(--mockup-image) center/cover;filter:blur(2px);}
.mockup--layered .mockup-screen{left:10%;top:14%;width:80%;height:72%;box-shadow:0 14px 26px #0009;border:1px solid #ffffff26;}
.mockup--layered .mockup-phone{display:none;}
.mockup--layered .mockup-pending{color:#cbd5e1;}
.mockup--split{background:#f2eee9;}
.mockup--split .mockup-screen{left:6%;top:16%;width:73%;height:68%;padding-top:10px;}
.mockup--split .mockup-screen::before{content:'';position:absolute;left:0;right:0;top:0;height:10px;background:#d8d7d4;}
.mockup--split .mockup-phone{right:6%;bottom:7%;height:70%;width:22%;}

/* Finished three-device mockup images do not need additional CSS device frames. */
.mockup--rendered-devices{background:#eef3f7;}
.mockup--rendered-devices>img{width:100%;height:100%;object-fit:cover;object-position:center;}

/* Fill only the uploaded MS Industry and Hiox thumbnail cards. */
.mockup--cover>img{object-fit:cover;}

/* Keep the thumbnail frame fixed while gently enlarging its images. */
.archive-thumb img{transition:transform .35s ease;}
@media(hover:hover) and (pointer:fine){.archive-item:hover .archive-thumb img{transform:scale(1.04);}}
@media(prefers-reduced-motion:reduce){.archive-thumb img{transition:none;}.archive-item:hover .archive-thumb img{transform:none;}}