/* 사용자 제공 gate-intro.html 스타일 (gi- 스코프·토스 블루) — import_gate.py 생성 */
.gi-root{
        
        --bg: #FAFCFF;
        --surface: #fff;
        --tint: #E8F3FF;
        --ink: #191F28;
        --muted: #4E5968;
        --line: #E5E8EB;
        --accent: #3182F6;
        --accent-soft: #E8F3FF;
        --on-accent: #fff;
        --type-display: clamp(40px, 4.5vw, 60px);
        --type-section: 40px;
        --type-sub: 22px;
        --type-body: 16px;
        --type-small: 14px;
        --weight-title: 650;
        --weight-sub: 600;
        --leading-body: 1.8;
        --space-1: 4px;
        --space-2: 8px;
        --space-3: 12px;
        --space-4: 16px;
        --space-6: 24px;
        --space-8: 32px;
        --space-12: 48px;
        --space-16: 64px;
        --space-20: 80px;
        --section-space: var(--space-20);
        --column-gap: var(--space-12);
        --panel-padding: var(--space-8);
        --radius-element: 8px;
        --radius-panel: 16px;
      }
.gi-root *{
        box-sizing: border-box;
      }
.gi-root{
        margin: 0;
        background: var(--bg);
        color: var(--ink);
        font-family:
          -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic',
          sans-serif;
        font-size: var(--type-body);
        line-height: var(--leading-body);
        word-break: keep-all;
        overflow-wrap: break-word;
        -webkit-font-smoothing: antialiased;
      }
.gi-root h1, .gi-root h2, .gi-root h3, .gi-root p, .gi-root figure{
        margin: 0;
      }
.gi-root h1, .gi-root h2, .gi-root h3{
        line-height: 1.3;
        letter-spacing: -0.04em;
      }
.gi-root h1, .gi-root h2{
        font-weight: var(--weight-title);
      }
.gi-root h1{
        font-size: var(--type-display);
        line-height: 1.24;
      }
.gi-root h2{
        font-size: var(--type-section);
      }
.gi-root h3{
        font-size: var(--type-sub);
        font-weight: var(--weight-sub);
      }
.gi-root [hidden]{
        display: none !important;
      }
.gi-root .gi-wrap{
        width: min(1200px, calc(100% - 96px));
        margin-inline: auto;
      }
.gi-root .gi-site-header{
        border-bottom: 1px solid var(--line);
      }
.gi-root .gi-masthead{
        height: 80px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-6);
      }
.gi-root .gi-brand{
        display: inline-flex;
        align-items: baseline;
        gap: var(--space-2);
        font-size: 28px;
        font-weight: 750;
        letter-spacing: -1.5px;
      }
.gi-root .gi-brand small{
        font-size: var(--type-small);
        letter-spacing: -0.4px;
      }
.gi-root .gi-document-label{
        font-size: var(--type-small);
        color: var(--muted);
      }
.gi-root .gi-hero{
        padding: var(--section-space) 0 var(--space-16);
      }
.gi-root h1 span{
        color: var(--accent);
      }
.gi-root .gi-eyebrow, .gi-root .gi-role-label{
        font-size: var(--type-small);
        font-weight: var(--weight-sub);
        color: var(--accent);
        margin-bottom: var(--space-4);
      }
.gi-root .gi-hero-copy{
        color: var(--muted);
        margin-top: var(--space-8);
        max-width: 900px;
      }
.gi-root .gi-product-definition{
        margin-top: var(--space-4);
        max-width: 900px;
      }
.gi-root .gi-intro-comparison{
        margin-top: var(--space-12);
      }
.gi-root .gi-comparison-title{
        font-size: var(--type-sub);
        font-weight: var(--weight-sub);
        margin-bottom: var(--space-6);
      }
.gi-root .gi-intro-conclusion{
        margin-top: var(--space-8);
        color: var(--muted);
        font-size: var(--type-sub);
        letter-spacing: -0.03em;
      }
