/* ==========================================================================
   eden appworks — 홈페이지 제작 샘플 허브
   ========================================================================== */
:root{
  --bg:#12181D;
  --bg-2:#182027;
  --card:#1C262E;
  --line:rgba(255,255,255,.10);
  --ink:#EDF2F5;
  --muted:#93A4B1;
  --accent:#E0A458;
  --brand:#5FA8A0;
  --max:1180px;
  --font:'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Malgun Gothic', sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0; font-family:var(--font); background:var(--bg); color:var(--ink);
  font-size:16px; line-height:1.75; letter-spacing:-.01em; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit; text-decoration:none}
ul,ol{margin:0; padding:0; list-style:none}
h1,h2,h3,p{margin:0}
:focus-visible{outline:3px solid var(--accent); outline-offset:3px; border-radius:6px}
.skip{position:absolute; left:-9999px; top:0; background:var(--accent); color:#12181D; padding:12px 18px; z-index:99}
.skip:focus{left:0}
.wrap{width:100%; max-width:var(--max); margin:0 auto; padding:0 24px}

.eyebrow{
  font-size:12.5px; font-weight:700; letter-spacing:.18em; color:var(--accent);
  margin-bottom:16px; text-transform:uppercase;
}

/* ---------- header ---------- */
.top{border-bottom:1px solid var(--line); position:sticky; top:0; z-index:50;
     background:rgba(18,24,29,.86); backdrop-filter:blur(10px)}
.top__in{display:flex; align-items:baseline; gap:12px; height:66px}
.brand{font-weight:900; font-size:18px; letter-spacing:-.02em}
.brand__sub{font-size:13.5px; color:var(--muted)}

/* ---------- lead ---------- */
.lead{padding:92px 0 62px; background:
  radial-gradient(900px 420px at 78% -10%, rgba(95,168,160,.16) 0%, transparent 62%), var(--bg)}
.lead h1{font-size:clamp(30px,4.6vw,52px); font-weight:900; line-height:1.28; letter-spacing:-.045em; margin-bottom:22px}
.lead h1 em{font-style:normal; color:var(--accent)}
.lead__desc{font-size:17px; color:var(--muted); max-width:44em; margin-bottom:28px}
.tags{display:flex; flex-wrap:wrap; gap:9px}
.tags li{
  font-size:13px; font-weight:600; color:var(--ink); opacity:.85;
  border:1px solid var(--line); border-radius:999px; padding:7px 15px; background:rgba(255,255,255,.03);
}

/* ---------- works ---------- */
.works{padding:26px 0 90px}
.works__grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px}
.work{background:var(--card); border:1px solid var(--line); border-radius:20px; overflow:hidden;
      transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease}
.work:hover{transform:translateY(-6px); border-color:rgba(224,164,88,.55);
            box-shadow:0 18px 44px rgba(0,0,0,.34)}
