<!DOCTYPE html>
<html lang="{{@site.locale}}">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>{{meta_title}}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" type="text/css" href="{{asset "built/screen.css"}}">
    <link rel="stylesheet" type="text/css" href="{{asset "built/tailwind.css"}}">

    {{ghost_head}}
</head>
<body class="{{body_class}} bg-bgr text-typ antialiased"{{#if @site.accent_color}} style="--accent: {{@site.accent_color}}; --accent-strong: color-mix(in srgb, {{@site.accent_color}} 84%, #000);"{{/if}}>
    {{> "site/topbar"}}
    <div class="left-sidebar-backdrop" data-left-sidebar-backdrop hidden></div>
    <div class="site-shell-wrap border-t border-brd bg-bgr">
        <div class="site-shell mx-auto">
            {{> "site/sidebar-left"}}
            <div class="site-main min-w-0 bg-bgr">
                {{{body}}}
            </div>
            {{> "site/sidebar-right"}}
        </div>
    </div>
    <div class="share-modal" data-share-modal hidden>
        <div class="share-modal__backdrop" data-share-modal-close></div>
        <div class="share-modal__dialog" role="dialog" aria-modal="true" aria-labelledby="share-modal-title">
            <button class="share-modal__close" type="button" data-share-modal-close aria-label="Close share modal">×</button>
            <span class="share-modal__eyebrow">Share this post</span>
            <div class="share-modal__preview">
                <figure class="share-modal__image-wrap">
                    <img class="share-modal__image hidden" data-share-modal-image alt="">
                </figure>
                <div class="share-modal__meta">
                    <h2 class="share-modal__title" id="share-modal-title" data-share-modal-title></h2>
                    <p class="share-modal__description" data-share-modal-description></p>
                </div>
            </div>
            <div class="share-modal__actions">
                <a class="share-modal__action share-modal__action--x" data-share-link="x" target="_blank" rel="noopener noreferrer" aria-label="Share on X">
                    <i class="icon icon-brand-x size-4 stroke-2" role="presentation">
                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-x" width="16" height="16" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                            <path d="M4 4l11.733 16h4.267l-11.733 -16z"></path>
                            <path d="M4 20l6.768 -6.768m2.46 -2.46l6.772 -6.772"></path>
                        </svg>
                    </i>
                    <span class="sr-only">Share on X</span>
                </a>
                <button class="share-modal__action share-modal__action--copy" type="button" data-share-copy-button aria-label="주소 복사">
                    <i class="icon icon-link size-4 stroke-2" role="presentation">
                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" width="16" height="16" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                            <path d="M9 15l6 -6"></path>
                            <path d="M11 6l.463 -.536a5 5 0 0 1 7.071 7.072l-.534 .464"></path>
                            <path d="M13 18l-.397 .534a5.068 5.068 0 0 1 -7.127 0a4.972 4.972 0 0 1 0 -7.071l.524 -.463"></path>
                        </svg>
                    </i>
                    <span data-share-copy-label>주소 복사</span>
                </button>
            </div>
        </div>
    </div>

    {{ghost_foot}}
    <script defer src="{{asset "built/alpine.js"}}"></script>
    <script src="{{asset "built/theme.js"}}"></script>
</body>
</html>
