/* =========================================================================
   Design tokens — shared across the whole portfolio.
   Palette/typography aligned with the document posts (posts.css) so every
   page reads as one site: navy accent, slate text, Montserrat + Noto Sans KR.
   ========================================================================= */
:root{
    --ink:#0f172a;        /* headings / strong text */
    --body:#1e293b;       /* body text */
    --muted:#64748b;      /* meta / secondary */
    --accent:#003B62;     /* primary navy */
    --accent-2:#0048A7;   /* link / highlight blue */
    --line:#e6e9f1;       /* hairline borders */
    --bg:#ffffff;
    --surface:#f8fafc;
    --surface-2:#f1f5f9;
    --footer-bg:#313131;
    --radius:10px;
    --shadow:0 4px 14px rgba(15,23,42,.08);
    --shadow-hover:0 10px 28px rgba(15,23,42,.12);
    --font-sans:'Montserrat','Noto Sans KR',sans-serif;
    --maxw:1180px;
}

body{
    background-color:var(--bg);
    width:100%;
    height:100%;
    margin:0;
    margin-top:5px;
    font-family:var(--font-sans);
    color:var(--body);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

.frame{
    /* centered, fluid container instead of fixed 180px side margins */
    width:100%;
    max-width:var(--maxw);
    margin:30px auto;
    padding:0 24px;
    box-sizing:border-box;

    display: flex;
    flex-direction: column;
}

a{
    color: var(--ink);
    text-decoration: none;
    transition: color .2s ease, filter .2s ease;
}

a:hover{
    color: var(--accent);
}


/*P0--------------------------- Navigator ---------------------------*/
.navigator{
    /*navigation안에서도 Flex로 만들어서 해준다
    전체 frame뿐만 아니라 element나 block안에서도도 Flex를 쓸수 있다*/
    display: flex;
    flex-direction: row;
    background-color: transparent;
    /*rgb(0, 59, 98);*/
    height: 100px;    
    border-radius: 15px;
    /*border-style: solid;*/
    /* 위 | 오른쪽 | 아래 | 왼쪽 */
    /*border-color: rgb(0, 59, 98);*/
    /*#efe7e3*/
    /*Site이름은 왼쪽, menu는 오른쪽에 하고싶다.
    contents에 관한 건 Jujstify-content로 한다 중요!*/
    align-items: center;    
    justify-content: space-between; 

    /*h3와 ul에 관해서 space-between이 된다*/
}

.navigator>a{
    color: var(--ink);
    transition: 0.3s
}

.navigator>a:hover{
    color: var(--accent);
    transition: 0.3s
}

.site-name{
    margin: 0px;
    margin-left: 25px;    

    /*font family 적용*/
    font-family: "Noto Sans", sans-serif;
    font-size: 34px;
    color: black;
}

.name-archive{
    /*font family 적용*/
    font-family: "Noto Sans", sans-serif;
    font-size: 23px;
    color: var(--accent-2);
}


.menu_ul{
    display: flex;
    margin:0px;
    padding:0;
    align-items: center;
    text-align: center;
    margin-right: 0px;
    margin-top:5px;
}


.list_menu{
    /*한줄로 오게 하고 싶으면 inline을 해준다*/
    display: inline-block;
    margin:0;     
    padding:7px 11px; 
}

.nav_menu{
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
    font-size: 18px;
    margin-right: 35px;
    margin-left: 15px;
    color: var(--ink);
    position: relative;
}

/* animated underline for nav items */
.nav_menu::after, .dropbtn::after{
    content:"";
    position:absolute;
    left:0; right:0; bottom:-6px;
    height:2px;
    background:var(--accent);
    border-radius:2px;
    transform:scaleX(0);
    transform-origin:center;
    transition:transform .28s cubic-bezier(.4,0,.2,1);
}
.nav_menu:hover::after, .dropbtn:hover::after{ transform:scaleX(1); }
.nav_menu:hover, .dropbtn:hover{ color:var(--accent); }

.nav__toogle{
    display: none;
    position: absolute;
    color: black;
    font-size:30px;
    right:32px;
    top:20px;
}
#ham_menu{
    width:35px;
    height:35px;
}

.nav__toogle:hover{
    color: var(--accent-2);
    filter: drop-shadow(3px 3px 5px rgb(0, 0, 0));
    transition: 0.3s
}