.gi-root .gi-intro-conclusion strong{
        color: var(--accent);
        font-weight: var(--weight-sub);
      }
.gi-root .gi-section{
        padding: var(--section-space) 0;
      }
.gi-root .gi-section-heading, .gi-root .gi-audit-header{
        max-width: 760px;
        margin-bottom: var(--space-8);
      }
.gi-root .gi-lead{
        color: var(--muted);
        font-size: var(--type-body);
        margin-top: var(--space-6);
        max-width: 660px;
      }
.gi-root .gi-tinted{
        background: var(--tint);
      }
.gi-root .gi-ways-list{
        border-top: 1px solid var(--line);
      }
.gi-root .gi-way{
        display: grid;
        grid-template-columns: 1fr 1.45fr;
        gap: var(--column-gap);
        padding: var(--space-8) var(--space-6);
        border-bottom: 1px solid var(--line);
      }
.gi-root .gi-way-title{
        display: grid;
        grid-template-columns: 72px 1fr;
        gap: var(--space-6);
      }
.gi-root .gi-sequence{
        font-size: var(--type-small);
        color: var(--muted);
        padding-top: var(--space-1);
      }
.gi-root .gi-way-body p{
        color: var(--muted);
      }
.gi-root .gi-work-chain{
        display: flex;
        gap: var(--space-3);
        flex-wrap: wrap;
        margin-top: var(--space-4);
        font-size: var(--type-small);
        font-weight: var(--weight-sub);
      }
.gi-root .gi-work-chain span + span::before{
        content: '→';
        margin-right: var(--space-3);
        color: var(--muted);
      }
.gi-root .gi-with-gate{
        background: var(--accent-soft);
      }
.gi-root .gi-with-gate .gi-sequence, .gi-root .gi-with-gate h3{
        color: var(--accent);
      }
.gi-root .gi-use-roles, .gi-root .gi-followup-example, .gi-root .gi-context-grid, .gi-root .gi-setup{
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--column-gap);
      }
.gi-root .gi-role-label{
        display: block;
      }
.gi-root .gi-use-roles h3{
        margin-bottom: var(--space-4);
      }
.gi-root .gi-use-roles p{
        color: var(--muted);
      }
.gi-root .gi-followup-example{
        margin-top: var(--space-8);
        padding-top: var(--space-6);
        border-top: 1px solid var(--line);
        color: var(--muted);
        font-size: var(--type-small);
      }
.gi-root .gi-followup-example strong{
        display: inline-block;
        color: var(--ink);
        font-size: var(--type-sub);
        font-weight: var(--weight-sub);
        margin-bottom: var(--space-2);
      }
.gi-root .gi-caption, .gi-root .gi-audit-scope{
        font-size: var(--type-small);
        color: var(--muted);
        margin-top: var(--space-6);
      }
.gi-root .gi-network-comparison{
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--space-6);
      }
.gi-root .gi-diagram-heading{
        margin-bottom: var(--space-6);
      }
.gi-root .gi-diagram-heading > span{
        display: block;
        font-size: var(--type-small);
        color: var(--muted);
        margin-bottom: var(--space-2);
      }
.gi-root .gi-network-comparison figure:last-child .gi-diagram-heading > span{
        color: var(--accent);
      }
.gi-root .gi-network{
        position: relative;
        height: 560px;
        border: 1px solid var(--line);
        border-radius: var(--radius-panel);
        background: var(--surface);
        overflow: hidden;
      }
.gi-root .gi-network > svg{
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
      }
.gi-root .gi-network > svg path{
        fill: none;
        stroke: var(--line);
        stroke-width: 1.5;
        stroke-linecap: round;
        vector-effect: non-scaling-stroke;
      }
.gi-root .gi-network .gi-gate-lines path{
        stroke: var(--accent);
        opacity: 0.75;
      }