.work__link{display:flex; flex-direction:column; height:100%}
.work__thumb{position:relative; overflow:hidden; background:#0E1418}
.work__thumb img{width:100%; aspect-ratio:16/10; object-fit:cover; object-position:top center;
                 transition:transform .5s ease}
.work:hover .work__thumb img{transform:scale(1.04)}
.work__go{
  position:absolute; right:14px; bottom:14px; font-size:12.5px; font-weight:700;
  background:var(--accent); color:#12181D; padding:8px 15px; border-radius:999px;
  opacity:0; transform:translateY(8px); transition:opacity .22s, transform .22s;
}
.work:hover .work__go{opacity:1; transform:none}
.work__body{padding:24px 24px 28px; display:flex; flex-direction:column; flex:1}
.work__cat{font-size:12.5px; font-weight:700; color:var(--brand); letter-spacing:.02em; margin-bottom:6px}
.work__title{font-size:21px; font-weight:900; letter-spacing:-.035em; margin-bottom:11px}
.work__desc{font-size:14.5px; color:var(--muted); margin-bottom:18px}
.work__spec{margin-top:auto; display:flex; flex-direction:column; gap:7px;
            border-top:1px solid var(--line); padding-top:16px}
.work__spec li{font-size:13.5px; color:var(--ink); opacity:.8; padding-left:16px; position:relative}
.work__spec li::before{content:''; position:absolute; left:2px; top:.65em; width:5px; height:5px;
                       border-radius:50%; background:var(--brand)}

/* ---------- how ---------- */
.how{padding:82px 0; background:var(--bg-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.how__title{font-size:clamp(24px,3vw,34px); font-weight:900; letter-spacing:-.04em; margin-bottom:40px}
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:22px}
.steps li{background:rgba(255,255,255,.04); border:1px solid var(--line); border-radius:16px; padding:26px 22px}
.steps span{display:grid; place-items:center; width:34px; height:34px; border-radius:11px;
            background:var(--accent); color:#12181D; font-weight:900; font-size:15px; margin-bottom:14px}
.steps h3{font-size:16.5px; font-weight:800; letter-spacing:-.03em; margin-bottom:8px}
.steps p{font-size:14px; color:var(--muted)}

/* ---------- cta ---------- */
.cta{padding:88px 0 96px; text-align:center}
.cta h2{font-size:clamp(24px,3.2vw,36px); font-weight:900; letter-spacing:-.04em; margin-bottom:12px}
.cta p{font-size:16px; color:var(--muted); margin-bottom:28px}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:16px 36px; border-radius:999px; font-weight:800; font-size:16px;
  background:var(--accent); color:#12181D; transition:transform .18s, filter .18s;
}
.btn:hover{transform:translateY(-2px); filter:brightness(1.06)}
.cta__note{font-size:12.5px; color:var(--muted); opacity:.7; margin-top:26px}

/* ---------- footer ---------- */
.bot{border-top:1px solid var(--line); padding:26px 0; font-size:13px; color:var(--muted)}

/* ---------- responsive ---------- */
@media (max-width:1024px){
  .works__grid{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:680px){
  .wrap{padding:0 18px}
  .lead{padding:64px 0 46px}
  .works__grid{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .work__go{opacity:1; transform:none}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important; scroll-behavior:auto !important}
}

/* ==========================================================================
   문의 폼 · 토스트
   ========================================================================== */
.wrap--form{max-width:720px}
.cta{text-align:center}
.cta__lead{font-size:16px; color:var(--muted); margin-bottom:34px; line-height:1.8}

/* ---------- 폼 ---------- */
.cform{
  background:var(--card); border:1px solid var(--line); border-radius:20px;
  padding:34px 32px 32px; text-align:left;
}
.cform__row{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.cfield{display:flex; flex-direction:column; gap:8px; margin-bottom:18px}
.cfield label{font-size:13.5px; font-weight:700; color:var(--ink); opacity:.9}
.cfield label span{color:var(--accent)}
.cfield input,.cfield select,.cfield textarea{
  background:rgba(255,255,255,.04); border:1.5px solid var(--line); border-radius:11px;
  padding:13px 15px; font-size:15.5px; color:var(--ink); font-family:inherit;
  transition:border-color .16s, background .16s, box-shadow .16s; width:100%;
}
.cfield input::placeholder,.cfield textarea::placeholder{color:rgba(147,164,177,.62)}
.cfield select{appearance:none; cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 20px) center, calc(100% - 14px) center;
  background-size:6px 6px, 6px 6px; background-repeat:no-repeat;
}
.cfield select option{background:#1C262E; color:var(--ink)}
.cfield input:focus,.cfield select:focus,.cfield textarea:focus{
  outline:none; border-color:var(--accent); background:rgba(255,255,255,.07);
  box-shadow:0 0 0 3px rgba(224,164,88,.14);
}
.cfield textarea{resize:vertical; min-height:110px; line-height:1.7}

.ccheck{display:flex; gap:11px; align-items:flex-start; font-size:13px; color:var(--muted);
  line-height:1.7; margin:4px 0 24px; cursor:pointer}
.ccheck input{width:17px; height:17px; margin-top:4px; accent-color:var(--accent); flex-shrink:0; cursor:pointer}
.ccheck a{color:var(--accent); border-bottom:1px solid rgba(224,164,88,.4); white-space:nowrap}

.btn--full{width:100%}
.btn:disabled{opacity:.55; cursor:not-allowed; transform:none}
.btn--ghostline{
  background:transparent; color:var(--ink); border:1.5px solid var(--line);
  padding:13px 22px; font-size:14.5px; font-weight:700; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
  transition:border-color .16s, background .16s, transform .16s;
}
.btn--ghostline:hover{border-color:var(--accent); background:rgba(224,164,88,.08); transform:translateY(-2px)}

.cform__msg{margin-top:16px; font-size:14.5px; font-weight:600; text-align:center; min-height:1.5em; line-height:1.7}
.cform__msg.is-ok{color:#7FD0A6}
.cform__msg.is-err{color:#F0A0A0}
.cform__fallback{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:18px}

/* ---------- 메일 주소 버튼 ---------- */
.cta__mail{font-size:14.5px; color:var(--muted); margin-top:26px}
.mailbtn{
  background:none; border:0; padding:0 2px; font:inherit; cursor:pointer;
  color:var(--accent); font-weight:700; border-bottom:1px dashed rgba(224,164,88,.55);
  transition:border-bottom-color .16s;
}
.mailbtn:hover{border-bottom-color:var(--accent)}
.mailbtn.is-revealed{border-bottom-style:solid; letter-spacing:-.01em}

/* ---------- 토스트 ---------- */
.toast{
  position:fixed; left:50%; bottom:28px; transform:translate(-50%, 16px);
  background:#0C1116; color:var(--ink); border:1px solid var(--line);
  border-radius:999px; padding:13px 24px; font-size:14px; font-weight:600;
  box-shadow:0 12px 34px rgba(0,0,0,.44); z-index:200;
  opacity:0; visibility:hidden; transition:opacity .24s ease, transform .24s ease, visibility .24s;
  max-width:calc(100vw - 32px); text-align:center;
}
.toast.is-on{opacity:1; visibility:visible; transform:translate(-50%, 0)}
.toast--ok{border-color:rgba(127,208,166,.5); color:#CFF0DF}

/* ---------- 등장 효과 ---------- */
.reveal{opacity:0; transform:translateY(20px); transition:opacity .55s ease, transform .55s ease}
.reveal.is-in{opacity:1; transform:none}

@media (max-width:680px){
  .cform{padding:26px 20px 24px}
  .cform__row{grid-template-columns:1fr; gap:0}
  .cform__fallback .btn--ghostline{width:100%}
}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1; transform:none}
  *{transition:none !important}
}

/* ---------- 메일 줄 보강 ---------- */
.cta__mail{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px}
.cta__mail-sub{flex-basis:100%; font-size:12.5px; color:var(--muted); opacity:.72; margin-top:-2px}
.mailbtn{
  color:var(--accent); font-weight:700; border-bottom:1px solid rgba(224,164,88,.5);
  transition:border-bottom-color .16s; cursor:pointer;
}
.mailbtn:hover{border-bottom-color:var(--accent)}
.copybtn{
  background:transparent; border:1px solid var(--line); color:var(--muted);
  font:inherit; font-size:12.5px; font-weight:600; padding:5px 12px; border-radius:999px;
  cursor:pointer; transition:border-color .16s, color .16s;
}
.copybtn:hover{border-color:var(--accent); color:var(--ink)}
.cform__hint{margin-top:12px; font-size:12.5px; color:var(--muted); opacity:.8; text-align:center}