/*For Nav_bar (hidden)*/
@keyframes slidego {
    from {
      margin-right: 110%;
      width: 100%
    }
    to {
      margin-right: 0%;
      width: 100%;
    }
  }

/*P4--------------------------- Footer ---------------------------*/
.footer{
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color:var(--footer-bg);
    border-radius: 0px;
    padding: 28px 0;
}

/* keep footer links readable on the dark bar (override global accent hover) */
.footer a{ color:#cbd5e1; }
.footer a:hover{ color:#fff; filter:none; }

.contact{
    font-family: "Montserrat", sans-serif;
    font-size: 20px;
    font-weight: 600;
    color: white;
    /*border-top: 1px solid #C2B4AB;*/
    margin-bottom: 20px;
    margin-left:0px;
}

.links{
    display:flex;
    flex-direction: row;
    padding-left:50px;
    padding-right:50px;
    padding-bottom: 20px;
}

.blog, .instagram, .facebook, .linkedin, .github{
    color:#cbd5e1;
    transition: color .2s ease, transform .2s ease;
    display:inline-flex;
    align-items:center;
}

#Con-img{
    margin-right:5px;
    margin-left: 5px;
}

.links>li{
 /*>: 자식태그 <: 부모태그*/
    font-family: "Montserrat", sans-serif;
    font-size: 17.5px;
    font-weight: 550;
    margin-left: 13px;
    margin-right: 13px;
    margin-top: 0px;
    color: white;
    list-style:none;
}


.links>li:hover a,
.links>li:hover{
    color: #ffffff;
}
.links>li:hover{
    transform: translateY(-2px);
    transition: transform .2s ease;
}

.footer>p{
    font-family: "Noto Sans KR", sans-serif;
    font-weight: 100; /*bold*/
    font-size: 15px;
    font-style: italic;
    color: white;

    margin-top: 5px;
}



@media screen and (max-width: 1030px){
.frame{
    margin: 20px auto;
    padding: 0 18px;
}
nav-component{ display:block; }
.navigator{
    flex-direction: column;
    align-items:  flex-start;
    height: auto;            /* let it grow with the open menu */
    margin-top:18px;
    margin-bottom:14px;
}
/* compact brand + hamburger in mobile/tablet (hamburger mode) — consistent on all pages */
.site-name{ font-size:24px; }
.name-archive{ font-size:16px; }
.nav__toogle{ font-size:23px; right:18px; top:26px; }   /* 브랜드 텍스트(box h33)와 햄버거(26) 세로 중심 정렬 */
#ham_menu{ width:26px; height:26px; display:block; }

/* mobile menu = full-width vertical card, smooth slide-down open/close */
.menu_ul{
    display: flex;            /* keep in flow so it can animate */
    flex-direction: column;
    align-items: stretch;
    width:100%;
    box-sizing:border-box;
    background:#fff;
    border:1px solid var(--line, #e6e9f1);
    border-radius:14px;
    box-shadow:0 10px 28px rgba(15,23,42,.10);
    /* collapsed (closed) state */
    max-height:0;
    margin-top:0;
    padding:0 8px;
    opacity:0;
    overflow:hidden;
    transform:translateY(-8px);
    transition: max-height .34s cubic-bezier(.4,0,.2,1),
                opacity .24s ease,
                transform .34s cubic-bezier(.4,0,.2,1),
                margin-top .34s ease,
                padding .34s ease;
}

.nav__toogle{
    display: block;
}

.menu_ul.active{
    max-height:640px;
    margin-top:16px;
    padding:8px;
    opacity:1;
    transform:translateY(0);
}

/* full-width tappable rows */
.menu_ul .list_menu{
    display:block;
    width:100%;
    padding:0;
}
.menu_ul .nav_menu,
.menu_ul .dropbtn{
    display:block;
    margin:0;
    padding:13px 16px;
    font-size:16px;
    font-weight:600;
    text-align:left;
    border-radius:10px;
}
.menu_ul .nav_menu:hover,
.menu_ul .dropbtn:hover{
    background:var(--surface, #f1f5f9);
    color:var(--accent, #003B62);
}
/* drop the animated underline on mobile (uses bg highlight instead) */
.menu_ul .nav_menu::after,
.menu_ul .dropbtn::after{ display:none; }

/* "Home" dropdown becomes an always-open, indented submenu.
   Scoped to .menu_ul so it beats the later base rules regardless of source order. */
.menu_ul .dropdown-content{
    position:static;
    display:block;
    width:auto;
    min-width:0;
    margin:2px 0 6px 18px;
    padding:0;
    background:transparent;
    border:none;
    border-left:2px solid var(--line, #e6e9f1);
    border-radius:0;
    box-shadow:none;
}
.menu_ul .dropdown-content::before,
.menu_ul .dropdown-content::after{ display:none; }
.menu_ul .dropdown-content a{
    padding:11px 14px;
    font-size:14.5px;
    font-weight:500;
}
}


@keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@-moz-keyframes fadein { /* Firefox */
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@-o-keyframes fadein { /* Opera */
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/******** drop down *********/

.dropbtn{
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
    font-size: 18px;
    margin-right: 35px;
    margin-left: 15px;
    color: var(--ink);
    cursor: pointer;
}

.dropdown-content {
    display: none;
    position: absolute;
    width: max-content;
    min-width: 0;
    margin-top: 10px;
    padding: 6px;
    background: #fff;
    border: 1px solid var(--line, #e6e9f1);
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.14);
    z-index: 20;
}
/* small caret */
.dropdown-content::before {
    content: "";
    position: absolute;
    top: -6px;
    left: 22px;
    width: 11px;
    height: 11px;
    background: #fff;
    border-left: 1px solid var(--line, #e6e9f1);
    border-top: 1px solid var(--line, #e6e9f1);
    transform: rotate(45deg);
    z-index: 1;
}
/* transparent bridge over the gap so hover doesn't drop while moving down */
.dropdown-content::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -12px;
    height: 12px;
    background: transparent;
}

.dropdown-content a {
    display: block;
    white-space: nowrap;
    font-family: "Montserrat", sans-serif;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--body, #1e293b);
    text-decoration: none;
    padding: 10px 14px;
    border-radius: 8px;
    transition: background .16s ease, color .16s ease;
}

.dropdown-content a:hover {
    background: var(--surface, #f1f5f9);
    color: var(--accent, #003B62);
}

.dropdown-content.show,
.list_menu:hover .dropdown-content {
    display: block;
}

/* =====================================================================
   Portfolio Home redesign  —  .pf-* scope (matches cover page language)
   ===================================================================== */
.pf-hero{
  position:relative;overflow:hidden;isolation:isolate;
  padding:clamp(64px,9vw,118px) 24px clamp(56px,7vw,96px);
  color:#eef2f8;
  background:
    radial-gradient(1000px 460px at 80% -10%, rgba(0,72,167,.55), transparent 60%),
    radial-gradient(820px 540px at 6% 115%, rgba(14,139,135,.28), transparent 55%),
    linear-gradient(160deg,#021a30 0%,#03263f 48%,#012038 100%);
}
.pf-hero::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background-image:radial-gradient(rgba(255,255,255,.06) 1px,transparent 1.4px);
  background-size:30px 30px;
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.85),transparent 85%);
          mask-image:linear-gradient(180deg,rgba(0,0,0,.85),transparent 85%);
}
.pf-hero__inner{max-width:var(--maxw,1180px);margin:0 auto;}
.pf-eyebrow{
  font-size:12.5px;font-weight:700;letter-spacing:.22em;color:#7fb0f0;margin:0 0 16px;
}
.pf-hero__title{
  font-size:clamp(30px,4.6vw,54px);line-height:1.2;font-weight:800;
  letter-spacing:-.025em;margin:0 0 24px;color:#f4f8ff;
}
.pf-hero__title em{
  font-style:normal;
  background:linear-gradient(92deg,#6fb1ff,#9be7e0);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.pf-hero__lead{
  max-width:620px;margin:0 0 34px;font-size:clamp(15px,1.4vw,17px);
  line-height:1.78;color:#aebdd2;
}
.pf-hero__cta{display:flex;gap:13px;flex-wrap:wrap;margin-bottom:26px;}
.pf-btn{
  display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:700;
  text-decoration:none;padding:13px 25px;border-radius:999px;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.pf-btn--primary{background:#2b7cff;color:#fff;box-shadow:0 10px 26px rgba(43,124,255,.38);}
.pf-btn--primary:hover{transform:translateY(-2px);background:#3f88ff;box-shadow:0 16px 34px rgba(43,124,255,.5);}
.pf-btn--ghost{background:rgba(255,255,255,.06);color:#e9f0fb;border:1px solid rgba(255,255,255,.28);}
.pf-btn--ghost:hover{transform:translateY(-2px);background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.5);}
.pf-hero__links{display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
.pf-hero__links a{color:#c6d4e6;text-decoration:none;font-size:14px;font-weight:600;transition:color .2s ease;}
.pf-hero__links a:hover{color:#fff;}
.pf-hero__links span{width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.3);}

/* sections */
.pf-section{max-width:var(--maxw,1180px);margin:0 auto;padding:clamp(64px,8.5vw,108px) 24px 0;}
.pf-section:last-of-type{padding-bottom:clamp(72px,9vw,116px);}
.pf-keyline{
  font-size:12px;font-weight:700;letter-spacing:.2em;color:var(--accent-2,#0048A7);
  margin:0 0 22px;
}
.pf-h2{
  font-size:clamp(26px,3.2vw,38px);font-weight:800;letter-spacing:-.02em;
  color:var(--ink,#0f172a);margin:0 0 8px;
}
.pf-sub{font-size:15px;line-height:1.6;color:var(--muted,#64748b);margin:0 0 38px;}

/* research topic cards */
.pf-topics{display:grid;grid-template-columns:1fr 1fr;gap:26px;}
.pf-topic{
  position:relative;border-radius:18px;overflow:hidden;border:1px solid var(--line,#e6e9f1);
  box-shadow:var(--shadow,0 4px 14px rgba(15,23,42,.08));
}
.pf-topic img{
  display:block;width:100%;height:300px;object-fit:cover;
  transition:transform .5s ease;
}
.pf-topic:hover img{transform:scale(1.05);}
.pf-topic__cap{
  position:absolute;left:0;right:0;bottom:0;padding:22px 22px 18px;
  display:flex;flex-direction:column;gap:3px;color:#fff;
  background:linear-gradient(0deg,rgba(2,18,38,.86) 0%,rgba(2,18,38,.45) 55%,transparent 100%);
}
.pf-topic__title{font-size:21px;font-weight:800;letter-spacing:-.01em;}
.pf-topic__sub{font-size:13px;color:#c9d6e8;}

/* about cards */
.pf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.pf-card{
  position:relative;display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--line,#e6e9f1);border-radius:18px;
  padding:32px 30px 28px;text-decoration:none;overflow:hidden;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.pf-card::after{
  content:"";position:absolute;left:0;top:0;height:4px;width:100%;
  background:linear-gradient(90deg,#2b7cff,#19b5ac);
  transform:scaleX(0);transform-origin:left;transition:transform .3s ease;
}
.pf-card:hover{transform:translateY(-5px);box-shadow:0 18px 40px rgba(15,23,42,.13);border-color:#cfd9ec;}
.pf-card:hover::after{transform:scaleX(1);}
.pf-card__icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:56px;height:56px;border-radius:14px;margin-bottom:18px;
  color:var(--accent,#003B62);background:linear-gradient(150deg,#eef4ff,#e6fbf7);
}
.pf-card__title{font-size:18px;font-weight:800;letter-spacing:-.01em;color:var(--ink,#0f172a);margin:0 0 12px;line-height:1.35;}
.pf-card__desc{font-size:14px;line-height:1.72;color:var(--muted,#64748b);margin:0 0 24px;}
.pf-card__more{margin-top:auto;font-size:14px;font-weight:700;color:var(--accent-2,#0048A7);display:inline-flex;align-items:center;gap:7px;}
.pf-card__arrow{transition:transform .22s ease;}
.pf-card:hover .pf-card__arrow{transform:translateX(5px);}

/* responsive */
@media (max-width:900px){
  .pf-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:680px){
  .pf-topics{grid-template-columns:1fr;}
  .pf-grid{grid-template-columns:1fr;}
  .pf-topic img{height:220px;}
}


/* =====================================================================
   Info / CV page  —  .info-* scope (matches cover & home language)
   ===================================================================== */
.pf-hero--info{padding-top:clamp(56px,7vw,92px);}
.info-hero{
  max-width:var(--maxw,1180px);margin:0 auto;
  display:flex;gap:clamp(24px,4vw,52px);align-items:center;flex-wrap:wrap;
}
.info-hero__photo{flex:0 0 auto;}
.info-hero__photo img{
  width:200px;height:248px;object-fit:cover;border-radius:18px;
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 18px 44px rgba(0,0,0,.4);
}
.info-hero__body{flex:1 1 360px;min-width:280px;}
.info-hero__body .pf-hero__title{margin-bottom:8px;}
.info-hero__role{
  font-size:clamp(14px,1.5vw,17px);font-weight:600;color:#8fd2cb;margin:0 0 16px;
}
.info-hero__body .pf-hero__lead{margin-bottom:18px;}
.info-chips{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:24px;}
.info-chip{
  display:inline-flex;align-items:center;gap:6px;
  font-size:13px;font-weight:600;color:#dbe6f5;text-decoration:none;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);
  padding:7px 13px;border-radius:999px;transition:background .18s ease,border-color .18s ease;
}
a.info-chip:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.4);}

/* interest tags */
.info-tags{display:flex;flex-wrap:wrap;gap:10px;}
.info-tag{
  font-size:13.5px;font-weight:600;color:var(--accent,#003B62);
  background:linear-gradient(150deg,#eef4ff,#e6fbf7);
  border:1px solid #e1ebf7;padding:8px 15px;border-radius:999px;
}

/* education timeline */
.info-timeline{position:relative;padding-left:26px;}
.info-timeline::before{
  content:"";position:absolute;left:6px;top:6px;bottom:6px;width:2px;background:var(--line,#e6e9f1);
}
.info-edu{position:relative;display:flex;gap:24px;padding:0 0 36px;flex-wrap:wrap;}
.info-edu::before{
  content:"";position:absolute;left:-26px;top:5px;width:12px;height:12px;border-radius:50%;
  background:#fff;border:3px solid var(--accent-2,#0048A7);
}
.info-edu:last-child{padding-bottom:0;}
.info-edu__year{
  flex:0 0 96px;font-size:13px;font-weight:700;color:var(--accent-2,#0048A7);padding-top:1px;
}
.info-edu__title{font-size:16.5px;font-weight:800;color:var(--ink,#0f172a);margin:0 0 4px;}
.info-edu__title span{font-weight:600;color:var(--muted,#64748b);font-size:14px;}
.info-edu__title{margin-bottom:6px;}
.info-edu__desc{font-size:14px;line-height:1.72;color:var(--muted,#64748b);margin:0;}
.info-edu__desc em{font-style:italic;color:var(--body,#1e293b);}
.info-inline-link{margin:22px 0 0;}
.info-inline-link a{color:var(--accent-2,#0048A7);font-weight:700;text-decoration:none;font-size:14px;}
.info-inline-link a:hover{text-decoration:underline;}

/* tech stack */
.info-stack{
  display:flex;flex-wrap:wrap;gap:30px 48px;align-items:flex-start;
  background:var(--surface,#f8fafc);border:1px solid var(--line,#e6e9f1);
  border-radius:18px;padding:30px 32px;
}
.info-stack__label{
  font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted,#64748b);margin:0 0 14px;
}
.info-logos{display:flex;flex-wrap:wrap;gap:14px;}
.info-logo{
  display:inline-flex;align-items:center;gap:9px;
  background:#fff;border:1px solid var(--line,#e6e9f1);border-radius:12px;
  padding:9px 14px 9px 10px;font-size:13.5px;font-weight:600;color:var(--ink,#0f172a);
  transition:transform .16s ease,box-shadow .16s ease;
}
.info-logo:hover{transform:translateY(-2px);box-shadow:var(--shadow,0 4px 14px rgba(15,23,42,.08));}
.info-logo img{width:26px;height:26px;object-fit:contain;}
.info-stack__git{
  flex-basis:100%;
  display:inline-flex;align-items:center;gap:9px;
  margin-top:4px;padding-top:18px;border-top:1px solid var(--line,#e6e9f1);
  font-size:14px;font-weight:700;color:var(--accent-2,#0048A7);text-decoration:none;
}
.info-stack__git img{width:22px;height:22px;}
.info-stack__git:hover{text-decoration:underline;}

/* static skill cards (no link) */
.pf-card--static{cursor:default;}
.pf-card--static:hover{transform:none;box-shadow:none;border-color:var(--line,#e6e9f1);}
.pf-card--static:hover::after{transform:scaleX(0);}

/* careers */
.info-careers{display:flex;flex-direction:column;gap:22px;}
.info-career{
  display:flex;gap:24px;align-items:flex-start;flex-wrap:wrap;
  background:#fff;border:1px solid var(--line,#e6e9f1);border-radius:18px;
  padding:28px 30px;transition:box-shadow .2s ease,border-color .2s ease;
}
.info-career:hover{box-shadow:var(--shadow,0 4px 14px rgba(15,23,42,.08));border-color:#cfd9ec;}
.info-career__logo{
  flex:0 0 120px;height:56px;display:flex;align-items:center;
}
.info-career__logo img{max-width:120px;max-height:56px;object-fit:contain;}
.info-career__body{flex:1 1 320px;min-width:260px;}
.info-career__title{
  font-size:18px;font-weight:800;color:var(--ink,#0f172a);text-decoration:none;
}
.info-career__title:hover{color:var(--accent-2,#0048A7);}
.info-career__period{display:inline-block;font-size:12.5px;font-weight:600;color:var(--muted,#64748b);margin-left:8px;}
.info-career__role{font-size:14px;font-weight:700;color:var(--accent-2,#0048A7);margin:8px 0 10px;}
.info-career__list{margin:0;padding-left:18px;}
.info-career__list li{font-size:14px;line-height:1.7;color:var(--body,#1e293b);margin-bottom:6px;}
.info-career__list li:last-child{margin-bottom:0;}
.info-done{
  font-size:11px;font-weight:700;color:#16794f;background:#e7f6ee;
  border:1px solid #c4ead4;border-radius:999px;padding:2px 9px;margin-left:6px;
}

/* awards + certificate two-up */
.info-two{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.info-panel{
  background:#fff;border:1px solid var(--line,#e6e9f1);border-radius:18px;padding:26px 28px;
}
.pf-h2--sm{font-size:22px;margin-bottom:18px;}
.info-award{padding:0 0 16px;}
.info-award:last-child{padding-bottom:0;}
.info-award__title{font-size:15px;font-weight:800;color:var(--ink,#0f172a);margin:0 0 5px;}
.info-award__org{font-size:13.5px;color:var(--muted,#64748b);margin:0;}
.info-award__org a{color:var(--accent-2,#0048A7);text-decoration:none;}
.info-award__org a:hover{text-decoration:underline;}
.info-cert__logo{height:48px;object-fit:contain;margin-bottom:14px;}
.info-cert__list{margin:0 0 12px;padding-left:18px;}
.info-cert__list li{font-size:14px;line-height:1.7;color:var(--body,#1e293b);}

/* responsive */
@media (max-width:760px){
  .info-two{grid-template-columns:1fr;}
  .info-stack__git{margin-left:0;}
  .info-hero__photo img{width:150px;height:188px;}
}


/* =====================================================================
   Course list page  —  .course-* scope
   ===================================================================== */
.course-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
.course-card{
  background:#fff;border:1px solid var(--line,#e6e9f1);border-radius:18px;
  padding:28px 30px;
}
.course-card--wide{max-width:100%;}
.course-card__head{
  display:flex;align-items:center;gap:10px;
  padding-bottom:16px;margin-bottom:18px;border-bottom:1px solid var(--line,#e6e9f1);
}
.course-dot{width:11px;height:11px;border-radius:50%;flex:0 0 auto;}
.course-dot--env{background:#0e8b87;}
.course-dot--mech{background:#0048A7;}
.course-card__title{
  font-family:var(--font-sans);font-size:18px;font-weight:800;
  letter-spacing:-.01em;color:var(--ink,#0f172a);margin:0;
}
/* GPA stat row */
.course-stats{display:flex;flex-wrap:wrap;gap:16px 30px;margin-bottom:22px;}
.course-stat b{
  display:block;font-size:22px;font-weight:800;color:var(--accent-2,#0048A7);line-height:1.1;
}
.course-stat__max{font-size:12px;font-weight:600;color:var(--muted,#64748b);}
.course-stat span{font-size:12px;color:var(--muted,#64748b);}
/* course items — multi-column tidy list */
.course-items{
  columns:2;column-gap:28px;margin:0 0 20px;padding:0;list-style:none;
}
.course-items--3{columns:3;}
.course-items li{
  font-size:13px;line-height:1.5;color:var(--body,#1e293b);
  margin:0 0 9px;padding-left:15px;position:relative;break-inside:avoid;
}
.course-items li::before{
  content:"";position:absolute;left:0;top:7px;width:5px;height:5px;
  border-radius:50%;background:#cbd5e1;
}
.course-dl{
  display:inline-block;font-family:var(--font-sans);font-size:13.5px;font-weight:700;
  color:var(--accent-2,#0048A7);text-decoration:none;
  padding-top:6px;border-top:1px solid var(--line,#e6e9f1);
}
.course-dl:hover{text-decoration:underline;}

@media (max-width:820px){
  .course-grid{grid-template-columns:1fr;}
  .course-items--3{columns:2;}
}
@media (max-width:520px){
  .course-items,.course-items--3{columns:1;}
}


/* =====================================================================
   Activities page  —  .act-* scope (restrained club cards)
   ===================================================================== */
.act-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;}
.act-card{
  display:flex;gap:18px;align-items:flex-start;
  background:#fff;border:1px solid var(--line,#e6e9f1);border-radius:16px;
  padding:22px 24px;
  transition:box-shadow .2s ease, border-color .2s ease;
}
.act-card:hover{box-shadow:var(--shadow,0 4px 14px rgba(15,23,42,.08));border-color:#cfd9ec;}
.act-card__logo{flex:0 0 auto;}
.act-card__logo img{
  width:60px;height:60px;object-fit:cover;border-radius:12px;
  border:1px solid var(--line,#e6e9f1);background:#fff;
}
.act-card__body{min-width:0;}
.act-card__title{
  font-family:var(--font-sans);font-size:15.5px;font-weight:800;
  letter-spacing:-.01em;color:var(--ink,#0f172a);margin:0 0 4px;line-height:1.3;
}
.act-card__period{font-size:12px;font-weight:600;color:var(--accent-2,#0048A7);}
.act-card__desc{font-size:13px;line-height:1.6;color:var(--muted,#64748b);margin:9px 0 0;}
.act-card__desc a{color:var(--accent-2,#0048A7);text-decoration:none;font-weight:600;}
.act-card__desc a:hover{text-decoration:underline;}
.act-card__role{
  display:inline-block;margin-top:11px;font-size:11px;font-weight:600;
  color:var(--muted,#64748b);background:var(--surface,#f1f5f9);
  border:1px solid var(--line,#e6e9f1);border-radius:999px;padding:3px 10px;
}
.act-card__role--lead{
  color:var(--accent,#003B62);background:#eef4ff;border-color:#dbe6f7;
}

@media (max-width:820px){
  .act-grid{grid-template-columns:1fr;}
}


/* =====================================================================
   Light inner-page header  —  detail pages (Info / Course / Activity).
   The dark navy hero (.pf-hero / .cv-hero) stays reserved for the main
   landing pages (cover + portfolio home); inner pages use this lighter
   header so the dark look reads as a "main page" signature.
   ===================================================================== */
.pf-pagehead{
  max-width:var(--maxw,1180px);margin:0 auto;
  padding:clamp(44px,6vw,78px) 24px clamp(30px,3.6vw,46px);
}
.pf-pagehead__back{
  display:inline-block;margin-bottom:16px;font-size:13.5px;font-weight:700;
  color:var(--accent-2,#0048A7);text-decoration:none;
}
.pf-pagehead__back:hover{text-decoration:underline;}
.pf-pagehead__eyebrow{
  position:relative;padding-left:34px;
  font-size:12.5px;font-weight:700;letter-spacing:.2em;color:var(--accent-2,#0048A7);margin:0 0 14px;
}
.pf-pagehead__eyebrow::before{
  content:"";position:absolute;left:0;top:50%;width:24px;height:2px;background:var(--accent-2,#0048A7);
}
.pf-pagehead__title{
  font-size:clamp(30px,4.4vw,50px);line-height:1.12;font-weight:800;letter-spacing:-.025em;
  color:var(--ink,#0f172a);margin:0 0 16px;
}
.pf-pagehead__title em{font-style:normal;color:var(--accent-2,#0048A7);}
.pf-pagehead__role{font-size:clamp(14px,1.5vw,16px);font-weight:600;color:var(--accent,#003B62);margin:0 0 14px;}
.pf-pagehead__lead{max-width:640px;font-size:16px;line-height:1.7;color:var(--muted,#64748b);margin:0;}
.pf-pagehead__cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px;}
/* profile variant (Info) */
.pf-pagehead--profile{display:flex;gap:clamp(24px,4vw,44px);align-items:center;flex-wrap:wrap;}
.pf-pagehead__photo{flex:0 0 auto;}
.pf-pagehead__photo img{
  width:200px;height:250px;object-fit:cover;border-radius:16px;
  border:1px solid var(--line,#e6e9f1);box-shadow:var(--shadow,0 4px 14px rgba(15,23,42,.08));
}
.pf-pagehead__main{flex:1 1 380px;min-width:280px;}
/* tighten the first section right after a light header */
.pf-pagehead + .pf-section{padding-top:clamp(30px,4vw,52px);}

/* light secondary button (on white bg) */
.pf-btn--outline{background:#fff;color:var(--ink,#0f172a);border:1px solid var(--line,#e6e9f1);}
.pf-btn--outline:hover{transform:translateY(-2px);border-color:#c7d0e0;box-shadow:var(--shadow,0 4px 14px rgba(15,23,42,.08));}

/* light chips (now used on the light Info header) */
.info-chips{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 0;}
.info-chip{
  display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;
  color:var(--body,#1e293b);background:var(--surface,#f8fafc);
  border:1px solid var(--line,#e6e9f1);padding:7px 13px;border-radius:999px;text-decoration:none;
  transition:background .18s ease,border-color .18s ease;
}
a.info-chip:hover{background:#fff;border-color:#c7d0e0;}


/* text-only stack chip (for items without a logo image: JavaScript, databases) */
.info-logo--text{padding:9px 14px;color:var(--accent,#003B62);background:linear-gradient(150deg,#eef4ff,#e6fbf7);}
.info-logo--text span{font-weight:700;}


/* ============================================================
   Mobile fit-ups — fix horizontal overflow & oversized bits
   ============================================================ */
@media (max-width:560px){
  /* footer CONTACT links overflowed (~549px) → wrap + tighten (오른쪽 여백 원인 제거) */
  .links{ flex-wrap:wrap; justify-content:center; padding-left:14px; padding-right:14px; row-gap:10px; }
  .links>li{ margin-left:9px; margin-right:9px; font-size:14.5px; }
  /* hero title not too large on phones */
  .pf-hero__title{ font-size:clamp(25px,7vw,34px); line-height:1.22; }
  /* tighten the gap between the nav header and the hero title (portfolio Home) */
  .pf-hero{ padding-top:30px; }
  /* and the light inner-page header top gap */
  .pf-pagehead{ padding-top:24px; }

  /* ---- slightly smaller font scale on phones (아주 살짝) ---- */
  .pf-h2{ font-size:23px; }
  .pf-pagehead__title{ font-size:27px; }
  .pf-pagehead__lead{ font-size:14.5px; }
  .pf-pagehead__role{ font-size:14.5px; }
  .pf-sub{ font-size:14px; }
  .pf-card__title{ font-size:16.5px; }
  .pf-card__desc{ font-size:13.5px; }
  .pf-hero__lead{ font-size:14.5px; }
  .info-chip, .info-tag{ font-size:13px; }

  /* Tech stack chips: tidy 2-col grid so rows/cols line up (정갈하게) */
  .info-stack{ padding:24px 18px; gap:26px 0; }
  .info-stack__group{ flex-basis:100%; width:100%; }
  .info-logos{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .info-logo{ justify-content:flex-start; font-size:12.5px; padding:8px 10px; gap:7px; }
  .info-logo img{ width:22px; height:22px; }
  .info-logo span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
}
/* safety net: never let anything cause sideways scroll on phones */
@media (max-width:560px){
  html, body{ overflow-x:hidden; }
}