.gi-root .gi-node-column{
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 29%;
        display: grid;
        gap: var(--space-4);
      }
.gi-root .gi-node-column.gi-left{
        left: 3%;
      }
.gi-root .gi-node-column.gi-right{
        right: 3%;
        gap: var(--space-16);
      }
.gi-root .gi-node{
        background: var(--bg);
        border: 1px solid var(--line);
        border-radius: var(--radius-element);
        text-align: center;
        padding: var(--space-3) var(--space-2);
        font-size: var(--type-small);
        font-weight: var(--weight-sub);
        line-height: 1.5;
        min-height: 56px;
        display: grid;
        align-items: center;
      }
.gi-root .gi-node.gi-ai-tool{
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-2);
      }
.gi-root .gi-ai-tool svg{
        width: 24px;
        height: 24px;
        flex: 0 0 24px;
      }
.gi-root .gi-source-node strong{
        font-size: var(--type-small);
        font-weight: var(--weight-sub);
      }
.gi-root .gi-source-node small{
        display: block;
        font-size: var(--type-small);
        font-weight: 400;
        color: var(--muted);
        margin-top: var(--space-1);
      }
.gi-root .gi-network-gate{
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 24%;
        background: var(--accent);
        color: var(--on-accent);
        border-radius: var(--radius-element);
        text-align: center;
        padding: var(--space-6) var(--space-2);
      }
.gi-root .gi-network-gate strong{
        display: block;
        font-size: var(--type-sub);
        letter-spacing: -0.04em;
      }
.gi-root .gi-network-gate span{
        display: block;
        font-size: var(--type-small);
        margin-top: var(--space-1);
      }
.gi-root .gi-diagram-note{
        font-size: var(--type-small);
        color: var(--muted);
        margin-top: var(--space-4);
      }
.gi-root .gi-audit-header .gi-lead{
        max-width: 720px;
      }
.gi-root .gi-audit-example{
        background: var(--surface);
        border: 1px solid var(--line);
        border-radius: var(--radius-panel);
        padding: var(--panel-padding);
      }
.gi-root .gi-audit-toolbar{
        display: flex;
        justify-content: space-between;
        gap: var(--space-4);
        padding-bottom: var(--space-6);
        border-bottom: 1px solid var(--line);
        font-size: var(--type-small);
        color: var(--muted);
      }
.gi-root #audit-list{
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--space-8);
      }
.gi-root .gi-audit-entry{
        padding-top: var(--space-6);
      }
.gi-root .gi-audit-entry + .gi-audit-entry{
        border-left: 1px solid var(--line);
        padding-left: var(--space-8);
      }
.gi-root .gi-audit-person{
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-4);
      }
.gi-root .gi-audit-time{
        font-size: var(--type-small);
        color: var(--muted);
        margin-top: var(--space-1);
        font-variant-numeric: tabular-nums;
      }
.gi-root .gi-status{
        font-size: var(--type-small);
        font-weight: var(--weight-sub);
        color: var(--accent);
        background: var(--accent-soft);
        padding: var(--space-1) var(--space-3);
        border-radius: var(--radius-element);
      }
.gi-root .gi-status.gi-blocked{
        color: var(--ink);
        background: var(--tint);
      }
.gi-root .gi-audit-fields{
        display: grid;
        grid-template-columns: 80px minmax(0, 1fr);
        gap: var(--space-4);
        margin: var(--space-6) 0 0;
      }
.gi-root .gi-audit-fields dt{
        font-size: var(--type-small);
        font-weight: var(--weight-sub);
      }
.gi-root .gi-audit-fields dd{
        margin: 0;
        color: var(--muted);
      }
.gi-root .gi-audit-fields dd strong{
        display: block;
        color: var(--ink);
        font-weight: var(--weight-sub);
      }
.gi-root .gi-audit-fields dd span{
        display: block;
        font-size: var(--type-small);
        margin-top: var(--space-1);
      }
.gi-root .gi-context-grid{
        align-items: center;
      }
