/* 시안 탐색 도구를 제외한 라라곤 메인 배치. */
.local-main .site-header{top:0}
.local-main .hero{height:max(840px,100svh)}
.local-main .motion-control{border:1px solid #3b5469;border-radius:20px;padding:7px 13px;background:transparent;font-size:10px;color:#a8c5d8;white-space:nowrap}
.local-main .motion-control:hover{border-color:#72dce6;color:#d5f7ff}
@media(min-width:701px) and (max-height:800px){.local-main:not(.embedded) .hero{height:max(640px,100svh)}}
@media(max-width:700px){.local-main .hero{height:820px}.local-main footer{gap:18px}}

/* 개인의 작업과 판단을 앞에 놓는 포트폴리오 구성. */
.portfolio-home .hero-intro{color:#a4d5e9;letter-spacing:.03em;font-size:16px}
.portfolio-home .hero-subtitle{font-weight:450}
.portfolio-home .hero-description{max-width:560px;margin:0 auto;color:#b9cbd8;text-shadow:0 2px 12px #03070f}
.hero-actions{display:flex;justify-content:center;gap:10px;margin-top:22px;pointer-events:auto}
.hero-actions a{display:flex;gap:22px;align-items:center;padding:11px 20px;border:1px solid #9bbefc3d;border-radius:5px;background:#0b192cce;backdrop-filter:blur(12px);font-size:12px;color:#dceeff}
.hero-actions a:first-child{background:#b8e8ef;color:#0a2338;border-color:transparent;font-weight:650}
.hero-actions a:hover span{transform:translate(2px,2px)}
.hero-actions span{transition:transform .2s}
.portfolio-projects{padding:90px 0;border-top:1px solid #4c718226;background:radial-gradient(ellipse at 85% 25%,#102d4344,transparent 45%),#060a10}
.portfolio-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:34px}
.portfolio-heading h2{font-size:clamp(34px,3.5vw,48px);margin-bottom:0}
.portfolio-more-row{display:flex;align-items:center;justify-content:center;gap:28px;margin-top:42px}
.portfolio-more-row::before,.portfolio-more-row::after{content:"";height:1px;flex:1;max-width:200px;background:linear-gradient(90deg,transparent,#6f86e84d)}
.portfolio-more-row::after{transform:rotate(180deg)}
.portfolio-more{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:space-between;gap:38px;width:340px;max-width:100%;min-height:76px;padding:14px 17px 14px 30px;border:1px solid #b9dfff;border-radius:999px;background:linear-gradient(115deg,#aab6ff 0%,#bcecf3 52%,#b0c7ff 100%);background-size:200% 100%;color:#10233b;box-shadow:0 6px 28px #6f86e821,inset 0 1px 0 #ffffff80;transition:transform .25s,box-shadow .3s,background-position .4s}
.portfolio-more::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,transparent 25%,#ffffffaa 50%,transparent 75%);transform:translateX(-140%) skewX(-20deg);transition:transform .65s}
.portfolio-more__label{font-size:18px;font-weight:650;letter-spacing:-.025em}
.portfolio-more__icon{display:grid;place-items:center;flex-shrink:0;width:46px;height:46px;border:1px solid #ffffff42;border-radius:50%;background:#132945;color:#d9f8ff;font-size:27px;line-height:1;transition:transform .3s,background-color .3s}
.portfolio-more:is(:hover,:focus-visible){transform:translateY(-4px);background-position:100% 0;box-shadow:0 12px 40px #6f86e845,0 0 0 5px #8ebaff0d}
.portfolio-more:is(:hover,:focus-visible)::before{transform:translateX(140%) skewX(-20deg)}
.portfolio-more:is(:hover,:focus-visible) .portfolio-more__icon{transform:rotate(45deg);background:#28416a}
.portfolio-more:active{transform:translateY(-1px) scale(.98);box-shadow:0 3px 14px #6f86e82b}
.motion-paused .portfolio-more,.motion-paused .portfolio-more .portfolio-more__icon{transition:none;transform:none}
.motion-paused .portfolio-more::before{display:none}
.portfolio-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.portfolio-card{display:flex;flex-direction:column;min-width:0;border:1px solid #263e52;border-radius:10px;overflow:hidden;background:#0a1421;transition:border-color .25s,transform .25s}
.portfolio-card:hover{border-color:#6896bc;transform:translateY(-4px)}
.portfolio-card:focus-visible,.portfolio-more:focus-visible{outline:2px solid #a6e4f1;outline-offset:5px}
.portfolio-card__media{--media-size:224px;--media-inset:40px;height:var(--media-size);display:grid;place-items:center;padding:20px;position:relative;background:radial-gradient(ellipse at 50% 50%,#1a354d,#0b1524);border-bottom:1px solid #253c50;overflow:hidden}
.portfolio-card__media>img{max-width:100%;max-height:calc(var(--media-size) - var(--media-inset));width:auto;height:auto;object-fit:contain;border-radius:3px;box-shadow:0 12px 30px #0005}
.portfolio-card__body{padding:23px 24px 25px}
.portfolio-card h3{display:flex;justify-content:space-between;gap:14px;font-size:23px;line-height:1.3;font-weight:600;margin:0 0 12px;overflow-wrap:anywhere}
.portfolio-card h3>span{font-size:18px;color:#a4cddd;font-weight:400}
.portfolio-card__summary{font-size:13px;line-height:1.8;color:#aac1d0;margin:0;word-break:keep-all;overflow-wrap:break-word}
.portfolio-diagram{display:flex;flex-direction:column;align-items:center;gap:23px;width:100%;color:#b7cbed}
.portfolio-diagram>span{font-size:30px;letter-spacing:-.035em;font-weight:500}
.portfolio-diagram>div{display:flex;align-items:center;gap:9px;justify-content:center}
.portfolio-diagram i{font-size:10px;font-style:normal;border:1px solid #5876a5;padding:10px;border-radius:5px;background:#132a4288;color:#b5e0eb;white-space:nowrap}
.portfolio-diagram b{font-size:11px;font-weight:400;color:#78b8cd}
.portfolio-diagram small{font-size:9px;color:#7c9cb9}
@media(prefers-reduced-motion:reduce){.portfolio-card,.portfolio-more,.portfolio-more::before,.portfolio-more__icon{transition:none}.portfolio-card:hover,.portfolio-more:is(:hover,:focus-visible,:active),.portfolio-more:is(:hover,:focus-visible) .portfolio-more__icon{transform:none}.portfolio-more::before{display:none}}
.portfolio-home .services{min-height:760px}
.portfolio-home .section-heading h2{font-size:clamp(36px,4.4vw,58px);line-height:1.3}
.portfolio-home .services-detail h3{font-size:29px;line-height:1.4}
.portfolio-home .services-detail small{line-height:1.8}
.portfolio-home .about{padding:110px 0 120px;border-top:1px solid #25475d77}
.portfolio-home .about-layout{grid-template-columns:1fr 3.4fr .9fr;gap:35px}
.portfolio-home .about h2{font-size:clamp(32px,3.2vw,46px);line-height:1.4;margin-bottom:28px}
.portfolio-home .about .developer-name{font-size:19px;color:#edf8ff;font-weight:600;margin-bottom:34px}
.developer-name>span{display:block;font-size:12px;color:#8fadc3;font-weight:400;margin-top:6px}
.portfolio-home .about p{line-height:1.95}
.name-note{border-top:1px solid #30495d;margin-top:32px;padding-top:27px}
.name-note>strong{font-size:17px;font-weight:500;color:#c5d8ee}
.portfolio-home .name-note p{font-size:13px;color:#8ca5ba;margin:11px 0 0}
@media(min-width:701px) and (max-height:800px){.portfolio-home .hero-actions{margin-top:16px}.portfolio-home .hero-actions a{padding:8px 16px;font-size:11px}.portfolio-home .hero-description{font-size:12px}}
@media(max-width:1050px){.portfolio-grid{gap:16px}.portfolio-card__body{padding:20px}.portfolio-card h3{font-size:20px}.portfolio-card__media{--media-size:195px}.portfolio-diagram>div{gap:5px}.portfolio-diagram i{font-size:9px;padding:8px}.portfolio-home .about-layout{grid-template-columns:.85fr 3fr .7fr}}
@media(max-width:700px){.portfolio-home .hero-intro{font-size:12px}.portfolio-home .hero-subtitle{font-size:19px}.portfolio-home .hero-description{font-size:11px;max-width:290px;line-height:1.8}.hero-actions{margin-top:20px;gap:8px}.hero-actions a{font-size:10px;padding:10px 13px;gap:12px}.portfolio-projects{padding:65px 0}.portfolio-heading{margin-bottom:28px;gap:20px}.portfolio-heading h2{font-size:34px}.portfolio-more-row{margin-top:32px;gap:0}.portfolio-more-row::before,.portfolio-more-row::after{display:none}.portfolio-more{width:100%;min-height:72px;padding:12px 14px 12px 25px;gap:22px}.portfolio-more__label{font-size:17px}.portfolio-more__icon{width:44px;height:44px}.portfolio-grid{grid-template-columns:1fr;gap:22px}.portfolio-card__media{--media-size:210px}.portfolio-card h3{font-size:23px}.portfolio-card__body{padding:22px}.portfolio-card__summary{font-size:13px}.portfolio-diagram i{font-size:10px;padding:10px}.portfolio-home .services{min-height:0}.portfolio-home .section-heading h2{font-size:36px}.portfolio-home .services-detail h3{font-size:26px}.portfolio-home .about{padding:75px 0}.portfolio-home .about-layout{grid-template-columns:1fr;gap:5px}.portfolio-home .about h2{font-size:32px}.portfolio-home .about .developer-name{font-size:20px;margin:8px 0 24px}.portfolio-home .name-note p{font-size:12px}}