.gi-root .gi-context-paper{
        background: var(--surface);
        border: 1px solid var(--line);
        border-radius: var(--radius-panel);
        padding: var(--panel-padding);
      }
.gi-root .gi-paper-top{
        display: flex;
        justify-content: space-between;
        gap: var(--space-4);
        border-bottom: 1px solid var(--line);
        padding-bottom: var(--space-4);
        margin-bottom: var(--space-6);
        font-size: var(--type-small);
        color: var(--muted);
      }
.gi-root .gi-paper-top strong{
        color: var(--accent);
      }
.gi-root .gi-context-paper h3{
        margin-bottom: var(--space-6);
      }
.gi-root .gi-definitions{
        margin: 0;
      }
.gi-root .gi-definitions dt{
        font-size: var(--type-body);
        font-weight: var(--weight-sub);
        margin-top: var(--space-6);
      }
.gi-root .gi-definitions dd{
        margin: var(--space-2) 0 0;
        color: var(--muted);
      }
.gi-root mark{
        background: var(--accent-soft);
        color: var(--ink);
        padding: 2px 4px;
      }
.gi-root .gi-inline-note{
        margin-top: var(--space-6);
        padding-left: var(--space-4);
        border-left: 2px solid var(--accent);
        color: var(--muted);
        font-size: var(--type-small);
      }
.gi-root .gi-wrap-context{
        padding-bottom: var(--space-12);
      }
.gi-root #start{
        padding-top: var(--space-12);
        border-top: 1px solid var(--line);
      }
.gi-root .gi-setup{
        align-items: start;
      }
.gi-root .gi-preparation-list{
        list-style: none;
        padding: 0;
        margin: 0;
      }
.gi-root .gi-preparation-list li{
        padding: 0 0 var(--space-6) var(--space-6);
        border-left: 2px solid var(--line);
      }
.gi-root .gi-preparation-list li:last-child{
        padding-bottom: 0;
      }
.gi-root .gi-preparation-list h3{
        margin-bottom: var(--space-2);
      }
.gi-root .gi-preparation-list p{
        color: var(--muted);
      }
.gi-root .gi-site-footer{
        padding: var(--space-8) 0;
      }
.gi-root .gi-footer-inner{
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: var(--space-6);
      }
.gi-root .gi-footer-inner p{
        font-size: var(--type-small);
        color: var(--muted);
      }
@media (max-width: 1024px){.gi-root{
          --column-gap: var(--space-8);
        }
.gi-root .gi-wrap{
          width: calc(100% - 56px);
        }
.gi-root .gi-way{
          grid-template-columns: 1fr 1.2fr;
        }
.gi-root .gi-way-title{
          grid-template-columns: 1fr;
          gap: var(--space-2);
        }
.gi-root .gi-network-comparison{
          grid-template-columns: 1fr;
        }
.gi-root .gi-network{
          height: 500px;
        }
.gi-root .gi-node-column{
          width: 30%;
        }
.gi-root .gi-node-column.gi-right{
          gap: var(--space-12);
        }

      }
@media (max-width: 767px){.gi-root{
          --type-display: clamp(31px, 8vw, 44px);
          --type-section: 30px;
          --type-sub: 21px;
          --type-small: 13px;
          --section-space: var(--space-12);
          --panel-padding: var(--space-6);
        }
.gi-root .gi-wrap{
          width: calc(100% - 40px);
        }
.gi-root .gi-masthead{
          height: 68px;
          gap: var(--space-4);
        }
.gi-root .gi-brand{
          font-size: 25px;
        }
.gi-root .gi-document-label{
          max-width: 145px;
          text-align: right;
          line-height: 1.5;
        }
.gi-root .gi-hero{
          padding: var(--space-12) 0;
        }
.gi-root .gi-hero-copy{
          margin-top: var(--space-6);
        }
.gi-root .gi-product-definition br{
          display: none;
        }
.gi-root .gi-intro-comparison{
          margin-top: var(--space-8);
        }
.gi-root .gi-way{
          grid-template-columns: 1fr;
          gap: var(--space-4);
          padding: var(--space-6) var(--space-4);
        }
.gi-root .gi-way-title{
          grid-template-columns: 64px 1fr;
          gap: var(--space-4);
        }
.gi-root .gi-work-chain{
          gap: var(--space-2);
        }
.gi-root .gi-work-chain span + span::before{
          margin-right: var(--space-2);
        }
.gi-root .gi-use-roles, .gi-root .gi-followup-example, .gi-root .gi-context-grid, .gi-root .gi-setup{
          grid-template-columns: 1fr;
          gap: var(--space-8);
        }
.gi-root .gi-section-heading, .gi-root .gi-audit-header{
          margin-bottom: var(--space-8);
        }
.gi-root .gi-lead{
          margin-top: var(--space-4);
        }
.gi-root .gi-network{
          height: 500px;
        }
.gi-root .gi-node-column{
          width: auto;
          top: auto;
          transform: none;
          left: var(--space-4);
          right: var(--space-4);
        }
.gi-root .gi-node-column.gi-left{
          left: var(--space-4);
          right: var(--space-4);
          top: var(--space-4);
          grid-template-columns: repeat(3, minmax(0, 1fr));
          gap: var(--space-2);
        }
.gi-root .gi-node-column.gi-right{
          left: var(--space-4);
          right: var(--space-4);
          bottom: var(--space-4);
          grid-template-columns: repeat(3, minmax(0, 1fr));
          gap: var(--space-2);
        }
.gi-root .gi-node{
          padding: var(--space-2) 4px;
          min-width: 0;
          min-height: 80px;
        }
.gi-root .gi-node.gi-ai-tool{
          flex-direction: column;
          gap: var(--space-1);
          min-height: 88px;
        }
.gi-root .gi-ai-tool svg{
          width: 22px;
          height: 22px;
          flex-basis: 22px;
        }
.gi-root .gi-source-node{
          min-height: 112px;
        }
.gi-root .gi-network-gate{
          width: 144px;
          top: 57%;
          padding: var(--space-3);
          font-size: var(--type-small);
        }
.gi-root .gi-network-comparison{
          gap: var(--space-8);
        }
.gi-root .gi-diagram-heading{
          margin-bottom: var(--space-4);
        }
.gi-root #audit-list{
          grid-template-columns: 1fr;
          gap: var(--space-6);
        }
.gi-root .gi-audit-entry + .gi-audit-entry{
          border-left: 0;
          border-top: 1px solid var(--line);
          padding-left: 0;
        }
.gi-root .gi-audit-fields{
          grid-template-columns: 68px minmax(0, 1fr);
          gap: var(--space-4) var(--space-3);
        }
.gi-root .gi-audit-toolbar{
          align-items: start;
        }
.gi-root .gi-paper-top{
          flex-wrap: wrap;
          gap: var(--space-2);
        }
.gi-root .gi-wrap-context{
          padding-bottom: var(--space-8);
        }
.gi-root #start{
          padding-top: var(--space-8);
        }
.gi-root .gi-footer-inner{
          flex-wrap: wrap;
          gap: var(--space-4);
        }

      }
@media print{.gi-root .gi-wrap{
          width: 100%;
        }
.gi-root .gi-hero, .gi-root .gi-section{
          padding: var(--space-6) 0;
        }
.gi-root .gi-way, .gi-root .gi-network, .gi-root .gi-audit-entry{
          break-inside: avoid;
        }
.gi-root .gi-network-comparison{
          grid-template-columns: 1fr 1fr;
        }
.gi-root .gi-node.gi-ai-tool{
          flex-direction: column;
        }
.gi-root .gi-network{
          height: 560px;
        }

      }

    
.gi-root{padding-top:64px;background:var(--bg)}